MOCKSTACKS
EN
Questions And Answers

More Tutorials









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

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 >
0 100      +      = 100



Conclusion

In this page (written and validated by ) you learned about HTML Form Elements . What's Next? If you are interested in completing HTML tutorial, your next topic will be learning about: HTML Canvas.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.