Qarpeo LogoInstitute

Forms

HTML <forms> gather user input and send it to a server. They include elements like text fields, checkboxes, and buttons, with attributes for validation and submission. Combined with CSS and JavaScript, forms become interactive and user-friendly.

Forms in HTML

Forms in HTML are used to collect user input and submit data to a server. The <form> element contains various input fields, buttons, and controls.

The HTML <form> Elements

The HTML <form> tag can include various form elements such as:

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

Forms in HTML are essential for gathering user input and submitting data to servers. They consist of various elements like <input>, <select>, <textarea>, and <button>, each serving specific roles for user interaction. With attributes such as action, method, forms ensure the proper handling and submission of data. Proper structuring of form elements and labels enhances accessibility and usability.

Graphics

HTML graphics are created using elements like (<canvas>) for drawing 2D shapes or animations, and (<svg>) for scalable vector-based images.