Home »
HTML »
HTML Forms
HTML Forms
An HTML form is a section of a document which contains different fields like textfields, password fields,
checkboxes, radio buttons, submit button, menus etc.HTML Forms can be used where we want to collect some data from the site visitor. For example, in case of user registration you would like to collect information such as name, email address, Phone number, etc.
A form will take input and then store it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data like storing it in database.
There are various form elements available like
text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.HTML Form Structure
The HTML <form> tag defines a form that is used to collect user input.
All the form elements should be written inside <form> and </form> tags.
Syntax:
<form>
. . . .
Form Elements..
. . . .
</form>
HTML Forms Elements
Attributes
Description
<form>It defines an HTML form to enter inputs by the used side.
<input>It defines an input control.
<select>It defines a multi-line input control.
<option>It defines an option in a drop-down list.
<textarea>It defines a drop-down list.
<button>It defines a label for an input element.
<fieldset>It groups the related element in a form.
<legend>It defines a caption for a <fieldset> element.
<optgroup>It defines a group of related options in a drop-down list.
<label>It defines a label for a field.
HTML Forms Element
The 'Input' Element
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Output
HTML Form Input Attribute Examples
Note : The default width of a text input field is 20 characters.
The 'Select' Element
The <select> element defines a drop-down list. It mostly used when you have to show numbers of items.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>
Output
HTML Form Select Attribute Examples
Note : The action attribute defines the action to be performed when the form is submitted.
You should add the destination where the form is submitted.
- The
<option> element defines different options that can be selected.
- By default, the first item in the drop-down list is selected.
- To define a pre-selected option, add the selected attribute to the option:
<option value="abc" selected>.
The 'Textarea' Element
The <textarea> element defines a multi-line input field.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
<br>
<input type="submit">
</form>
</body>
</html>
Output
HTML Form Textarea Attribute Examples
The 'Button' Element
The <button> element defines a clickable button.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type="button" onclick="alert('Hello World..!')">Click Me!</button>
</body>
</html>
Output
HTML Form Button Attribute Examples
The 'Method' Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.
The GET is the default method when you submitting your form data.
Syntax
<form action="action-page.php" method="get">
<form action="action-page.php" method="post">
Difference between GET and POST
Points
GET METHOD
POST METHOD
Data Pass
Limited amount of data can be sent because data is sent in header.
Large amount of data can be sent because data is sent in body.
Security
Get request is not secured because data is data sent is part of the URL, and this data saved in browser history and server logs in plaintext.
Post request is secured because data is not exposed in URL bar and parameters are not stored in browser history or in web server logs.
Bookmarked
Request can be bookmarked and cached.
Request can not be bookmarked and cached.
Usability
GET method should not be suitable when you are sending sensitive data like user id or Passwords.
POST is good for when you are sending sensitive data because your data are sended in encrypted form.
Data Length
Data length restricted, usually to 2048 characters.
No restrictions on the amount of data that can be sent.
Hacked
Easier to hack.
More difficult to hack.
The 'Name' Attribute
The name attribute specifies the name of <input> element.
It is a good practice to use this attribute, and also good for SEO purpose.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
HTML Form Name Attribute Examples
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form and the <legend>
element defines a caption for the <fieldset> element.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Output
HTML Form Fieldset and Legend Attributes Examples
Browser Support
Element 
Edge 
Chrome 
Firefox 
Opera 
Safari
<form>Yes Yes Yes Yes Yes
Recommended :
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »
<form>
. . . .
Form Elements..
. . . .
</form>
. . . .
Form Elements..
. . . .
</form>
| Attributes | Description |
|---|---|
<form> |
It defines an HTML form to enter inputs by the used side. |
<input> |
It defines an input control. |
<select> |
It defines a multi-line input control. |
<option> |
It defines an option in a drop-down list. |
<textarea> |
It defines a drop-down list. |
<button> |
It defines a label for an input element. |
<fieldset> |
It groups the related element in a form. |
<legend> |
It defines a caption for a <fieldset> element. |
<optgroup> |
It defines a group of related options in a drop-down list. |
<label> |
It defines a label for a field. |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>
<option> element defines different options that can be selected.<option value="abc" selected>.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
<br>
<input type="submit">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
<br>
<input type="submit">
</form>
</body>
</html>
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type="button" onclick="alert('Hello World..!')">Click Me!</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type="button" onclick="alert('Hello World..!')">Click Me!</button>
</body>
</html>
Syntax
<form action="action-page.php" method="get">
<form action="action-page.php" method="post">
<form action="action-page.php" method="post">
| Points | GET METHOD | POST METHOD |
|---|---|---|
| Data Pass | Limited amount of data can be sent because data is sent in header. | Large amount of data can be sent because data is sent in body. |
| Security | Get request is not secured because data is data sent is part of the URL, and this data saved in browser history and server logs in plaintext. | Post request is secured because data is not exposed in URL bar and parameters are not stored in browser history or in web server logs. |
| Bookmarked | Request can be bookmarked and cached. | Request can not be bookmarked and cached. |
| Usability | GET method should not be suitable when you are sending sensitive data like user id or Passwords. | POST is good for when you are sending sensitive data because your data are sended in encrypted form. |
| Data Length | Data length restricted, usually to 2048 characters. | No restrictions on the amount of data that can be sent. |
| Hacked | Easier to hack. | More difficult to hack. |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
| Edge |
Chrome |
Firefox |
Opera |
Safari |
|
|---|---|---|---|---|---|
<form> |
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »