HTML Forms Tutorial Help
HTML Forms
HTML Form is a document which stores information of a user on a web server using interactive controls.
An HTML form contains different kind of information such as username, password, contact number, email id etc.
Example:
The <form> Element
The HTML <form> element defines a form which is used to collect input from the user.
<form> . form elements . </form>
An HTML form contains form elements.
Form elements consists of different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input
<input type="text"> defines a one-line input field for text input:
Example:
Note:- The default width of a text field is 20 characters.
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons are used to let the used choose ONE from the given number of choices.
Example:
The Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example:
The Action Attribute
The action attribute defines the action which is performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action.php". This page contains a server-side script that handles the form data
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Target Attribute
The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value "_blank".
Example:
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.
Example:
When to Use GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
/action.php?firstname=Mukesh&lastname=Kumar
Notes on GET:
Appends form-data into the URL in name/value pairs.
The length of a URL is limited (about 3000 characters)Never use GET to send sensitive data! (will be visible in the URL).
Useful for form submissions where a user wants to bookmark the result.
GET is better for non-secure data, like query strings in Google.
When to Use POST?
Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address field.
Notes on POST:
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked.
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field.
Example:
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example:
HTML Form Elements
The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc.
Using these elements the information of an user is submitted on a web server.
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:
Note:- If the type attribute is omitted, the input field gets the default type: "text".
The <select> Element
The <select> element defines a drop-down list.
Example:
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:
Visible Values
Use the size attribute to specify the number of visible values.
Example:
Allow Multiple Selections
Use the multiple attribute to allow the user to select more than one value.
Example:
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example:
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
The size of the text area can be defined by using CSS.
Example:
The <button> Element
The <button> element defines a clickable button.
Example:
Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.
HTML5 Form Elements
HTML5 added the following form elements:
<datalist>
<output>
Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will not "destroy" the web page.
HTML5 <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:
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
Example:
HTML Input Types
It describes the different input types for the <input> element.
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Input Type Text
<input type="text"> defines a one-line text input field.
Example:
Input Type Password
<input type="password"> defines a password field.
Example:
Note:- The characters in a password field are masked (shown as asterisks or circles).
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example:
Note:- Submit button will get a default value if the value is not given.
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
Example:
If the input values are changed and then the "Reset" button is clicked, the form-data will be reset to the default values.
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices.
Example:
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
Input Type Button
<input type="button"> defines a button.
Example:
HTML5 Input Types
HTML5 added several new input types:
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
Note:- New input types that are not supported by older web browsers, will behave as <input type="text">.
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example:
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example:
Note:- The min and max attributes is used to add restrictions to dates:
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
Example:
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
Example:
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5.
Example:
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).
Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes.
Example
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example:
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example:
HTML Input Attributes
The HTML <input> attribute is used within a form to declare an input element − a control that allows the user to input data.
The value Attribute
The value attribute is used to specifies the initial value for for an input field.
Example:
The readonly Attribute
The readonly attribute specifies that the input field is read only (cannot be changed).
Example:
The disabled Attribute
The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form.
Example:
The size Attribute
The size attribute specifies the size (in characters) for the input field.