HTML Forms
In this tutorial, we will learn about forms and its elements and attributes in HTML with the help of examples.
Forms
Form is used to collect user input to send to a server for further processing.
The <form> element is used to create an HTML form.
There are various input elements inside form elements like text fields, textarea, radio buttons, checkboxes, and more.
Syntax :
<form>...Form element...</form>
Form Attributes
Attribute
Description
action
Backend script ready to process user passed data
method
Used to upload data. The two most common methods are GET and post methods.
target
Specifies where to open the link. e.g. in a new tab or window
type
Specifies how the form-data should be encoded when submitted.
Possible values are: multipart/form-data: this is used when you want to upload binary data.
Application/x-www-form-urlencoded: this is a standard method most used forms use in simple scenarios.
Form Elements
| Attribute | Description |
|---|---|
| action | Backend script ready to process user passed data |
| method | Used to upload data. The two most common methods are GET and post methods. |
| target | Specifies where to open the link. e.g. in a new tab or window |
| type | Specifies how the form-data should be encoded when submitted. Possible values are: multipart/form-data: this is used when you want to upload binary data. Application/x-www-form-urlencoded: this is a standard method most used forms use in simple scenarios. |
The <form> element can contain one or more form elements :
- Text input
- Label
- Checkboxes
- Select box
- Radio box
- Submit and Reset button
- <fieldset> and <legend>
- Datalist
1. Text Input
There are 3 ways of text input :
- Single-line text input : This is used for items that require only one line of user input, such as search boxes or names. The text input control are created using <input> tag.
- Password input : it makes the character hide the user's personal information. the password input control are created using <input> tag.
- Multi-line text input : the multi-line input are created using HTML <textarea> tag.
| Attribute | Description |
|---|---|
| type | Indicate the type of input control and for text input |
| name | Used to give a name that is sent to the server to recognize and get the value |
| size | Used to specify the width , in the character of an input field |
| value | Specifies and initial value for an input field |
| placeholder | Specifies a short hint that describes the expected value of an input field |
| max-length | Specifies the maximum number of characters allowed in an input field |
Example :
<!DOCTYPE html>
<html>
<head>
<title>Input Elements</title>
</head>
<body>
<form>
Name : <input type = "text" name = "name"/>
<br>
Age : <input type = "number" name = "age"/>
<br>
Password : <input type = "password" name = "placeholder"/>
<br>
Description : <textarea rows = "5" cols = "30" name = "description" placeholder = "Enter Description"></textarea>
</form>
</body>
</html>Output
2. <label> Elements
The <label> element defines a label for many form elements.
The <label> tag is useful for screen-reader users because the screen-reader will read out loud when the label when the user is focused on the input element.
The for attribute of the <label> element should be equal to the id attribute of the <input> tag to add together.
Example :
<!DOCTYPE html>
<html>
<head>
<title>label Element</title>
</head>
<body>
<form>
<label for = "fname">First Name : </label><br>
<input type = "text" name = "fname" id = "fname"/><br>
<label for = "lname">Last Name : </label><br>
<input type = "text" name = "lname" id = "lname"/><br>
</form>
</body>
</html>Output
3. <textarea> Element
The <textarea> element defines a multi-line input-field.
Attributes used inside <textarea> element.
- Row : It specifies the number of textarea box.
- Cols : It specifies the number of columns of the textarea box.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Textarea Element</title>
</head>
<body>
<form>
Description : <textarea rows = "5" cols = "50" name = "description" placeholder = "Enter Description"></textarea>
</form>
</body>
</html>Output
4. Checkbox Attribute
The checkbox is used to define the checkbox.
It is used inside the <input> elements but the type attribute is set to the checkbox.
A checkbox lets a user select more than one option that is required to be selected.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Attribute</title>
</head>
<body>
<form>
<input type = "checkbox" name = "sport1" value = "cricket" id = "sport1"/><br>
<label for = "sport1">Play Cricket</label><br>
<input type = "checkbox" name = "sport2" value = "football" id = "sport2"/><br>
<label for = "sport2">Play Football</label><br>
</form>
</body>
</html>Output
5. Select box Element
The <Select> Element provides various options in the form of a drop-down list.
It is also known as a drop-down box.
By default, the first item in the drop-down list is selected.
The <option> tag is used to define an option that can be selected. To define a pre-selected option, add the selected attribute to the option.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Select element</title>
</head>
<body>
<form>
<p>Select your favourite sport :</p>
<select name = "dropdown">
<option value = "Cricket" selected>Cricket</option>
<option value = "Football">Football</option>
<option value = "Baseball">Baseball</option>
</select>
</form>
</body>
</html>Output
6. Radio Button
The <input type = "radio"> is used to define a radio button.
Radio buttons are used to select one of the limited options.
It is used inside the <input> elements but the type attribute is set to the radio.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<form>
<input type = "radio" name = "sport" value = "cricket" id = "sport1"/>
<label for = "sport1">Play Cricket</label><br>
<input type = "radio" name = "sport" value = "football" id = "sport2"/>
<label for = "sport2">Play Football</label><br>
<input type = "radio" name = "sport" value = "other" id = "other"/>
<label for = "other">Other</label><br>
</form>
</body>
</html>Output
7. Submit and reset button
The <input type = "submit"> is used to define a button for submitting the form data. The Submit button only works with the help of server for processing input data.
The <input type = "reset"> is used to define a button for reset the form data.
If you change the input value and the click the Reset button, the form-data will be reset to the default value.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Submit and Reset Button</title>
</head>
<body>
<form>
<label for = "fname">First Name :</label>
<input type = "text" name = "fname" id = "fname"/>
<br>
<label for = "lname">Last Name :</label>
<input type = "text" name = "lname" id = "lname"/>
<br>
<input type = "Submit" value = "Submit"/>
<input type = "Reset" value = "Reset"/>
</form>
</body>
</html>Output
8. <fieldset> and <legend> Element
The <fieldset> defines a group related data in a form.
The <legend> element is used to define a caption for the <fieldset> element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Fieldset and legend Element</title>
</head>
<body>
<fieldset>
<legend>Personal info :</legend>
<label for = "fname">First Name :</label>
<input type = "text" name = "fname" id = "fname"/>
<br>
<label for = "lname">Last Name :</label>
<input type = "text" name = "lname" id = "lname"/>
<br>
<input type = "Submit" value = "Submit"/>
<input type = "Reset" value = "Reset"/>
</fieldset>
</body>
</html>Output
8. <datalist> Element
The <datalist> element is used to specify a list of pre-defined options for an <input> tag.
Users can see a drop-down list of options as they input data.
The list attribute of <input> tag must refer to the id attribute of the <datalist> element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Datalist Element</title>
</head>
<body>
<form>
<input list = "Sports" >
<datalist id = "Sports">
<option value = "Cricket">Cricket</option>
<option value = "Football">Football</option>
<option value = "Baseball">Baseball</option>
<option value = "Basketball">Basketball</option>
</datalist>
</form>
</body>
</html>Output
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Forms in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Spell Check.