HTML Form Elements
In this page:
The Versatile Input Element
The input tag is the most common form element. By changing its type attribute, it can morph into text fields, checkboxes, or file uploaders to gather different types of user data.
Note: Always specify a name attribute on your inputs, as this is the key used to send data to the server.
Warning: Input is a self-closing tag; trying to write a closing input tag is invalid HTML.
Example: The Versatile Input Element
<input type="text" name="username">
<input type="checkbox" name="agree">
<input type="file" name="upload">The Label Element
The label element provides a clear text label for an input field. Linking your labels to your inputs is essential for web accessibility and makes clicking smaller inputs (like checkboxes) much easier.
Note: Link a label to an input by matching the label's for attribute with the input's id attribute.
Warning: Failing to link your labels makes your forms difficult to navigate for visually impaired users.
Example: The Label Element
<label for="agree">I agree to the terms</label>
<input type="checkbox" id="agree">Dropdown Selections with select and option
The select element creates a clean, compact dropdown menu. It groups multiple option tags together, allowing users to select a single value from a list without cluttering your page layout.
Note: Add a placeholder option with 'disabled selected' to guide users on what to select.
Warning: Always include the value attribute on your option tags, as that is the actual data sent to your server.
Example: Dropdown Selections with select and option
<select name="size">
<option value="s">Small</option>
<option value="m">Medium</option>
</select>Multi-Line Text with textarea
When you need more than a single line of text (like user feedback or paragraphs of text to analyze), the textarea element is your best option. Unlike standard inputs, it can hold multiple lines of text and is resizable by default.
Note: Use the rows and cols attributes to define the initial display size of your textarea.
Warning: The textarea tag is not self-closing; you must write a closing tag, even if you want it to start empty.
Example: Multi-Line Text with textarea
<textarea name="feedback" rows="4" cols="30"></textarea>The button Element
The button tag is used to submit form data or trigger actions on your page. By setting its type attribute to submit, it instructs the browser to package and send all the form data to your server.
Note: Use type="button" for buttons that trigger custom JavaScript actions instead of submitting data.
Warning: If you do not specify a type attribute inside a form, browsers will treat it as a submit button by default, which can cause unexpected form submissions.
Example: The button Element
<button type="submit">Send</button>
<button type="button">Run Script</button>- Forgetting to include the required closing tag on textarea elements.
- Leaving out the name attribute on your input elements, which prevents the data from transmitting to the server.
- Omitting explicit type attributes on button tags, causing unexpected form submissions.
- Form elements (like inputs, selects, and textareas) are the interactive fields that gather user data.
- Always link label tags to your inputs to keep your forms accessible.
- Use the versatile input tag for single-line data, select for dropdown menus, textarea for multi-line inputs, and button to submit your forms.
Standard HTML form elements are natively supported by all modern and legacy web browsers.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: