HTML – Forms
Html Forms are an essential part of Web Documents. Forms are used to take information from the client/user and send that information to the server. Forms have the basic input elements which are used to collect data and interact with the server for information manipulation.
Example –
A user is interacting with a signup form of a website for making a User account, after submitting the form, the server will collect the data from the user side and redirect to a new page in response. The new page will match the information with the server database to log in with the system and if the credentials match with stored data then the user will able to access his/her account.
Example of a Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Forms</h1>
<hr>
<form action="submit_page.php" method="post">
<input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Elements
The form is a paired tag and it is used to create a web form with the help of form elements. The Form elements are the basic form blocks that are used to take different types of inputs from the users and they also make the form interactive.
Here is the list of most common and used form elements:
- Input tag
- textarea
- legend
- select
- option
- fieldset
- button
- data list
- output
- label
- optgroup
Form Input
The form input tag is used to take input from the user. It is one of the most used elements in web forms.
The input type depends on the input attribute values like search, text, submit, email, radio, etc.
Below is an example of serval input types.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Forms - Input Types</h1>
<hr>
<!--Input type text Example-->
<label for="User">Input Type Text</label>
<br>
<input type="text" name="user" id="user">
<hr>
</body>
</html>
Input Tag
The input tag has many input types for different data input.
Here is the Table of input types:
Input Type = “Value”
| Type Value | Description |
|---|---|
| text | it used for taking a single line text as input from user |
| it used for taking a email address as input from user | |
| password | it used for taking a password as input from user |
| search | it used for making a search field as input in the form |
| submit | it used for submitting the form data from user side |
| reset | it use to reset the form data/form value and display the default value in the fields |
| button | it use to make a button in the form |
| checkbox | it use to a list with checkbox options where user can select all, multiple or none from all available options |
| color | it will display the color picker in the form |
| date | it will display the a calendar in the form with mm/dd/yyyy as date format |
| time | it will display a time picking interface in the form with hour, minutes and Meridian options (am/pm) |
| datetime-local | it will display the date and time together to choose but without any specific time zone |
| file | it is use for uploading a file with the form and the file/data will be uploaded from the client/user device |
| hidden | it will hide the input section in the form, basically it will not display not in the form |
| image | it works same as the file for uploading any image or other files with the form and the file/data will be uploaded from the client/user device |
| month | it will a calendar that take month and year as input |
| number | it will take only digits/numbers as input |
| range | it will make a graphical range meter in the form which will enter a value like number in the field and the number will change according to the range meter |
| tel | it is use for taking a telephone number as input from user |
| url | it is use for taking an url address as input from user |
| week | it is use to take week and year as input from thee user |
| radio | it will make a radio button in the form |
Input Tag Types Example
Below is an example of the Html form input tag types.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Forms - Input Types</h1>
<hr>
<!--Input type text-->
<label for="User">Input Type Text</label>
<br>
<input type="text" name="user" id="user">
<hr>
<!--Input type Email-->
<label for="Email">Input Type Email</label>
<br>
<input type="email" name="email" id="email">
<hr>
<!--Input type password-->
<label for="Password">Input Type Password</label>
<br>
<input type="password" name="password" id="password">
<hr>
<!--Input type search-->
<label for="Search">Input Type Search</label>
<br>
<input type="search" name="search" id="search">
<hr>
<!--Input type submit-->
<label for="Submit">Input Type Submit</label>
<br>
<input type="submit" name="submit" id="submit">
<hr>
<!--Input type Button-->
<label for="Button">Input Type Button</label>
<br>
<input type="button" name="button" id="button">
<hr>
<!--Input type checkbox-->
<label for="checkbox">Input Type checkbox</label>
<br>
<input type="checkbox" name="checkbox" id="checkbox">
<hr>
<!--Input type color-->
<label for="color">Input Type color</label>
<br>
<input type="color" name="color" id="color">
<hr>
<!--Input type date-->
<label for="date">Input Type date</label>
<br>
<input type="date" name="date" id="date">
<hr>
<!--Input type datetime-local-->
<label for="datetime-local">Input Type datetime-local</label>
<br>
<input type="datetime-local" name="datetime-local" id="datetime-local">
<hr>
<!--Input type file-->
<label for="file">Input Type file</label>
<br>
<input type="file" name="file" id="file">
<hr>
<!--Input type hidden-->
<label for="hidden">Input Type hidden</label>
<br>
<input type="hidden" name="hidden" id="hidden">
<hr>
<!--Input type image-->
<label for="image">Input Type image</label>
<br>
<input type="image" name="image" id="image">
<hr>
<!--Input type month-->
<label for="month">Input Type month</label>
<br>
<input type="month" name="month" id="month">
<hr>
<!--Input type number-->
<label for="number">Input Type number</label>
<br>
<input type="number" name="number" id="number">
<hr>
<!--Input type range-->
<label for="range">Input Type range</label>
<br>
<input type="range" name="range" id="range">
<hr>
<!--Input type reset-->
<label for="reset">Input Type reset</label>
<br>
<input type="reset" name="reset" id="reset">
<hr>
<!--Input type tel-->
<label for="tel">Input Type tel</label>
<br>
<input type="tel" name="tel" id="tel">
<hr>
<!--Input type time-->
<label for="time">Input Type time</label>
<br>
<input type="time" name="time" id="time">
<hr>
<!--Input type url-->
<label for="url">Input Type url</label>
<br>
<input type="url" name="url" id="url">
<hr>
<!--Input type week-->
<label for="week">Input Type week</label>
<br>
<input type="week" name="week" id="week">
<hr>
</body>
</html>
Input Tag Attributes
The attributes of any tag provide additional functionality to that tag. The input tag has more than one attribute according to its input type.
Here is the table of attributes used in the input tag.
| Input Attributes | Descriptions |
|---|---|
| Checked | It is use with checkbox input type and radio button input type. It will make the field pre-selected when the form load. |
| Disabled | It is use to make any specific input disabled in the form. |
| Max | It is use for setting up a max rang or value for an input field. |
| Maxlength | It is use for setting up that how many characters will input in a input field. |
| Min | It is use for setting up the minimum value/range for an input field. |
| Pattern | It is use for the regular expression that will check the input field value against the pattern value. |
| Readonly | It is use for setting up the input field as read only text. |
| Required | It is use to set the input field an important or required to be filled. It will display an error as the input field is empty. |
| Size | It is use to set the width of an input field in characters. |
| Step | It is use to specify the legal number intervals for an input field in the form. |
| Value | It is use to set the pre-define/default value for an input field in the form. |
Form Textarea
The form textarea is used for providing a large text space in a web form. The textarea works as normal text input and it will be resized with the input text amount.
Below is an example of Form Textarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Forms - Textarea</h1>
<hr>
<!--Form Textarea Example-->
<label for="Msg">Send Msg</label>
<br>
<textarea name="msg" id="msg" cols="30" rows="10"></textarea>
<hr>
</body>
</html>
Here the textarea is used with cols and rows which define its width and height in a form. You can leave the textarea tags empty or if you will write something in between the textarea tags it will display inside the textarea box in the form.
Form Legend
The legend is used for defining a heading text/caption for the fieldset used in the form.
Below is an example of Form Legend.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Forms - Legend</h1>
<hr>
<!--Form Legend Example-->
<label for="legend">Form Legend</label>
<br>
<legend>This is a Legend</legend>
<hr>
</body>
</html>
Form Select & Option
The form select and option tags are used for making a selectable list with options to select for example:
A form with address details ask the user to select his/her country out of many countries in the list, here we can use select & option tag for making the country list.
Below is an example of Form Select & Option Tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Select & Option Tags</h1>
<hr>
<!-- Form Select & Option Tags Example-->
<label>Select Country : </label>
<select name="Country" id="Country">
<option value="Afgan">Afganishtan</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Russia">Russia</option>
</select>
<hr>
</body>
</html>
Here the select tag will make the option tag selectable and the option tags contain the data/value to be selected. The value attribute of the option tag contains the value which will be sent with the form or to form target.
Form Fieldset
The form fieldset is used to create a block of the same elements or a group which will make the form more clear and simple.
It is used with a legend tag and it will make a border around the grouped elements of the fieldset tag.
Below is an example of the Form Fieldset tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Fieldset Tag</h1>
<hr>
<!-- Form Fieldset Tag Example-->
<form action="#" method="post">
<fieldset>
<legend>Personal Details : </legend>
<label for="fname">First Name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<label for="mname">Middle Name:</label>
<br>
<input type="text" id="mname" name="mname">
<br>
<label for="lname">Last Name:</label>
<br>
<input type="text" id="lname" name="lname">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
<hr>
</body>
</html>
Form Button
The form button is used to make clickable action buttons.
Below is an example of Form Button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Fieldset Tag</h1>
<hr>
<!-- Form Button Tag Example-->
<button type="button" onclick="alert('Hello EveryOne Happy Learning with MMI - Tutorials on MMI Educational Hub!')">Say Something! Click On Me</button>
<br>
<br>
<!-- Form Input tag with Button Type Example-->
<input type="button" value="You Can Click On but nothing will happen">
<hr>
</body>
</html>
Form Data List
Data list is a paired tag and it is similar to select and option tags. It used to define a pre-defined dropdown selection list. It is used with input tag.
Below is an example of Form Data List.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Data List Tag</h1>
<hr>
<!-- Form Data List Tag Example-->
<label for="Country">Select Country :- </label>
<input list="country" name="country" id="country">
<datalist id="country">
<option value="America">
<option value="India">
<option value="China">
</datalist>
<hr>
</body>
</html> Here the id attribute of datalist tag must be equal to the list attribute of the input tag in this case ” id = country and list = country “.
Form Output
The form output tag is used for showing the result in output.
Like any method, calculation, function, etc.
Below is an example of Form Output Tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Output Tag</h1>
<br>
<h3>Multiply Any 2 Numbers</h3>
<hr>
<!-- Form Output Tag Example-->
<form oninput="result.value=parseInt(var1.value) * parseInt(var2.value)">
<input type="number" id="var1" value="10" placeholder="enter any number 1">
X
<input type="number" id="var2" value="10" placeholder="enter number 2">
=
<output name="result" for="var1 var2"></output>
</form>
<hr>
</body>
</html>
Form Label
The label tag is used for labeling the inputs and naming the form parts.
Like for any name input, the label will be named as “Name”, similarly for other tags.
Below is an example of Form Label.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Label Tag</h1>
<hr>
<!-- Form Label Tag Example-->
<form>
<label for="name"> Name : </label>
<br>
<input type="text" value="name" id="name">
<br>
<br>
<label for="email"> Email : </label>
<br>
<input type="email" value="email" id="email">
<br>
<br>
<input type="submit" value="submit" name="submit">
</form>
<hr>
</body>
</html>
Form OptGroup
The form optgroup is used to group the elements like options in a list or different groups in a single element.
It is a paired tag and it can make a group of different options in a selection list.
Below is an example of Form OptGroup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorial</title>
</head>
<body>
<h1>HTML - Form - Optgroup Tag</h1>
<hr>
<!-- Form Optgroup Tag Example-->
<form>
<label for="cars">Select any color from these color combinations :</label>
<select name="combination" id="colors">
<optgroup label="Red">
<option value="pink">Pink</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Blue">
<option value="Indigo">Indigo</option>
<option value="Sky Blue">Sky Blue</option>
</optgroup>
<optgroup label="Green">
<option value="Lemon Green">Lemon Green</option>
<option value="Light Green">Light Green</option>
</optgroup>
</select>
</form>
<hr>
</body>
</html>
Here is all about form elements and their examples.
Some Important Topics:
- How to send form data to the server by using a PHP script.
- How to retrieve that data from the server by using a PHP script.
- How to store form data into the database by using MySql Queries and Commands.
- How to retrieve data from the database by using MySql Queries and Commands.
More Tutorials
CSS Tutorials
JavaScript Tutorials
Bootstrap Tutorials
PHP Tutorials
MySql Tutorials