HTML <form> can contain one or more of the following form elements:

Some HTML Form's Element

Description

The <input> Element

The input element is one of the most used form elements.

The input element has a typed attribute usually associated with a data type that allows users to edit its value. This element provides many different types of fields, according to the value present in the type attribute

<form method="post" action="form_action.php">

  <label for="fname">First name:</label>

  <input type="text" id="fname" name="firstName" required><br><br>

  <label for="email">Email:</label>

  <input type="text" id="email" name="email" required><br><br>

  <input type="submit">

</form>

The input type attribute is covered in the next chapter: HTML Input Type

 The HTML <textarea> have two main attribute row and cols : HTML Input Type

The <textarea> element

The HTML <textarea> element represents a multi-line plain-text editing Field, useful when you want to allow users to enter multiple lines of comment or message text,
for example a comment on a review or feedback form.

<textarea id="story" name="story"

          rows="5" cols="33">

You can write multiple lines

</textarea>

The <label> element

The HTML <label> element used as label for several form elements.

<label> element is useful for a screen reader when screen reader will read label reader will read out loud the label when the user focuses on the input element.

The <label> component additionally facilitate users who have issue clicking on terribly little regions (such as radio buttons or checkboxes) - as a result of once the user clicks the text inside the <label> element, it toggles the radio button/checkbox.

<label for="male">Male</label>

<input type="radio" id="male" name="gender">

<label for="female">Female</label>

<input type="radio" id="female" name="gender">



<p>Click on label and ratio button will toggle automatically</p>

The <select> element

The element defines a dropdown list:

<label for="language">Choose a Programming Language:</label>

<select id="language" name="language">

  <option value="Javascript">Javascript</option>

  <option value="Java">Java</option>

  <option value="PHP">PHP</option>

  <option value="Swift">Swift</option>

</select>

<option>element define an option that can be selected.

One option is selected by default.

You can select the by default option with our choice by adding the selected attribute in the option you want to set by default.

<option value="Javascript">Javascript</option>

We learn more about input elements attribute in the next chapter: HTML Input Type

The <button> element

Clickable button used to submit forms or anywhere in a document for accessible, standard button functionality.

<button onclick="alert('Hello')">Click me</button>

The <fieldset> and <legend> element

The element is used to group related data in a form.

The <legend>element defines a title(caption) for the fieldset element.

<form method="post" action="form_action.php">

  <fieldset>

  <legend>Details:</legend>

   <label for="fname">First name:</label>

   <input type="text" id="fname" name="firstName" required><br><br>

   <label for="email">Email:</label>

   <input type="text" id="email" name="email" required><br><br>

   <input type="submit">

  </fieldset>

</form>

The <datalist> Element.

The element specifies a list of predefined options for an input element.

Users are presented with a drop-down list of pre-defined options when entering data in the input field

<h2>The datalist Element</h2>

<form method="post" action="form_action_datalist.php">

  <input list="language" name="language">

  <datalist id="language">

    <option value="Javascript">

    <option value="Java">

    <option value="PHP">

    <option value="Swift">

  </datalist>

  <input type="submit" value="Submit">

</form>

Note: The datalist tag is not supported in Safari prior version 12.1.

The <output> Element

The output element represents the output of a calculation or process, performed usually by a script.

<p>Change or enter value in input field and output will be display in output tag</p>

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

    0

    <input type="range" id="a" name="a" value="50">

    100 +

    <input type="number" id="b" name="b" value="50">

    =

    <output name="x" for="a b"></output>

    <br><br>

</form>