HTML Forms:
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
The <form> Element:-
Syntax:-
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element:-
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Types of <input> element:
- <input type=”text”>
- <input type=”radio”>
- <input type=”checkbox”>
- <input type=”submit”>
- <input type=”button”>
Text Fields:-
The <input type="text"> defines a single-line input field for text input.
Example:-
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname”>
</form>
The <label> Element:-
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The <label> element also help 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.
Radio Buttons:_
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<form>
<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><br>
<input type=”radio” id=”other” name=”gender” value=”other”>
<label for=”other”>Other</label>
The Submit Button:-
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form’s action attribute.
Example:-
A form with a submit button:
<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
</form>
The Name Attribute for <input>:-
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example:-
This example will not submit the value of the “First name” input field:
<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” value=”John”><br><br>
<input type=”submit” value=”Submit”>
</form>
HTML Form Attributes:-
This chapter describes the different attributes for the HTML <form> element.
The Action Attribute:-
The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.
In the example below, the form data is sent to a file called “action_page.php”. This file contains a server-side script that handles the form data:
Example:-
On submit, send form data to “action_page.php”:
<form action=”/action_page.php”>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
</form>
The Target Attribute:-
The target attribute specifies where to display the response that is received after submitting the form.
The target attribute can have one of the following values:
Example:-
Here, the submitted result will open in a new browser tab:
<form action=”/action_page.php” target=”_blank”>
The Method Attribute:-
The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
The default HTTP method when submitting form data is GET.
Example:-
This example uses the GET method when submitting the form data:
<form action=”/action_page.php” method=”get”>
The Autocomplete Attribute:-
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
Example:-
A form with autocomplete on:
<form action=”/action_page.php” autocomplete=”on”>
HTML Form Elements:
The HTML <form> Elements-
The HTML <form> element can contain one or more of the following form elements:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
The <input> Element:-
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example:-
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”>
The <lable > 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 focus on the input element.
The <label> element also help 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:
Example:-
<label for=”cars”>Choose a car:</label>
<select id=”cars” name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
The <option> element:-
The <option> elements 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:
Example:-
<option value=”fiat” selected>Fiat</option>
The <textarea> Element:-
The <textarea> element defines a multi-line input field (a text area):
Example:-
<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>
The<button> Element:-
The <button> element defines a clickable button:
Example:-
<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>
The <fieldset>Element:-
The <fieldset> element is used to group related data in a form.
Example:-
<form action=”/action_page.php”>
<fieldset>
<legend>Personalia:</legend>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
The <legend> Elements:-
The <legend> element defines a caption for the <fieldset> element.
Example
<form action=”/action_page.php”>
<fieldset>
<legend>Personalia:</legend>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
The <datalist> element:-
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example:-
<form action=”/action_page.php”>
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
</form>
The <output> Element:-
The <output> element represents the result of a calculation (like one performed by a script).
Example:-
<form action=”/action_page.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
<input type=”range” id=”a” name=”a” value=”50″>
100 +
<input type=”number” id=”b” name=”b” value=”50″>
=
<output name=”x” for=”a b”></output>
<br><br>
<input type=”submit”>
</form>
HTML Input Attributes:
The value Attribute:-
The input value attribute specifies an initial value for an input field:
Example:-
Input fields with initial (default) values:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”>
</form>
The readonly Attribute:-
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
Example:-
A read-only input field:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John” readonly><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”>
</form>
The disabled Attribute:-
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example:-
A disabled input field:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” value=”John” disabled><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”>
</form>
The size Attribute:-
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel, url, email, and password.
Example:-
Set a width for an input field:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” size=”50″><br>
<label for=”pin”>PIN:</label><br>
<input type=”text” id=”pin” name=”pin” size=”4″>
</form>
The maxlength Attribute:-
The input maxlength attribute specifies the maximum number of characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.
Example:-
Set a maximum length for an input field:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” size=”50″><br>
<label for=”pin”>PIN:</label><br>
Set a maximum length for an input field:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” size=”50″><br>
<label for=”pin”>PIN:</label><br>
<input type=”text” id=”pin” name=”pin” maxlength=”4″ size=”4″>
</form>
<input type=”text” id=”pin” name=”pin” maxlength=”4″ size=”4″>
</form>
The min and max Attributes:-
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
Example:-
Set a max date, a min date, and a range of legal values:
<form>
<label for=”datemax”>Enter a date before 1980-01-01:</label>
<input type=”date” id=”datemax” name=”datemax” max=”1979-12-31″><br><br>
<label for=”datemin”>Enter a date after 2000-01-01:</label>
<input type=”date” id=”datemin” name=”datemin” min=”2000-01-02″><br><br>
<label for=”quantity”>Quantity (between 1 and 5):</label>
<input type=”number” id=”quantity” name=”quantity” min=”1″ max=”5″>
</form>
The multiple Attribute:-
The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.
The multiple attribute works with the following input types: email, and file.
Example:-
A file upload field that accepts multiple values:
<form>
<label for=”files”>Select files:</label>
<input type=”file” id=”files” name=”files” multiple>
</form>
The pattern Attribute:-
The input pattern attribute specifies a regular expression that the input field’s value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
Example:-
An input field that can contain only three letters (no numbers or special characters):
<form>
<label for=”country_code”>Country code:</label>
<input type=”text” id=”country_code” name=”country_code”
pattern=”[A-Za-z]{3}” title=”Three letter country code”>
</form>
The placeholder Attribute:-
The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
Example:-
An input field with a placeholder text:
<form>
<label for=”phone”>Enter a phone number:</label>
<input type=”tel” id=”phone” name=”phone”
placeholder=”123-45-678″
pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}”>
</form>
The required Attribute:-
The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example:-
A required input field:
<form>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” required>
</form>
The step Attribute:-
The input step attribute specifies the legal number intervals for an input field.
Example: if step=”3″, legal numbers could be -3, 0, 3, 6, etc.
Example:-
An input field with a specified legal number intervals:
<form>
<label for=”points”>Points:</label>
<input type=”number” id=”points” name=”points” step=”3″>
</form>
The autofocus Attribute:-
The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
Example:-
Let the “First name” input field automatically get focus when the page loads:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname” autofocus><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname”>
</form>
The height and width Attributes:-
The input height and width attributes specify the height and width of an <input type="image"> element.
Example:-
Define an image as the submit button, with height and width attributes:
<form>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>
</form>
The list Attribute:-
The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
Example:-
An <input> element with pre-defined values in a <datalist>:
<form>
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
</form>
The autocomplete Attribute:-
The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
Example:-
An HTML form with autocomplete on, and off for one input field:
<form action=”/action_page.php” autocomplete=”on”>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” autocomplete=”off”><br><br>
<input type=”submit” value=”Submit”>
</form>