Qarpeo LogoInstitute

<form>

The HTML <form> element contains various input controls and elements, enabling users to submit data to a server for processing via buttons, fields, and other interactive components.

form Tag

The <form> element represents a section of a document that contains interactive controls for submitting information.

Syntax

HTML
<form>
  <!-- Form elements go here -->
</form>

The <input> Element

The <input> element is a fundamental part of web forms. Its look and behavior change depending on the value set for the type attribute.

The input Element




index.html
<h2>The input Element</h2>
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input class="!outline !focus:outline" type="text" id="lname" name="lname"><br><br>
  <button type="button">Submit</button>
</form>

The <label> Element

The <label> element defines labels for form controls, enhancing accessibility. It helps screen reader users by reading the label when focusing on an input and allows easier interaction with small elements like checkboxes or radio buttons. The for attribute in the <label> must match the id of the corresponding <input>.

The <select> Element

The <select> element is designed to generate a drop-down list, allowing users to choose from multiple options.

The select Element

The select element defines a drop-down list:

index.html
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

The <option> element defines an individual choice within a drop-down list.

  • By default, the first item in the list is selected.
To preselect a specific option, add the selected attribute to that option.
Pre-selected Option

You can preselect an option with the selected attribute:

index.html
<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute:</p>
<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>
  • Visible Items:

The size attribute controls the number of options displayed at the same time within the list.

Visible Option Values

Use the size attribute to specify the number of visible values.



index.html
<h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p>
<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars" size="3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select><br><br>
  <input type="submit">
</form>

The multiple attribute lets users choose multiple options from the list.

Allow Multiple Selections

Use the multiple attribute to allow the user to select more than one value.



Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.

index.html
<h2>Allow Multiple Selections</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>
<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars" size="4" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select><br><br>
  <input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

The <textarea> Element

The <textarea> element provides a multi-line input field for entering text.

Textarea

The textarea element defines a multi-line input field.



index.html
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form>
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

The <button> Element

The <button> element generates a clickable button for user interactions.

The button Element
index.html
<h2>The button Element</h2>
<button type="button">Click Me!</button>

The <fieldset> and <legend> Elements

Grouping Form Data with Fieldset

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

Personalia:




index.html
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>
<form>
  <fieldset>
    <legend>Personalia:</legend>
    <br>
    <label for="fname">First name:</label>
    <input type="text" id="fname" value="John" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input class="!outline !focus:outline" type="text" id="lname" value="Doe" name="lname"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

The <datalist> Element

The <datalist> element offers a predefined list of suggestions for an <input> field.

As users type, matching options appear in a drop-down list.

The list attribute of the <input> must correspond to the id of the <datalist>.
The datalist Element

The datalist element specifies a list of pre-defined options for an input element.

index.html
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>
The get method requests data from the server, whereas the post method transmits data to the server.

In this example:

  • The <form> element contains the form fields.
  • The action attribute defines the destination URL for form submission.
  • The method attribute determines that the form will be submitted using the POST method.

Attributes

The <form> element supports global attributes.

  • accept: Specifies a comma-separated list of content types the server can process.
  • accept-charset: Defines a space-separated list of character encodings the server accepts, processed in order. By default, it aligns with the document’s encoding.
  • autocapitalize: Controls automatic capitalization of user input text.

Conclusion

The <form> element in HTML is a fundamental part of web development, used to gather input from users and submit that data to a server. It contains various input elements such as <input>, <select>, <textarea> and others to create interactive controls for form submission. The <form> element supports several attributes, including action(for form submission destination) and method (for defining the submission type like GET or POST).

<fieldset>

The HTML <fieldset> element is used to group related form controls and labels, enhancing organization and accessibility by visually enclosing a set of controls.

<input>

The HTML <input> element generates interactive elements within a form, including text fields, checkboxes, and buttons, utilizing different type attributes to specify their functions.