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.
Example:
The maxlength Attribute
The maxlength attribute specifies the maximum allowed length for the input field.
With a maxlength attribute, the input field will not accept more than the allowed number of characters.
The maxlength attribute does not provide any feedback. If an alert is required the user, must write JavaScript code.
Note:- Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must be checked by the receiver (the server) as well!
HTML5 Attributes
HTML5 added the following attributes for <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
and the following attributes for <form>:
autocomplete
novalidate
The autocomplete Attribute
The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.
Note:- It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
The autocomplete attribute works with <form> and with the following <input> types: text, search, url, tel, email, password, datepickers, range and color.
Example:
An HTML form with autocomplete off (and on for one input field):
The novalidate Attribute
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when submitted.
The autofocus Attribute
The autofocus attribute specifies that the input field should automatically get focus when the page loads.
The form Attribute
The form attribute specifies one or more forms an <input> element belongs to.
Example:
An input field located outside the HTML form (but still a part of the form):
The formaction Attribute
The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.
The formaction attribute overrides the action attribute of the <form> element.
The formaction attribute is used with type="submit" and type="image".
Example:
An HTML form with two submit buttons, with different actions:
The formenctype Attribute
The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").
The formenctype attribute overrides the enctype attribute of the <form> element.
The formenctype attribute is used with type="submit" and type="image".
The formmethod Attribute
The formmethod attribute defines the HTTP method for sending form-data to the action URL.
The formmethod attribute overrides the method attribute of the <form> element.
The formmethod attribute can be used with type="submit" and type="image".
Example:
The second submit button overrides the HTTP method of the form:
The formnovalidate Attribute
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute can be used with type="submit".
Example:
A form with two submit buttons (with and without validation).
The formtarget Attribute
The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
Example:
A form with two submit buttons, with different target windows:
The height and width Attributes
The height and width attributes specify the height and width of an <input type="image"> element.
Always specify the size of images. If the browser does not know the size, the page will flicker while images load.
The list Attribute
The 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>:
The min and max Attributes
The min and max attributes specify the minimum and maximum values for an <input> element.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
The multiple Attribute
The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.
The multiple attribute works with the following input types: email, and file.
The pattern Attribute
The pattern attribute specifies a regular expression that the <input> element's value is checked against.
The pattern attribute works with the following input types: text, search, url, tel, email, and password.
The placeholder Attribute
The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).
The 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:
The required Attribute
The 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 input field is required:
If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion you can send mail at contact@codersarts.com.
Please write your suggestion in comment section below if you find anything incorrect in this blog post
Kommentare