What Is The HTML Form Elements

This HTML Form Elements part depicts all the distinctive HTML structure components.

The HTML <form> Elements

The HTML <form> component can contain at least one of the accompanying structure components:

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>
  • <output>
  • <option>
  • <optgroup>

The <input> Element

Quite possibly the most utilized structure component is the <input> element.

The <input> component can be shown severally, contingent upon the sort characteristic.

Example

<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”>

Every one of the various upsides of the sort characteristic are canvassed in the following part:: HTML Input Types.

The <label> Element

The <label> component characterizes a name for a few structure components.

The <label> component is helpful for screen-peruser clients, in light of the fact that the screen-peruser will recite for all to hear the mark when the client center around the information component.

The <label> component additionally help clients who experience issues tapping on tiny districts (like radio catches or checkboxes) – in light of the fact that when the client taps the content inside the mark component, it flips the radio catch/checkbox.

The for attribute of the <label> The for characteristic of the name tag ought to be equivalent to the id property of the info component to tie them together.

The <select> Element

The <select> component characterizes a drop-down list:

Example

<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>

The <option> components characterizes a choice that can be chosen.

Of course, the primary thing in the drop-down list is chosen.

To characterize a pre-chosen choice, add the chose property to the choice:

Example

<option value=”fiat” selected>Fiat</option>

Visible Values:

Utilize the size property to indicate the quantity of apparent qualities:

Example

<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>

Allow Multiple Selections:

Utilize the various trait to permit the client to choose more than one worth:

Example

<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>

The <textarea> Element

The <textarea> component characterizes a multi-line input field (a book region):

Example

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

The lines property determines the noticeable number of lines in a content region.

The cols characteristic indicates the apparent width of a book region.

This is the means by which the HTML code above will be shown in a program:

HTML Form Elements
HTML Form Elements

You can likewise characterize the size of the content region by utilizing CSS:

Example

<textarea name=”message” style=”width:200px; height:600px;”>
The cat was playing in the garden.
</textarea>

The <button> Element

The <button> component characterizes an interactive catch:

Example

<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>

Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset>component is utilized to bunch related information in a structure.

The <legend> component characterizes a subtitle for the <fieldset> element.

Example

<form action=”/action_page.php”>
  <fieldset>
    <legend>Personalia:</legend>
    <label for=”fname”>First name:</label><br>
    <input type=”text” id=”fname” name=”fname” value=”John”><br>
    <label for=”lname”>Last name:</label><br>
    <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
    <input type=”submit” value=”Submit”>
  </fieldset>
</form>

The <datalist> Element

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

This is the way the HTML code above will be shown in a program:

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Example

<form action=”/action_page.php”>
  <input list=”browsers”>
  <datalist id=”browsers”>
    <option value=”Internet Explorer”>
    <option value=”Firefox”>
    <option value=”Chrome”>
    <option value=”Opera”>
    <option value=”Safari”>
  </datalist>
</form>

The <output> Element

Clients will see a drop-down rundown of the pre-characterized choices as they input information.

Example

Perform a calculation and show the result in an <output> element:

<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>
  <input type=”submit”>
</form>