Forms

How Can We Help?
< All Topics

Forms

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

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

Example of HTML Forms:

You must have seen different kinds of forms on websites. For example, the User Registration form is used to collect user data to store in a database. The simple Contact form allows users to send messages 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 define an HTML form. All other form elements are defined inside this tag. Different types of form elements include input text elements, checkboxes, radio buttons, submit buttons, and many more.

Example of Simple Form Element

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

Form – Attributes List

Attributes Description Syntax & Example
action defines the URL of the program or page where the action will be performed on form data. action=”page2.php”
method specify the HTTP method to send form data. method=”get”
target specify the target window or frame target=”_blank”
enctype specify the encoding of form data (for media files) enctype=”multipart/form-data”

Action Attribute

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

That action page is usually created with some server-side programming that can perform some action on form data. Action can be related to inserting form data into a 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 the GET & POST method.

  • The GET method sends data along with the 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 a similar way as in the anchor tag. After form submission, action will be directed to another page. This action page can be opened in the same window, a new window, or some frame. Example: <form target="_blank">

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

Enctype Attribute

The enctype attribute is used to specify how the browser encodes the form data after submission. An example of an 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="multipart/form-data">

Example of Form with different attributes:

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

Form – Input Elements

The input element is the most commonly used element 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 examples of input elements are text, buttons, check-box, and radio-button.

Form – Input type element

Attribute Description Syntax & Example
Text Box used to define a text box that allows users to enter some text. input type=”text”
Radio Button defines a radio button that allows users to select any one option or choice input type=”radio”
Checkbox defines a checkbox that allows users to select multiple options or choices input type=”checkbox”
Button defines normal buttons for users for some action input type=”button”
Reset Button defines a button that resets form data when the user clicks on it. input type=”submit”
Submit Button defines a Form submission button that submits form data when the user clicks on it input 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 the following attributes with the text field:

  • type=” text” defines the text box/field where the user can enter some text.
  • the name defines a unique name for every form element to get their data after submission.
  • the value specifies the default or initial value in the text field. Users 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 a radio button where the user can select one option from multiple choices in forms. Example: <input type="radio">

Attributes: You can use the following attributes with the 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 the 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 option by the user. Example: <input type="check">

Attributes: You can use the following attributes with checkboxes:

  • 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 the current checkbox checked by default.
<html>
<head>
<title>Form Checkbox Example - xyz.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 performs some action on form data.

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

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

Attributes

  • value specifies 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. Users can select any item from the list. All list items are specified using the option tag.

Select Attributes

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

Option Attributes

  • the value specifies the value of the list item. After submission, this value will be sent if the user selected an item.
  • the name defines a unique name for every button to identify later.
  • the 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>

HTML Forms Element – Complete Example

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

<html>
<head>
<title>HTML Forms Element Example - xyz.com </title>
</head>
<body>
<form action="page2.php" method="POST" enctype="multipart/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="New Delhi" 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. Users can fill in the information using these form elements. After the user submits a form, all data can be passed to another page. This form of data can be processed by some server-side programming languages such as PHP, ASP, or JSP.

Table of Contents