« Previous Next »

The HTML <form> Elements

The HTML

element can contain one or more of the following form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

The <input> Element

Output:

The <select> element defines a drop-down list:

Output:

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

Output:

Allow Multiple Selections:

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

Output:

The <textarea> Element

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

Output:

The <fieldset> and <legend> Elements

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

Output:

The <datalist> Element

Output:

The <output> Element

Output:

Practice Exercises

Task 1: How to create a multi-select box that displays 3 options at once?

Goal: Build a form allowing users to select multiple programming languages from a dropdown list that displays 3 visible options.
💡 Hint: Use the <select> tag with size="3" and the multiple attribute.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Multi Select Example</title>
  </head>
  <body>

    <h2>Allow Multiple Selections</h2>
    <p>Use the size and multiple attributes to allow users to select more than one value.</p>

    <form action="/action_page.php">
      <label for="skills">Choose skills:</label><br><br>
      <select id="skills" name="skills" size="3" multiple>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
      </select><br><br>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>
Output :

Allow Multiple Selections

Use the size and multiple attributes to allow users to select more than one value.




Explanation: The <select> element defines a list. size="3" sets the number of visible items, and multiple allows users to hold Ctrl/Cmd to select several options.
Task 2: How to group form fields together and add a multi-line message box?

Goal: Group a user feedback section using a border box with a title and provide a multi-line text input field.
💡 Hint: Wrap inputs inside <fieldset>, title it with <legend>, and use <textarea> with rows and cols.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Fieldset and Textarea Example</title>
  </head>
  <body>

    <h2>Grouping Form Data</h2>

    <form action="/action_page.php">
      <fieldset>
        <legend>User Feedback:</legend>
        <label for="comments">Your Comments:</label><br>
        <textarea id="comments" name="comments" rows="4" cols="30">Write your feedback here...</textarea><br><br>
        <input type="submit" value="Submit">
      </fieldset>
    </form>

  </body>
</html>
Output :

Grouping Form Data

User Feedback:

Explanation: The <fieldset> tag creates a bordered container, <legend> specifies its caption, and <textarea> provides a multi-line box whose size is defined by rows and cols.
Task 3: How to create an input field with pre-defined search suggestions?

Goal: Create an input box for selecting a web browser that displays a list of autocomplete options as the user types.
💡 Hint: Link an <input list="..."> element to a <datalist id="..."> containing <option> tags.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Datalist Example</title>
  </head>
  <body>

    <h2>The datalist Element</h2>
    <p>The datalist element specifies a list of pre-defined options for an input element.</p>

    <form action="/action_page.php">
      <label for="browser">Choose your browser:</label><br>
      <input list="browsers" name="browser" id="browser">
      <datalist id="browsers">
        <option value="Edge">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>
Output :

The datalist Element

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


Explanation: Unlike a standard ` 100 + = 100

Explanation: The <output> element displays calculated values. The oninput attribute calculates the sum in real time whenever either input changes.
« Previous Next »