Form and Input Tag

These are Form and input tags of html.

 

  • <form> - The Form tag is used to create form in HTML page for user input.

    • USAGE:-

      • <form action="/action_page.php" method="get">First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><input type="submit" value="Submit"></form>

  • <input> - The input tag is used to create input field in the form.

    • USAGE:-

      • <form action="" method="get">Email <input type="text" name="email"><br> Password <input type="password" name="password"><br><input type="submit" value="Submit"></form>

  • <textarea> - The textarea tag is used create multi-line input field. If we do not define columns and rows by default it create 20 columns and 2 rows.

    • USAGE:-

      • <form><textarea>with default cols and rows. Multi-line text here</textarea></form>

      • <form><textarea cols=”5” rows=”3”>with defined cols and rows. Multi-line text here</textarea></form>

  • <button> - The button tag is used to define clickable button.

    • USAGE:-

      • <button type="button">Click Me!</button>

  • <select> - The <select> tag is used to create a drop-down list.

    • USAGE:-

      • <select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select>

  • <optgroup> - This tag is used to create a group of related option in dropdown-list.

    • USAGE:-

      • <select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup></select>

  • <option> - The option tag is uded to add option in select list.

    • USAGE:-

      • <select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option></select>

  • <label> - The label tag is used to define label for input elements in the form.

    • USAGE:-

      • <form><label for="male">Male</label><input type="radio" name="gender" id="male" value="male"><label for="female">Female</label><input type="radio" name="gender" id="female" value="female"><br><input type="submit" value="Submit"></form>

  • <fieldset> - To group related element in form and draw box arround group <fieldset> tag is used.

    • USAGE:-

      • <form><fieldset><legend>Personal:</legend> Name: <input type="text"><br> Email: <input type="text"><br>Date of birth: <input type="text"></fieldset></form>

  • <legend> - This tag tag defines a caption for the <fieldset> element.

    • USAGE:-

      • <form><fieldset><legend>Enter Information:</legend></fieldset></form>

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

    • USAGE:-

      • <input list="Books"><datalist id="Books"><option value="MySQL"> <option value="Programing"><option value="Designing"><option value="Web Development"> <option value="Database"></datalist>

  • <output> - The output tag is used to represent result of a calculation.

    • USAGE:-

      • <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output></form>

More you may like to read