Skip to main content

Form Elements

HTML forms are a vital part of web pages and applications. They provide a way for users to input data that can be processed by the server. Form elements are the different types of input elements that can be used within a form. We will be discussing the various form elements used in HTML.

Input Types​

The <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

  • <input type="text"> for a single-line text input field
  • <input type="password"> for a password input field that hides the characters
  • <input type="submit"> for a button that submits the form

The Textarea Element​

The <textarea> element defines a multi-line input field (a text area).

Example:

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The Button Element​

The <button> element defines a clickable button.

Example:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The Select Element​

The <select> element is used to create a drop-down list. The <option> tags inside the <select> define the available options in the list.

Example:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

The Option Group Element​

The <optgroup> element is used to group related options in a drop-down list.

Example:

<select name="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

The Fieldset Element​

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

Example:

<fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
</fieldset>

In HTML forms, these elements play a vital role in collecting user input. Practice using these elements to get a good understanding of how they work. Remember, the best way to learn is by doing!