Skip to content
The sign in page of any web app uses a form to request a username and password.A search box is a form with a single text input.A chat app uses a form to provide a place for a message to be typed and sent.Social media platforms provide a text entry form for compiling your posts before they are sent, some going so far as supporting rich inline multimedia
HTML form elements are designed to be compatible with assistive software. A form’s input elements should be encapsulated withing a parent <form> element.Using a form element groups the inputs together and allows them to be sent to the server all at the same time.Which three inputs make use of a valid HTML5 form input type?<input type="search"><input type="email"><input type="date">
All form inputs and input groups need to have their name attribute specified. The name attribute is used as the key for each value when the form is submitted , so the name for each input must be unique and descriptive. Used when sending the form data.
Labels are added to a form using the <label> HTML element.id value are used to associate a label with an input.name and id of an input may be the same, but both are required to be specified.
Most common way to do this is to add a submit button at the end of the form.Another type of <input> HTML element, with the type specified to “submit”.Clicking the submit button of a form causes the form to emit a submit event.Js can be used to add an event listener for this submit event, thus allowing the form data to be captured and processed. 
HTML forms also allow browser to offer an improved user experience based on the browser’s metadataBuilding form-like web experiences without actually using form elements almost always results in a low-quality experience. Metadata is important because it can be used to create a Semantic Website, where the meaning of the content is well-represented and allows the following:Allows the form to be machine-readablesearchesenables browsers to make smart decisions about how a form should be presented and interacted with.
Requires the use of the <textarea></textarea>.Allows for multiline text to be entered.
Default values for input types are provided using the value attribute in the <input> tag. For example, <input type="text" value="default text">.The name attribute is used to group radio buttons together. All radio buttons with the same name value belong to the same group.You can create a "submit" button using either <input type="submit"> or <button type="submit">.
The HTML4 form input types also offer a degree of built-in validation.Ex. Date Input will only allow the user to enter a dateAn email input will ensure that the value is a valid email address.This basic level of validation is handled by the browser, but custom input validation of input fields can be added using Js.Use the multiple attribute in the <input> tag, like this: <input type="email" multiple>.
The tel input typically brings up a keyboard optimized for entering phone numbers, often including numbers, asterisks (*), and the hash (#) key. The number input brings up a keyboard with just numbers and a decimal point.
The options are only suggestions and the user may still type anything they like in the field.This HTML element will also autocomplete as the user is typing their input.Appearance: The appearance of the datalist if different across browsers and platforms, with no way to customize the default appearance using CSS. The input can be styled, but not the suggestions. This input customization can be accomplished using JavaScript.By using a datalist, you can provide a list of options the user can select from to complete the field. To do this, define a datalist with an option element for each suggestion:To tie a datalist to an input element, give the input element a list attribute and the datalist an id attribute that match. Here’s an example:
Linking <datalist> with <input>: The <input> element is linked to the <datalist> by using the list attribute on the <input> and matching it with the id attribute of the <datalist>.Custom Labels: You can provide a custom label for each option by using the value attribute within the <option> tag inside the <datalist>.Compatible Input Types: Datalists can be used with input types like text, search, email, url, and even range for sliders.
<keygen> element was created to provide a way to generate these key pairs: Store the private key to the local key store and send the public key to the server along with the user-submitted form data. This would guarantee future communication between the browser and server could then be carried out securely. The keygen element never had full support across all browsers and eventually became deprecated due to security concerns. It was unique to it’s ability to automatically make changes on the user’s OS when generating and storing keys.
Uses entirely JavaScript to achieve the same goals as the the keygen HTML element. Key Pair is generated using the “generateKey()” method of the SubtleCrypto interface available as a top-level property on the window.
Can data encrypted with a public key be decrypted with the same public key?No, data encrypted with a public key can only be decrypted with the corresponding private key.Can a server use the matching public key to decrypt data encrypted by a user with their private key?Yes, data encrypted with a private key can be decrypted by anyone with the corresponding public key. This is commonly used for digital signatures, not for securing private data.
The <output> element is for display purposes only.
img element supports the src attribute, for setting the source of the imagea element supports the href attribute for setting the URL of the link.
These Global attributes create accessible, readable, helpful, and semantically correct forms for the user.
These attributes provide common functionalities, such as setting limits on input length, enforcing patterns for input values, and making fields required. The following attributes are versatile and applicable to multiple types of form controls in HTML forms.
When an element is disabled, it appears dimmed or grayed out, indicating that it is unavailable for interaction. Additionally, disabled elements are not submitted when the form is sent, so any data entered into them prior to being disabled will not be included in the form data.
This allows the user input to match the server requirements for the inputted data.
<fieldset> is semantically meaningful, providing context to both users and assistive technologies like screen readers. It inherently groups related fields and offers better accessibility than a generic <div>.Yes, every <fieldset> should have a <legend> because it serves as a descriptive label, helping users, especially those using screen readers, understand the purpose of the grouped fields.Using <label> correctly associated with input fields ensures screen readers announce what each input is for. <fieldset> with <legend> clarifies the grouping and purpose of related fields, improving navigation and understanding for screen reader users.Ensure every input has an associated <label>Use the autofocus attribute to automatically place the cursor in the first field of the formUse <fieldset> and <legend> to group related inputs
The <fieldset> groups related inputs, making forms more navigable and understandable, while the <legend> acts as a descriptive label for the group, explaining its purpose. The <fieldset> attribute visually groups related inputs together with a line.The <legend> attribute describes what the grouped inputs are. 
This structure aids in reducing confusion, helping users comprehend the form's layout and content, and improving the overall user experience.
Form elements without any additional CSS styling will work well across all browsers. The appearance may be different between browsers, but the form will be usable, and all inputs will be able to capture the information required from the user*Extreme Caution* should be used when modifying the default functionality or appearance of a form element, and changes must be tested across all browsers
the browser itself, compared to other browsersthe platform the browser is running on, e.g. Chrome Windows vs. Chrome Macthe version of that browser, as the implementation can change with each versionthe device the browser is running on, e.g. mobile vs. desktopIt is important to always carry out cross-browser testing for any website before making it public. Sometimes the differences between browsers need to be accepted and worked around.
For example, if the audience primarily uses mobile devices, mobile browser testing becomes crucial.
Adding the autocomplete attribute to a form signals to the browser that it should suggest values that have been used in similar fields in the past.Autocomplete attribute supports more than 50 specific autocomplete data types according to WHATWG HTML spec.
More
Share
Explore
Importance of Forms
Web forms are the primary method of data input for many of the applications we use every day.
Most people think of a contact form when the word “Form” comes to mind. See below.
Examples of forms in real life use:
Form Types
Although it’s very possible to build such applications without the use of form elements, it’s recommended to use them whenever you’re capturing input data.
Name Attribute
<Label> Element
Submission
There’s a list of common form element types that have been well established in HTML. They all use the <input> tag, which is self closing and doesn’t require a closing tag.
Text Area
1. How are default values provided for each of the input types?
2. Which attribute is used to organize radio buttons into groups?
3. What are the two ways to create a "submit" button?
HTML5 Form Types
These new input types are additions to the set of basic form elements, and do not require any special treatment of the form itself in order be used.
When a browser does not support a specific input type it is generally safe for it to fall back to a plain text input.
Importance of Forms
1. How can an email input be configured to accept multiple email addresses?
<input type="email" id="email" name="email" multiple />
2. On mobile devices, what keyboard differences exist for a tel input compared to a number input?
HTML Form Elements
Datalist
The <Datalist> HTML element offers suggestions for an input field which can help a user determine what input is expected from a form.
<datalist>
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
<!-- etc... -->
</datalist>
<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team" list="team_list">
<datalist id="team_list">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
<!-- etc... -->
</datalist>
How is the <datalist> element linked up with the input type?
How could you provide a custom label for each option?
Which other input types can be used with a datalist?
Datalist Placement: The <datalist> element does not need to be defined directly alongside the associated <input> element in the HTML. However, it must be referenced correctly by the list attribute in the <input> tag, which matches the id of the <datalist>.
Input Types Affected: The input types that experience the most significant changes with the addition of a <datalist> are text, search, email, url, and range, as they gain enhanced user interaction with suggested options or ranges.
<input list="fruits" name="fruit" placeholder="Choose a fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Date">
<option value="Grape">
</datalist>
<input type="range" list="tickmarks" min="0" max="10">
<datalist id="tickmarks">
<option value="0" label="Low">
<option value="5" label="Medium">
<option value="10" label="High">
</datalist>
<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
<option value="Chrome" label="Google Chrome">
<option value="Firefox" label="Mozilla Firefox">
<option value="Safari" label="Apple Safari">
<option value="Edge" label="Microsoft Edge">
</datalist>
Keygen
The <keygen> HTML element was used to generate a key pair (a private key and a public key) in forms, typically for authentication purposes. The public key would be sent to the server, while the private key would remain on the client-side for cryptographic operations.
Web Crypto API
The Web Crypto API was the replacement for the keygen HTML element.
<keygen name="login_form" keytype="RSA">
<form>
<label for="username">Username</label>
<input id="username" type="text" name="username">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<keygen name="login_form" keytype="RSA">
<input type="submit">
</form>
HTML Output Element
The <output> element is useful in forms where one of the values is calculated based on other inputs. Calculated values require the use of JavaScript.
JavaScript "listens" for events representing a change in form values, does the calculation, then applies the calculated value to the <output> element.
HTML5 Global Attributes
Every element has a list of attributes it can use for either adding metadata or modifying the functionality of said element.
The available list of attributes depends on the exact element being used, so not all attributes are relevant for every single HTML element.
Examples:
Some attributes work with every element, no matter what the element is. These are called Global Attributes; Examples are the attributes id and class.
Why these Global Attributes are essential:
Global HTML Attributes
Form-specific Attributes
There are also form-specific attributes that are considered global for all HTML form inputs, meaning they’re valid for all form inputs:
These attributes help in managing form input fields more effectively by setting rules and guidelines for the data that can be entered, ensuring a better user experience and more reliable data collection.
Element-Specific Attributes
These forms are used for large number of form elements:
Autofocus Attribute
The autofocus attribute will place the user’s typing cursor into the input when the page loads so they will not have to click in the box to began filling out the form.
Disabled Attribute
The disabled attribute in HTML is used to make a form element non-interactive, meaning that the user cannot click on, focus on, or enter any data into it.
This attribute can be applied to various form elements, such as <input>, <button>, <select>, and <textarea>.
It’s also common for the maxlength attribute to be used alongside the <textarea> element since the textrea element provides a large amount of space for the user to enter free-form text.
Why is <fieldset> preferred over <div> for grouping related fields in a form?
Should every <fieldset> always have a <legend> defined?
Examples of semantic form elements improving screen reader experiences:
The following three HTML techniques can be used to improve form accessibility:
<FieldSet> & <Legend>
The <fieldset> and <legend> elements enhance accessibility by semantically grouping related form fields and providing clear context for users, especially those using screen readers.
Cross-Browser Compatibility
Each browser will receive and implement new HTML5 features at different times, depending on how each browser team prioritizes the new features.
Consideration needs to be placed when developing forms to ensure that the user experience is consistent and functional across browsers and platforms.
Form Element Appearance
There are noticeable variations in the appearance of some form elements due to implementation decisions made by individual browser vendors, which can impact the user experience.
Testing
Browsers can have different behaviors depending on:
Usually, developers of a website or web app are aware of the typical browser usage distribution of their target audience and make sure to test a set of browsers that best represent their audience.
Audience Impact on Testing: The target audience determines which browsers and devices need priority in testing.
Responsibility for Cross-Browser Compatibility: While ensuring cross-browser compatibility is a shared responsibility, frontend developers typically take the lead, with QA engineers verifying the results.
Cloud-Based Testing Preference: Cloud-based browser testing is preferred because it allows access to a wide range of browser and OS combinations without the need for extensive local infrastructure, enabling scalable and efficient testing.
Submitting Forms
Autocomplete Attribute
The autocomplete attribute was added to allow developers to opt into using browser-supported autocomplete.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.