HTML Form Elements

The HTML form have different types of input Elements such as text area, button, fieldset,etc.

Form Elements :

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

The <input> Attribute

The value Attribute. The input value attribute specifies an initial value for an input field

<form action="index_page.php">
    <label> name </label>
    <input type="text" id="name" name="name">
</form >

The <label> Attribute

The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control.

<form action="index_page.php">
    <label for="name"> name </label>
    <input type="text" id="name" name="name">
</form >

The <select> Attribute

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

<form>
    <label> Select Your favourite programming Language </label>
    <select id="language" name="language">
        <option value="C++" > C++ </option>
        <option value="Java" > Java </option>
        <option value="PHP" > PHP </option>
        <option value="Python" > Pyhton </option>
    </select>
</form >

The <textarea> Attribute

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

<form action="index_page.php">
    <textarea name="message" row="10" cols="40">
</form >

The <button> Attribute

The <button> element defines a clickable button

<form action="index_page.php">
    <button type="button" onclick="alert('The button is clicked \n press OK to close' )"> Click Me! </button>
</form >

The <fieldset> & <legend> Element

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

<form action="index_page.php">
    <fieldset>
        <legend> Personal Details </legend>
        <label> name </label>
        <input type="text" id="name" name="name">
        <label> Mobile Number </label>
        <input type="number" id="mobile_no" name="mobile_no">
    </fieldset>
</form >

The <datalist> Attribute

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

<form action="index_page.php">
    <input list="cars" name="cars">
    <datalist id="cars">
        <option value="Fiat">  
        <option value="Audi">  
        <option value="Tesla"> 
        <option value="Mercedes">    
    <datalist>
</form >

The <output> Element

The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control.

<form action="index_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>
</form >