Home » Learn » HTML Tutorial » HTML5 » HTML Forms

HTML Forms

HTML Forms are used to collect some data from users on a webpage.

Forms contain special control elements like input text box, check boxes, radio-buttons and submit buttons. Using form elements, you can take different type of data from users. This data can be used for different purposes.

Example of HTML Forms:
You must have seen different kind of forms on websites. For example, User Registration form is used to collect user data to store in a database. Simple Contact form allows user send message or contact website owners. HTML works with Server side programming languages (like PHP or ASP) to send this form into the database or in email.

Form Element

HTML <form> tag is used to defines an HTML form. All other form elements are defined inside this tag. Different types of form elements includes: input text elements, check boxes, radio buttons, submit buttons and many more.

Example of Simple Form Element

<form>
<input type="text" />
</form>

Form – Attributes List

AttributesDescriptionSyntax & Example
actiondefines URL of the program or page where action will be performed on form data.action="page2.php"
methodspecify the HTTP method to send form data.method="get"
targetspecify the target window or frametarget="_blank"
enctypespecify the encoding of form data (for media files)enctype="multipart/form-data"

Action Attribute
The action attributes specifies the action to be performed after form submission. Mostly, we pass a page URL into the action.

That action page usually created with some server side programming that can perform some action on form data. Action can be related to inserting form data into database or sending that data into some email. For Example: <form action="page2.php">

Method Attribute
The method attribute tells which HTTP method to use for submitting form data. You can use GET & POST method.

  • The GET method sends for data along with page URL. For Example: <form method="GET">
  • The POST method transfers information via HTTP headers. For Example: <form method="POST">

Target Attribute
The target attribute works in the similar way as in anchor tag. After form submission, action will directed to another page. This action page can be opened in the same window, new window or some frame. Example: <form target="_blank">

  • _blank will open a new page after form is submitted.
  • _self will open action page in the same window.
  • _parent will open action page in the parent frame.

Enctype Attribute
The enctype attribute is used to specify how the browser encodes the form data after submission. Example of Enctype attribute using default values is: <form enctype="application/x-www-form-urlencoded">

When you need to send/upload some media file such as pdf or image, set enctype as a multipart. For example: <form enctype="mutlipart/form-data">

Example of Form with different attributes:

<html>
<head>
</head>
<body>
<form action="page2.php" method="POST" enctype="mutlipart/form-data" target="_blank" > 
<input type="text">
</form>
</body>

Form – Input Elements

Input element is the most commonly used elements in the form. Input elements are defined by <input> tag. There are many input type elements available in the form. Depending upon the type attribute different input elements can be displayed. Some of the examples of input elements are: text, buttons, check-box and radio-button.

Form – Input type element

AttributeDescriptionSyntax & Example
Text Boxused to define text box that allow user to enter some text.input type="text"
Radio Buttondefines radio button that allow users to select any one option or choiceinput type="radio"
Checkboxdefines checkbox that allow users to select multiple option or choicesinput type="checkbox"
Buttondefines normal buttons for users for some actioninput type="button"
Reset Buttondefines button that reset form data when user click on it.input type="submit"
Submit Buttondefines Form submission button that submit form data when user clicks on itinput type="reset"

Form – Input Text Field & Attributes

Input Text field defines a single line input field for users. Example: <input type="text">

Attributes: You can use following attributes with text field:

  • type=”text” defines the text box/field where user can enter some text.
  • name defines a unique name for every form element to get their data after submission.
  • value specify default or initial value in text field. User can change it..
<html>
<head> </head>
<body>
<form>
  User Name: <input type="text" name="username" value="Enter your Name" ><br>
  Mobile:  <input type="text" name="mobile">
</form>
</body>
</html>

Radio Button

Radio Button defines radio button where user can select one option from multiple choices in forms. Example: <input type="radio">

Attributes: You can use following attributes with text field:

  • type="radio" defines the Form’s input element as a radio button
  • name that defines a unique name for every radio button element to get their data after submission.
  • value The value that will be transferred as data after submission if the radio box is selected.
  • checked It will set current checkbox checked by default.
<html>
<head> </head>
<body>
<form>
<input type="radio" name="nationality" value="india"> India
<br/>
<input type="radio" name="nationality" checked value="australia"> Australia
</form>
</body>
</html>

Checkbox Input

Check Boxes are used when you want to allow the selection of more than one options by user. Example: <input type="check">

Attributes: You can use following attributes with check boxes:

  • type="radio" defines the Form’s input element as a radio button
  • name defines a unique name for every radio button element to get their data after submission.
  • value The value that will be transferred as data after submission if the radio box is selected.
  • checked It will set current checkbox checked by default.
<html>
<head>
<title>Form Checkbox Example - TutorialsClass.com</title>
</head>
Select your hobbies:
<body>
<form>
<input type="checkbox" name="hobbies" value="singing"> Singing
<br/>
<input type="checkbox" name="hobbies" value="dancing"> Dancing
<br/>
<input type="checkbox" name="hobbies" value="book-reading" checked> Book Reading
<br/>
</form>
</body>
</html>

Form – Submit & Reset Button

You can create buttons in Form. Depending upon the type of button, it perform some action on form data.

Type of buttons: There are 3 commonly used buttons in Form:

  • Simple button defines the regular button with no action. We can add some specific action later using JavaScript. Example: <input type="button">
  • Submit button defines the submit button. When user click on submit button, it will submit form to transfer data. Example: <input type="submit">
  • Reset button is used to create reset button. When user click on reset button, all form data will reset to default values. Example: <input type="reset">

Attributes

  • value specify the button value.
  • name defines a unique name for every button to identify later.
<form action="page2.html">
  Name:<br>
  <input type="text" name="username" value="Robin"><br>
  <input type="button" value="Button">
  <input type="reset" value="Reset Form">
  <input type="submit" value="Submit">
</form>

Form – Select Menu

Select Element is used to create a drop down list. User can select any item from the list. All list items specified in using option tag.
Select Attributes

  • name defines a unique name for every select menu to identify later get its list data
  • size scrolling list box
  • multiple attribute allows users to select multiple items form the list at the same time.

Option Attributes

  • value specify the value of list item. After submission, this value will be sent if user selected a item.
  • name defines a unique name for every button to identify later.
  • selected attribute in any option set itself as a default selected item in the drop down list.
<html>
<body>
<form>
<select name="dropdown">
<option value="" selected>Select your favorite city</option>
<option value="newdelhi" selected>New Delhi</option>
<option value="newyork">New York</option>
<option value="paris">Paris</option>
</select>
</form>
</body>
</html>

Text between option tag is visible for users such as “New Delhi”. Text specified in value is transferred after form submission.

HTML Forms Element – Complete Example

Here is an example of various HTML Form elements. Most of the HTML Form use more than one HTML form elements.

<html>
<head>
<title>HTML Forms Element Example - TutorialsClass.com </title>
</head>
<body>
<form action="page2.php" method="POST" enctype="mutlipart/form-data" target="_blank" > 
User Name: <input type="text" name="username" value="Enter your Name" >
<br><br/>
Mobile:  <input type="text" name="mobile">
<br/><br/>
Select Your Country:
<input type="radio" name="nationality" value="india"> India
<input type="radio" name="nationality" checked value="australia"> Australia
<br/><br/>
Select Your Hobby:
<input type="checkbox" name="hobbies" value="singing"> Singing
<input type="checkbox" name="hobbies" value="dancing"> Dancing
<input type="checkbox" name="hobbies" value="book-reading" checked> Book Reading
<br/><br/>
Select Your City:
<select name="dropdown">
<option value="" selected>Select your favorite city</option>
<option value="newdelhi" selected>New Delhi</option>
<option value="newyork">New York</option>
<option value="paris">Paris</option>
</select>
<br/><br/><br/>
<input type="button" value="Button">
<input type="reset" value="Reset Form">
<input type="submit" value="Submit">
</form>
</body>
</html>

This HTML program will create a Form with different elements. User can fill information using these form elements. After user submit form, all data can be passed into another page. This form data can be processed by some server side programming language such as PHP, ASP or JSP.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.