Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

HTML Form Elements

HTML Form Elements


There are different types of form elements from that you can collect user data.


  • Text input field
  • Password input field
  • Textarea
  • Radio Box
  • Checkbox
  • Select menu
  • File Upload
  • hidden field
  • Simple button
  • Submit and Reset Button
  • Image Button


  • Text input field

    <form>
    Text1:<input type="text" name="text1">
    </form>
    

    Result

    Text1:

    Text input field Attributes

    • type:indicated type of input field for text input the value of type is text.

    • name:is used to give the name to input field so that the backend script can get the value of that input field.

    • value:is used to give the initial value to input field.

    • size:is used to increase the width of the text input field.

    • maxlength:is used to specify maximum number of character a user can enter in text box.



    Password input field

    <form>
    Password1:<input type="password" name="pass1">
    </form>
    

    Result

    Password1:

    Password input field Attributes

    Same as Text Input field attributes.




    Textarea

    <form>
    Textarea1:<textarea rows="5" cols="30" name="textarea1"></textarea>
    </form>
    

    Result

    Textarea1:

    Texarea Attributes

    • name:is used to give the name to textarea so that the backend script can get the value of that textarea.

    • rows:is used to insert number of rows in textarea.

    • cols:is used to insert number of cols in textarea.



    Radio Box

    Radio Box is used when you have choose on option out of many options.

    <form>
    Radiobox1<input type="radio" name="demo" value="Radiobox1">
    Radiobox2<input type="radio" name="demo" value="Radiobox2">
    </form>
    

    Result

    Radiobox1
    Radiobox2

    Radio Box Attributes

    • type:indicated type of input field for radio input the value of type is radio.

    • name:is used to give the name to radio box so that the backend script can get the value of that radio box.

    • value:is used to if the radio box is selected.

    • checked:is used when you want to select the particular radio box by default.



    Check Box

    Check Box is used when you have choose multiple options.

    <form>
    Checkbox1<input type="checkbox" name="checkboxdemo1" value="Checkbox1">
    Checkbox2<input type="checkbox" name="checkboxdemo2" value="Checkbox2">
    </form>
    

    Result

    Checkbox1
    Checkbox2

    Check Box Attributes

    Same as Radio Box Attributes.




    Select Menu

    Select Menu is also called drop down menu.It provides a drop down list of various options from that you can select one or more options.

    <form>
    <select>
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    </select>
    </form>
    

    Result


    Select Menu Attributes

    • name:is used to give the name to select menu so that the backend script can get the value of that select menu.

    • size:is used to present a scrolling list box.

    • multiple:is used to allow the user to select multiple options.


    Option Attributes

    • value:is used to if the option of the select menu is selected.
    • selected:is used to select a perticular option by default.



    File Upload

    It is used to upload binary files like images,documents etc.

    <form>
    <input type="file" name="file1">
    </form>
    

    Result


    File Upload Attributes

    • name:is used to give the name to file upload button so that the backend script can get the value of that file upload.

    • accept:is used to specify the type of file that the server accept.



    Hidden Field

    It is used to store data inside the webpage when the user submit the form the value of the hidden field is also send to the server just like other HTML elements value.It is always hidden and the data is also hidden.

    <form>
    Text1<input type="text" name="text1">
    <input type="hidden" name="hidden1" value="Apple">
    Text2<input type="text" name="text2">
    </form>
    

    Result

    Text1

    Text2



    Simple Button

    <form>
    <input type="button" name="button1" value="Button1">
    <input type="button" name="button2" value="Button2">
    </form>
    

    Result




    Submit and Reset Button

    <form>
    <input type="text" name="text1" >
    <input type="submit" name="submit" value="Submit">
    <input type="button" name="reset" value="Reset">
    </form>
    

    Result




    Image Button

    <form>
    <input type="image" name="submit" src="demo.jpg">
    </form>
    

    Result


    PreviousNext

    Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email