← Back to HTML Course | Chapter 5: Forms | Lesson 3 of 7

HTML Form Elements

Think of a form as a remote control for your TV. The remote casing itself is the main form tag, but the buttons, sliders, and dials are individual form elements. Each element has a specific job: a text box lets users type, a dropdown lets them select, and a button sends the signal. To build a great form, you need to use the right element for each task so users can interact with your page easily. Using correct form elements keeps your forms accessible to screen readers and easy to navigate.

In this page:

  1. The Versatile Input Element
  2. The Label Element
  3. Dropdown Selections with select and option
  4. Multi-Line Text with textarea
  5. The button Element
Syntax
markup 
<input type="type" name="name">
<select name="name">
  <option value="value">Label</option>
</select>
<textarea name="name" rows="number" cols="number"></textarea>
<button type="submit">Label</button>

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.
  • Accepted attributes:
  • type — text | password | email | number | date | checkbox | radio | file | submit | range | color ...
  • name — key used when submitting
  • value — initial value
  • placeholder — hint text
  • required / disabled / readonly — booleans
  • autocomplete — on | off
Warning: Input is a self-closing tag; trying to write a closing input tag is invalid HTML.

Example: The Versatile Input Element

markup 
<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.
  • Accepted attributes:
  • for — id of the associated form control
  • Alternative: nest the control inside the label
Warning: Failing to link your labels makes your forms difficult to navigate for visually impaired users.

Example: The Label Element

markup 
<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.
  • Accepted attributes:
  • select multiple — boolean
  • select size — number of visible rows
  • select name / required / disabled
  • option value — submitted value
  • option selected — boolean
  • option disabled — boolean
  • optgroup label — group name
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

markup 
<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.
  • Accepted attributes:
  • rows — visible lines (integer)
  • cols — visible character width (integer)
  • name / placeholder / required / readonly / disabled
  • maxlength / minlength — integer
  • wrap — soft | hard | off
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

markup 
<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.
  • Accepted attributes:
  • type — submit | reset | button
  • name / value
  • disabled — boolean
  • form — id of associated form
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

markup 
<button type="submit">Send</button>
<button type="button">Run Script</button>
Live Example
Related Topics

HTML Form Attributes · HTML Input Form Attributes · HTML Elements · HTML Input Types

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the required closing tag on textarea elements.
  2. Leaving out the name attribute on your input elements, which prevents the data from transmitting to the server.
  3. Omitting explicit type attributes on button tags, causing unexpected form submissions.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson HTML Form Attributes Next Lesson → HTML Optgroup

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.