HTML Inputs Summary
An input is a form field that lets a person type, choose, or enter information on a web page.
Inputs usually appear inside a <form>. The form groups the fields that belong together, such as a name field, an email field, a message box, and a submit button.
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name">
<button type="submit">Send Form</button>
</form>A form does not save information by itself. It needs a server destination or JavaScript code that handles the submitted data.
Labels Explain Fields
A <label> tells the user what information belongs in a field. The label’s for value should match the input’s id.
<label for="email">Email Address</label>
<input type="email" id="email" name="email">This connection helps people, browsers, and assistive technology understand the field. Clicking the label also selects the matching input.
Placeholder text can show an example, but it should not replace a visible label because it disappears when someone starts typing.
The Input Element
The <input> element creates many common form controls. It is a void element, so it uses one tag and does not have a closing tag.
The type attribute changes what kind of information the field expects.
<input type="text">
<input type="email">
<input type="password">A text input collects a short line of text. An email input gives the browser clues that the value should look like an email address. A password input hides the characters as they are typed.
Name Identifies The Submitted Value
The name attribute identifies the field when the form is submitted. Without a name, the field’s value is usually not included in the submitted form data.
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name">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.
<label for="contact-email">Email Address</label>
<input type="email" id="contact-email" name="email" required>required is a boolean attribute. Its presence turns the requirement on.
Checkboxes And Radio Buttons
Some inputs let users choose instead of type. A checkbox turns one choice on or off.
<input type="checkbox" id="updates" name="updates">
<label for="updates">Send me updates</label>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 radio inputs use name="level", selecting one clears the other.
Text Areas And Select Menus
Not every form field uses <input>. A <textarea> collects longer, multi-line text, and a <select> creates a menu of choices.
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
<label for="topic">Topic</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>These elements still follow the same basic idea: give the user a clear label, give the field a useful name, and choose the control that matches the information being collected.
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>The action attribute tells the form where to send the data, and the method attribute tells the browser how to send it. The HTML buttons lesson explains submit buttons in more detail.