✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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 ❯