HTML Form Elements
An HTML form is a section of a document containing normal content, markup, special elements called controls like checkboxes, radio buttons, menus, etc.), and labels to describe the element. Users can fill the HTML form and submit the form to the server using a button. The <form> tag is used to create an HTML form.
A sample registration form is given above. It contains many types of fields to fill. HTML code to create sample forms like the one above:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Form</title>
<body bgcolor="#EEEEEE" style="text-align:center;">
<h2><u>Registration Form</u></h2>
<form method="post" action="submit.php" enctype="multipart/form-data">
<label>First Name</label>
<input type="text" name="first_name">
<br><br>
<label>Last Name</label>
<input type="text" name="last_name">
<br><br>
<label>e-mail</label>
<input type="text" name="email">
<br><br>
<label>Password</label>
<input type="password" name="pwd">
<br><br>
<label>Date of Birth</label>
<input type="text" name="dob">
<br><br>
<label>Gender</label>
<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female
<br><br>
<label>Mobile</label>
<input type="text" name="mobile">
<br><br>
<label>Address</label>
<textarea name="address"></textarea>
<br><br>
<input type="submit" value="submit"> <input type="reset" value="reset">
</form>
</body>
</html>
Important Form Attributes
| Attribute | Description |
|---|---|
| name | Name of the form. |
| method | GET or POST HTTP method to submit the form. GET method appends the data to the action URL while POST method sends the data as request body. |
| action | Page on the server to which form is to be submitted. |
| enctype | It specifies how the form data should be encoded while submitting. enctype attribute can be used only if the form is submitted with the method "POST". Use enctype="multipart/form-data" if the form submit includes a file. |
Input Element
It allows you to specify various types of user input fields, depending on the type attribute. An input element can be of type text, password, checkbox, radio button, submit button, reset button and file. Many new input types have been introduced in HTML5 like email, number, url, search etc.Let us discuss important input elements.
| Input Type | Description |
|---|---|
| text | Defines a single-line text input field |
| password | Defines a one-line password input field |
| submit | Defines a submit button to submit the form to server |
| reset | Defines a reset button to reset all values in the form |
| radio | Defines a radio button which allows selecting one option |
| checkbox | Defines checkboxes which allow selecting multiple options form |
| button | Defines a simple push button, which can be programmed to perform a task on an event |
| file | Defines to select the file from device storage |
| image | Defines a graphical submit button |
<input type="text">
Text Fields are the most commonly used HTML input element. You need text fields in almost all forms. <input type="text"> defines a single-line text input field.
| Attribute | Description |
|---|---|
| name | Name of the text box. |
| id | Id of the text box, mainly for javascript and CSS. |
| value | Put any default value to the text box. |
| size | It specifies the visible width of the text box, in characters. |
| maxlength | It specifies the maximum number of characters allowed in a text box. |
<input type="password">
The <input> element of type "password" allows a user to enter the password securely in a webpage. The entered text in password field is converted into "*" or ".", so that it cannot be read by another user.
| Attribute | Description |
|---|---|
| name | Name of the password field. |
| id | Id of the password field, mainly for javascript and CSS. |
| value | Put any default value to the password field. |
| size | It specifies the visible width of the password field, in characters. |
| maxlength | It specifies the maximum number of characters allowed in a text box. |
<input type="reset">
The <input> type "reset" is also defined as a button but when the user performs a click event, it by default reset all input values.
| Attribute | Description |
|---|---|
| name | Name of the reset button. |
| value | To show the text to be displayed on the button. |
<input type="radio">
The <input> type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time.
| Attribute | Description |
|---|---|
| name | Name of the radio button. |
| id | Id of radio button, mainly for javascript and CSS. |
| value | It specifies the value that will be sent to the server, if the radio button is checked. |
| checked | Default checked radio button. |
<input type="checkbox">
The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given options.
| Attribute | Description |
|---|---|
| name | Name of the checkbox. |
| id | Id of checkbox, mainly for javascript and CSS. |
| value | It specifies the value that will be sent to the server, if the checkbox is checked. |
| checked | Default checked checkbox. |
<input type="button"> & <input type="submit">
The <input> type "button" defines a simple push button, which can be programmed to control a function on any event such as, click event.
The <input> type "submit" defines a submit button which submits all form values to the server.
| Attribute | Description |
|---|---|
| name | Name of the button. |
| id | Id of the button, mainly for javascript and CSS. |
| value | To show the text to be displayed on the button. |
<input type="file">
The <input> element with type "file" is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.
| Attribute | Description |
|---|---|
| name | Name of the file type. |
| id | Id of the file type, mainly for javascript. |
<input type="hidden">
The <input> element with type “hidden” lets developers include data that cannot be seen or modified by users when a form is submitted which can be used at the server side.
| Attribute | Description |
|---|---|
| name | Name of the hidden box. |
| id | Id of the hidden box, mainly for javascript. |
| value | Put any default value to the hidden box. |
The <label> Element
- The <label> element defines a label for several form elements.
- The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
- The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
- The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
The <select> Element
The <select> element defines a drop-down list:Eg:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Output:
The <option> defines an option 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.
| Attribute | Description |
|---|---|
| name | Name of the select box. |
| id | Id of the select box, mainly for javascript and css. |
| multiple | With this, multiple options can be selected at once. |
| selected | Default option, set as pre-selected when the page loads. |
| value | The value which will be sent to a server. |
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area).
Eg:
<textarea name="message" rows="10" cols="20">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
| Attribute | Description |
|---|---|
| name | Name of the textarea. |
| id | Id of the textarea, mainly for javascript and css. |
| rows | Visible number of lines in a text area. |
The <button> Element
The <button> element defines a clickable button.
Eg: <button>Click Me</button>
Output: