HTML Inputs Summary
HTML forms collect information from users. A form can contain labels, text fields, email fields, checkboxes, menus, text areas, and buttons.
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name">
<button type="submit">Send Form</button>
</form>The Form Element
The form element groups the fields and controls that belong together.
<form>
Form fields go here.
</form>A form does not automatically save or send information by itself. It needs a destination on a server or JavaScript that handles the submitted data.
Labels Explain Form Fields
The label element tells the user what information belongs in a field.
<label for="email">Email Address</label>
<input type="email" id="email" name="email">The label’s for value matches the input’s id. This connects the two elements, so clicking the label also selects the field.
Every form field should have a clear label. Placeholder text can provide an example, but it should not replace the label.
The Input Element
The input element creates many common form controls. It does not use a closing tag.
<input type="text">The type attribute changes the kind of information the input accepts.
Text Inputs
A text input collects a short line of text, such as a name, city, or subject.
<label for="name">Name</label>
<input type="text" id="name" name="name">Text inputs are one of the most common controls in forms.
Email Inputs
An email input tells the browser that the field should contain an email address.
<label for="email">Email Address</label>
<input type="email" id="email" name="email">Browsers can use the email type to show a more useful keyboard on mobile devices and check whether the value looks like an email address.
Password, Number, And Date Inputs
Other input types provide controls for specific kinds of information.
<input type="password" name="password">
<input type="number" name="quantity">
<input type="date" name="date">A password input hides the characters being entered. A number input accepts numeric values. A date input lets the browser provide a date control.
The Name Attribute
The name attribute identifies the field when the form data is submitted.
<input type="text" name="first-name">Without a name, the field’s value is usually not included in the submitted form data. Use short, descriptive names that explain what each value represents.
Required Fields
The required attribute tells the browser that a field must be completed before the form can be submitted.
<input type="email" name="email" required>Required is a boolean attribute. Its presence turns the requirement on.
Placeholder Text
The placeholder attribute displays temporary example text inside an empty input.
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="name@example.com">Placeholder text disappears when the user starts typing. Keep the visible label so the field remains understandable after the placeholder is gone.
Text Areas
The textarea element collects longer, multi-line text such as a message or description.
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>Unlike an input, a textarea has an opening tag and a closing tag.
Select Menus
The select element creates a menu of choices. Each choice is created with an option element.
<label for="topic">Topic</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>The text inside each option is shown to the user. The value attribute is the value included with the submitted form data.
Checkboxes
A checkbox lets the user turn one choice on or off.
<input type="checkbox" id="updates" name="updates">
<label for="updates">Send me updates</label>Checkboxes are useful when several choices can be selected independently.
Radio Buttons
Radio buttons let the user select one choice from a group. Radio inputs in the same group share the same name.
<input type="radio" id="beginner" name="level" value="beginner">
<label for="beginner">Beginner</label>
<input type="radio" id="experienced" name="level" value="experienced">
<label for="experienced">Experienced</label>Because both inputs use name="level", selecting one clears the other.
Form Buttons
A form usually ends with a submit button.
<button type="submit">Send Form</button>The submit button tells the form to send its current values. The HTML buttons lesson explains button types and behavior in more detail.
Action And Method
The action attribute tells the form where to send its data. The method attribute tells the browser how to send it.
<form action="/contact" method="post">
Form fields go here.
</form>The form’s destination must be prepared to receive and process the submitted information. Front-end HTML creates the form, but it does not store the data by itself.
A Complete Simple Form
A useful form connects every label to its field, gives every field a name, and uses a button with a clear purpose.
<form action="/contact" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send Message</button>
</form>This structure gives the browser and the user enough information to understand every field and control.