Input Types (<input>)

The <input> element is arguably the most important element of HTML forms. It is extremely versatile and its behavior changes drastically depending on the value of its type attribute.

It does not have a closing tag and is mandatorily used in combination with a name attribute (so the server knows the name of the data it is processing) and, preferably, an id attribute to associate it with its corresponding <label> tag.

Common Input Types

Basic Text (type="text")

A single-line field for entering text (names, titles).

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Ex: John Doe">

(The placeholder attribute displays grayed-out suggestion text before the user starts typing).

Passwords (type="password")

Visually hides what the user is typing (replacing it with dots or asterisks).

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">

Email (type="email")

HTML5 forces automatic validation that the entered text format looks like an email (contains an @ and a domain).

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Checkboxes (type="checkbox")

For options where zero, one, or multiple can be selected.

<input type="checkbox" id="accept" name="terms" value="yes">
<label for="accept">I accept the terms and conditions</label>

Radio Buttons (type="radio")

For mutually exclusive options, where only one can be selected. All inputs in the same group must share exactly the same name attribute to act this way.

<p>Choose your favorite color:</p>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label>

<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label>

Submit Button (type="submit")

Used to create the button that submits the entire form. (A <button type="submit">Submit</button> works exactly the same).

<input type="submit" value="Save Changes">