Home / HTML / Forms / Form Elements

HTML Form Elements

What are Form Elements?

Form elements are HTML elements used to collect user input in forms. They include various input types, select dropdowns, text areas, buttons, and other controls. Understanding all form elements is essential for creating functional and user-friendly forms.

Common Form Elements

Here are the most commonly used form elements:

Input Element

The <input> element is the most versatile form element. It can be used for text, passwords, emails, checkboxes, radio buttons, dates, and more:

Example
<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</form>

Label Element

The <label> element provides a label for form controls, improving accessibility and usability:

Example
<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</form>

Textarea Element

The <textarea> element creates a multi-line text input area:

Example
<form>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50">Enter your message here...</textarea>
</form>

Select Element

The <select> element creates a dropdown list:

Example
<form>
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
        <option value="au">Australia</option>
    </select>
</form>

Button Element

The <button> element creates a clickable button:

Example
<form>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button">Click Me</button>
</form>

Fieldset and Legend

The <fieldset> element groups related form controls, and the <legend> element provides a caption:

Example
<form>
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </fieldset>
</form>

Optgroup Element

The <optgroup> element groups related options in a select dropdown:

Example
<form>
    <label for="car">Car:</label>
    <select id="car" name="car">
        <optgroup label="German">
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
        </optgroup>
        <optgroup label="Japanese">
            <option value="toyota">Toyota</option>
            <option value="honda">Honda</option>
        </optgroup>
    </select>
</form>

Datalist Element

The <datalist> element provides a list of predefined options for an input element:

Example
<form>
    <label for="browser">Browser:</label>
    <input list="browsers" id="browser" name="browser">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
    </datalist>
</form>

Output Element

The <output> element represents the result of a calculation or user action:

Example
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="10"> +
    <input type="number" id="b" value="20"> =
    <output name="result" for="a b">30</output>
</form>

Complete Form Example

Example
<form action="#" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
        </select><br><br>
        
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
        
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </fieldset>
</form>

Form Element Reference

Element Description
<form> Form container
<input> Input field (various types)
<label> Label for form control
<textarea> Multi-line text input
<select> Dropdown list
<option> Option in select dropdown
<optgroup> Group of options
<button> Clickable button
<fieldset> Group of form controls
<legend> Caption for fieldset
<datalist> Predefined options for input
<output> Result of calculation

Best Practices

← HTML Forms Input Types →