HTML - <input> tag
<p>The <code><input type="text"></code> tag in HTML is used to create interactive form controls for collecting user input. It is a <strong>self-closing</strong> tag and can represent many types of input fields such as text boxes, checkboxes, radio buttons, buttons, etc., depending on the value of its <code>type</code> attribute.</p>
<h2>Basic Syntax:</h2>
<pre><code class="language-html"><input name="username" type="text">
</code></pre>
<h2>Common Input Types:</h2>
<table>
<thead>
<tr>
<th><code>type</code> value</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text</code></td>
<td>Single-line text input</td>
</tr>
<tr>
<td><code>password</code></td>
<td>Obscured text (e.g., for passwords)</td>
</tr>
<tr>
<td><code>email</code></td>
<td>Email address input</td>
</tr>
<tr>
<td><code>number</code></td>
<td>Numeric input</td>
</tr>
<tr>
<td><code>checkbox</code></td>
<td>Checkbox input</td>
</tr>
<tr>
<td><code>radio</code></td>
<td>Radio button</td>
</tr>
<tr>
<td><code>submit</code></td>
<td>Submit button</td>
</tr>
<tr>
<td><code>reset</code></td>
<td>Reset button</td>
</tr>
<tr>
<td><code>button</code></td>
<td>Clickable button</td>
</tr>
<tr>
<td><code>file</code></td>
<td>File uploader</td>
</tr>
<tr>
<td><code>date</code>, <code>time</code></td>
<td>Date/time input fields</td>
</tr>
<tr>
<td><code>hidden</code></td>
<td>Hidden data field</td>
</tr>
</tbody>
</table>
<h2>Element-Specific Attributes:</h2>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>Specifies the input type (e.g., <code>text</code>, <code>password</code>, <code>email</code>, etc.)</td>
</tr>
<tr>
<td><code>name</code></td>
<td>Name of the input (used when form is submitted)</td>
</tr>
<tr>
<td><code>value</code></td>
<td>Default or current value of the input</td>
</tr>
<tr>
<td><code>placeholder</code></td>
<td>Hint text inside the input box</td>
</tr>
<tr>
<td><code>required</code></td>
<td>Makes the input mandatory</td>
</tr>
<tr>
<td><code>readonly</code></td>
<td>Makes the input uneditable</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td>Disables the input field</td>
</tr>
<tr>
<td><code>maxlength</code></td>
<td>Limits the number of characters</td>
</tr>
<tr>
<td><code>min</code> / <code>max</code></td>
<td>Minimum and maximum values (used with <code>number</code>, <code>date</code>, etc.)</td>
</tr>
<tr>
<td><code>step</code></td>
<td>Value interval for <code>number</code>, <code>range</code>, or <code>date/time</code> types</td>
</tr>
<tr>
<td><code>checked</code></td>
<td>Used for <code>checkbox</code> or <code>radio</code> to indicate default selection</td>
</tr>
<tr>
<td><code>autocomplete</code></td>
<td>Enables or disables autocomplete (<code>on</code> or <code>off</code>)</td>
</tr>
<tr>
<td><code>autofocus</code></td>
<td>Automatically focuses on the field when the page loads</td>
</tr>
<tr>
<td><code>pattern</code></td>
<td>Regular expression for input validation</td>
</tr>
<tr>
<td><code>multiple</code></td>
<td>Allows multiple values (e.g., file uploads or emails)</td>
</tr>
<tr>
<td><code>size</code></td>
<td>Sets visible width (number of characters)</td>
</tr>
</tbody>
</table>
<h2> Example:</h2>
<pre> </pre>
<form><input name="username" required="" type="text" placeholder="Enter your name"> <input name="email" required="" type="email" placeholder="Enter your email"> <input maxlength="20" name="password" type="password"> <input max="100" min="18" name="age" type="number"> <input type="submit" value="Register"></form>
<pre><code class="language-html">
</code></pre>
<p> </p>
<p> </p>
