HTML Form and its Elements
Forms and Iframes
In this lesson, we will learn about HTML form and the different types of elements or controls that are used in a form.
Introduction to HTML Forms
HTML forms are used to collect user input, such as text, numbers, and other data. Forms allow users to enter data and send it to a web server for processing. The data can be used to update a database, send an email, or perform other actions.
HTML forms are created using the <form> element, which contains various form elements like input fields, checkboxes, radio buttons, and more.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Form Example</title>
</head>
<body>
<form>
<!-- all other form elements will go here -->
</form>
</body>
</html>Note: The form element itself is not visible on the web page only other elements like text field, radio button, etc. that are created inside the form element are visible on the web page.
Important Attributes of HTML Form
The name Attribute
The name attribute specifies a unique name for the form control. This name can be used to identify the control in the server-side code that processes the form data.
Example
<form name="registration">
</form>The method Attribute
The method attribute specifies the HTTP method that should be used when submitting the form data. The most commonly used methods are GET and POST. The default HTTP method is GET.
Example
<form name="registration" method="POST">
</form>The action Attribute
The action attribute specifies the URL where the form data will be sent for processing. If the action attribute is not set then the default value of the action is set to the current page.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
</form>The enctype Attribute
The enctype attribute specifies how the form data should be encoded before sending it to the server, usually the value is set to "application/x-www-form-urlencoded" or "multipart/form-data".
The "application/x-www-form-urlencoded" is a type of encoding used for sending data over the internet, particularly in HTML forms. It is a format where the data is encoded as key-value pairs separated by an equals sign (=), and each pair is separated by an ampersand (&). This type of encoding is used by default in HTML form submissions, and is also commonly used in APIs and HTTP requests.
The "multipart/form-data" is another type of encoding used for sending data over the internet, particularly in HTML forms. It is used when the form contains binary data, such as image or audio files, that cannot be represented using the "application/x-www-form-urlencoded" format. This type of encoding is also commonly used in APIs and HTTP requests for sending binary data, such as file uploads.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php" enctype="multipart/form-data">
</form>
Form Input Types
HTML provides several input types that can be used in forms. Below is the list of input types that we can used in a form element.
- <text>
- <password>
- <checkbox>
- <radio>
- <file>
- <hidden>
- <date>
- <time>
- <month>
- <number>
- <range>
- <color>
- <email>
- <tel>
- <url>
- <image>
- <submit>
- <reset>
Before discussing the above input types, let us see the list of common input tag attributes.
| Attribute | Description |
| name | The name attribute is used to give a name to the form field. This name is used to identify the field when the form is submitted to the server. |
| value | The value attribute is used to set the initial value of the form field. This is useful when creating fields like radio buttons and checkboxes that have a pre-selected value. |
| placeholder | The placeholder attribute is used to provide a hint to the user about the expected input. This is displayed as a grayed-out text inside the input field. |
| required | The required attribute is used to mark a field as mandatory. If a user tries to submit the form without filling in a required field, an error message will be displayed. |
| disabled | The disabled attribute is used to disable a form field. This means that the field cannot be edited or selected by the user. |
| readonly | The readonly attribute is used to make a form field read-only. This means that the user can see the value but cannot edit it. |
| size | The size attribute is used to set the width of the input field in characters. This is used for text and password fields. |
| maxlength | The maxlength attribute is used to set the maximum number of characters that can be entered in a text or password field. |
| min and max | The min and max attributes are used to define the minimum and maximum values that can be entered in a numeric field. |
| autocomplete | The autocomplete attribute is used to enable or disable autocomplete suggestion for form input fields. The value of autocomplete is on or off. |
| pattern | The pattern attribute is used to specify a regular expression pattern that the input value must match. This is useful for validating fields like email addresses or phone numbers. |
| multiple | The multiple attribute is used to create a multiple file upload field. This allows users to select and upload multiple files at once. |
Let's discuss the input types one by one with examples.
Text Input
Text input fields are used for collecting short text strings from the user. Here is an example of text input field with different attributes:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter Username" size="30" maxlength="25" autocomplete="off" required><br><br>
<label for="idno">ID No:</label>
<input type="text" id="idno" name="idno" value="DF1259G2" readonly><br><br>
<label for="serialno">Username:</label>
<input type="text" id="serialno" name="serialno" value="6581248" disabled>
</form>In HTML form, a label is an element that helps to describe the purpose of an input element. It provides a textual description for the corresponding input element such as text field, radio button, checkbox, and more.
A label is linked to the input element using the "for" attribute, which has the same value as the "id" attribute of the input element. When a user clicks on the label, it focuses the input element and helps improve the accessibility of the form.
Password Input
Password input fields are used for collecting passwords from the user. The input is masked with asterisks or dots to hide the characters. Here is an example of password input field with different attributes:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" placeholder="Enter Password" size="50" maxlength="50">
</form>Radio Buttons
Radio buttons are used when the user needs to select one option from a list of options. Here is an example of radio buttons:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</form>Note: The value of the name attribute of each radio buttons must be same in order to allow the user to select any one of them but their values will differ from each other.
Checkboxes
Checkboxes are used when the user needs to select one or more options from a list of options. Here is an example of checkboxes:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="hobby">Hobby:</label><br>
<input type="checkbox" id="reading" name="hobby1" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="gaming" name="hobby2" value="gaming">
<label for="gaming">Gaming</label><br>
<input type="checkbox" id="music" name="hobby3" value="music">
<label for="music">Music</label>
</form>File Input
The file input field in HTML is a type of form element that allows users to select and upload files from their local computer. To upload multiple file at once use the multiple attribute with the file input field. Here's an example of how to create a file input field in an HTML form:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php" enctype="multipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file"><br>
<label for="files">Choose multiple files:</label>
<input type="file" id="files" name="files" multiple>
</form>
To select multiple files from the open file dialog box hold down the ctrl key (or Command key on a Mac) from keyboard and then click on the files you want to select.
In the above example, we have a form that allows users to upload a file to a server. The enctype attribute of the form is set to "multipart/form-data", which is necessary for uploading files.
Hidden Input
In HTML, a hidden input field is a form element that allows you to store data in the form without displaying it to the user. The data can be submitted along with other form data when the user submits the form.
You can use hidden input field to store data that you don't want the user to see or edit in the form. Here's an example of how to create a hidden input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<input type="hidden" name="user_id" value="12345">
</form>
In the above output, you can see that the hidden input field is not visible on the screen.
Date Input
The date input field is used to create a date picker that allows the user to select a date from a calendar. The date picker is displayed in a way that's consistent across different devices and browsers, making it a convenient way to gather dates from users. Here's an example of how to create a date input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
</form>
Time Input
The time input field is used to create a time picker that allows the user to select a time from a dropdown menu or type it in manually. The time picker is displayed in a way that's consistent across different devices and browsers, making it a convenient way to gather times from users. Here's an example of how to create a time input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="meeting-time">Choose a meeting time:</label>
<input type="time" id="meeting-time" name="meeting_time">
</form>
Month Input
The month input field is used to create a month picker that allows the user to select a month and year from a dropdown menu. The month picker is displayed in a way that's consistent across different devices and browsers, making it a convenient way to gather month and year information from users. Here's an example of how to create a month input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="start-month">Start Month:</label>
<input type="month" id="start-month" name="start_month">
</form>
Number Input
The number input field is used to create a text box that allows the user to enter a numerical value. The input field can be configured to limit the range of values that the user can enter, and it can display up and down arrows that allow the user to increment or decrement the value. Here's an example of how to create a number input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" value="1">
</form>The min and max attributes are used to set the minimum and maximum values that the user can enter. In this example, the user can only enter a value between 1 and 100.
The step attribute is used to set the increment or decrement value when the user uses the up and down arrows to adjust the value. In the above example, the value will be incremented or decremented by 1.
The value attribute is used to set the default value of the input field. In this example, the default value is 1.
Range Input
The range input field is used to create a slider that allows the user to select a value from a range of values. The range input field is similar to the number input field, but it provides a more intuitive interface for selecting a value within a range. Here's an example of how to create a range input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="slider">Select a value:</label>
<input type="range" id="slider" name="slider" min="0" max="100" step="1" value="50">
</form>Color Input
The color input field is used to allow the user to select a color from a color picker dialog. This input type is useful when you want to allow the user to select a color, such as when customizing the appearance of an interface or when creating a graphic design application. Here's an example of how to create a color input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="color-picker">Choose a color:</label>
<input type="color" id="color-picker" name="color-picker" value="#ff0000">
</form>Email Input
The email input field is used to allow the user to enter an email address. This input type is useful when you want to validate that the user has entered a valid email address before submitting a form. Here's an example of how to create a email input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="email-address">Email address:</label>
<input type="email" id="email-address" name="email-address" required>
</form>
When the user submits the form, the browser will validate that the value entered in the email input field is a valid email address. If the value is not a valid email address, the browser will display an error message and prevent the form from being submitted.
Tel Input
The tel input field is used to allow the user to enter a telephone number. This input type is useful when you want to validate that the user has entered a valid telephone number as per the pattern provided before submitting a form. Here's an example of how to create a tel input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" pattern="[0-9]{5}-[0-9]{5}">
<p>Telephone Number Format : 12345-67890</p>
</form>In the above example, we have set the valid telephone number format using the regular expression that states that the user must enter 5 numbers between 0 to 9 with a - sign and again 5 numbers between 0 to 9.
URL Input
The url input field is used to allow the user to enter a URL. This input type is useful when you want to validate that the user has entered a valid URL before submitting a form. Here's an example of how to create a url input field in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="website-url">Website URL:</label>
<input type="url" id="website-url" name="website_url">
</form>
When the user submits the form, the browser will validate that the value entered in the url input field is a valid URL. The exact validation rules vary depending on the browser, but typically the browser will require that the value is a properly formatted URL that starts with http:// or https://.
Submit Button
In HTML, a submit button is a type of form button that is used to submit the form data to the server for processing. When the user clicks on the submit button, the form data is sent to the server, where it can be processed by a server-side script or application. Here's an example of how to create a submit button:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" pattern="[0-9]{5}-[0-9]{5}" required>
<p>Telephone Number Format : 12345-67890</p>
<input type="submit" name="submit" value="Submit">
</form>When the user clicks on the submit button, the form data is sent to the server for processing. You can use server-side scripting languages like PHP, Python, or Ruby to process the form data and perform actions like sending an email, storing the data in a database, or displaying a confirmation message to the user.
Image Button
In HTML, an image button is a type of form button that displays an image instead of text. When the user clicks on the image, the form is submitted to the server, just like a regular form button. Here's an example of how to create an image button in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="image" src="https://www.dremendo.com/html-tutorial/images/submit-button.jpg" alt="submit button" name="Submit">
</form>
Reset Button
In HTML, a reset button is a type of form button that allows the user to reset the form fields to their default values. When the user clicks on the reset button, all the form fields are cleared and reset to their initial values. Here's an example of how to create a reset button in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>When the user clicks on the reset button, all the form fields are cleared and reset to their default values. This can be useful if the user wants to start over and enter new information in the form.
Select Lists
In HTML, a select list is a form element that allows the user to choose one or more options from a drop down list of predefined options. Here's an example of how to create a select list in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="color">Favorite color:</label>
<select id="color" name="color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
</select>
</form>Select lists can also be configured to allow the user to select multiple options. This is done by adding the multiple attribute to the select element, like this:
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="color">Favorite color:</label>
<select id="color" name="color" multiple>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
</select>
</form>When the multiple attribute is present, the user can select multiple options by holding down the Ctrl key (or Command key on a Mac) while clicking on the options they want to select.
You can set the selected attribute to the option that you want to be selected as default. You can also set the size attribute to the select element to specify the total number of options to be displayed at a time on the screen. See the example given below.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="color">Favorite color:</label>
<select id="color" name="color" multiple size=8>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Yellow" selected>Yellow</option>
<option value="Orange">Orange</option>
<option value="Pink">Pink</option>
<option value="Cyan">Cyan</option>
<option value="Violet">Violet</option>
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
<option value="Aqua">Aqua</option>
<option value="Orchid">Orchid</option>
</select>
</form>Text Area
In HTML, a text area is a form element that allows the user to enter multiple lines of text. Text areas are often used in HTML forms when the user needs to provide a longer response, such as a comment or a message. Here's an example of how to create a text area in an HTML form.
Example
<form name="registration" method="POST" action="https://www.example.com/save.php">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="8" cols="50" placeholder="Enter your message here" maxlength="250"></textarea>
</form>The rows and cols attributes are used to specify the number of rows and columns of the text area, respectively.
