HTML, the World Wide Web's core language, has been used for designing Web pages for nearly a decade. With the continuous evolution of the Web, Web designers and programmers find it difficult to make pages more flexible and dynamic in behavior. Dynamic behavior is particularly expected when displaying Web forms to users. For example, HTML5 allows the creation of combo boxes, adding placeholder text on the page, providing client-side validation through JavaScript, and achieving dynamic behavior using the Document Object Model (DOM) API.

Although browsers such as Microsoft Edge 89, Google Chrome 91, and Firefox 89 support most HTML5 features, some are supported only in Opera.

Among the other features of HTML5, there has been a great enhancement to Web forms. HTML Web forms are sections of the Web page containing special elements called controls. The controls, such as checkboxes, radio buttons, and text boxes provide a visual interface for the user to interact with them. A user provides data through these controls that is sent to the server for further processing. Thus, it is very important to create forms with a lot of consideration for usability and accessibility by users.

In HTML5, the creation of forms is made easier for Web developers by standardizing them with rich form controls. It also provides client-side validations that are now handled natively by browsers. This not only reduces the load time of the pages but also removes the need for repetitive JavaScript codes to be included on the page.

Even the visual appearance of the forms is improved when displayed on different devices, such as iPhones, iPads, touch screens, and browsers. This enhances the user's experience while interacting with them.

The HTML <form> element is used to create an HTML form that can accept user input. This element acts as a container for different types of input elements, namely text fields, checkboxes, radio buttons, submit buttons, and so on.

Lists some of the most commonly used input types in HTML forms.

1. <input type="text">: Displays a single-line text input field
2. <input type="radio">: Displays a radio button
3. <input type=" checkbox">: Displays a check box
4. <input type="submit">: Displays a submit button
5. <input type="button">: Displays a clickable button

The action attribute in the form element defines the action to be performed when the form is submitted.

New Features in HTML5 Forms

HTML5 Web forms bring great improvements related to form creation for Web developers and also for users interacting with them. Following are the changes introduced in HTML5 forms:

• New form elements
• New input types
• New attributes
• Browser-based validation
• CSS3 styling techniques
• Forms API

Note - The state of HTML5 is changing continuously to improve. Thus, support for new form elements, attributes, and input types can vary across different browsers.

1. New form elements

HTML5 has introduced a range of new elements that are expanding the options for more elements related to input on forms.

Lists the new elements in HTML5.

1. Progress: Represents the completion progress of a task on the page
2. Meter: Represents a scale of a known range
3. Data list: Represents a set of options used with a list attribute to make a drop-down control
4. Output: Represents the result of a calculation
   
   

2. New Input Types

The input element is a data field that allows the user to edit the data on the form. It has an attribute named type which controls the data type and characteristics of the input element.

Lists the new input types supported by HTML5 that specify the kind of input expected from users on a Web page.

1. Email: Represents the completion progress of a task on the page
2. Search: Represents a scale of known range
3. URL: Represents a set of options used with a list attribute to make a drop-down control
4. Tel: Represents the result of a calculation
5. Number: Represents a numerical value in the input field
6. Range: Represents a numerical value to be selected from a range of numbers
7. Date: Represents a calendar which is shown on each click on the field
8. Week: Represents the date in year-week format
9. Month: Represents a value in a year-month format
10. Time: Represents a value in the hours and minutes format
11. DateTime: Represents a full date and time input field with a time zone
12. Color: Represents a predefined interface for selecting color

3. New Attributes

HTML5 has introduced several new attributes that can be used with form and input elements. Attributes help elements perform their tasks.

Lists the new attributes in HTML5.

1. Placeholder: Represents a hint that helps users enter the correct data in the field
2. Required: A Boolean attribute that validates the entry in the field
3. Multiple: A Boolean attribute that allows multiple values to be entered in the field
4. Autofocus: Focuses the input element on page load
5. Pattern: Represents a regular expression for validating the field's value
6. Form: Allows the elements to reference the form by including the form name

4. Browser-based validation

HTML4 Supports the use of custom JavaScript or libraries to perform validation on client-side browsers. These validations ensure that the input fields are checked before the form is submitted to the server for further processing.

The new attributes in HTML5, such as required and pattern can be used with the input elements to perform validation. This relieves Web developers from writing custom JavaScript code for performing client-side validation on Web pages. HTML5 also provides advanced validation techniques that can be used with JavaScript to set custom validation rules and messages for input elements.

5. CSS Styling Techniques

A Web developer can enhance the form elements with pseudo-class selectors, such as :required, :valid, and :invalid. For example, input fields that cannot be left blank while submitting the form can be displayed with an outline. To achieve this, the input field with the required attribute can be styled using CSS. Applying CSS styles makes it easier for users to navigate and complete the form.

CSS code for formatting non-empty and incorrect data input in the input element fields on the form.

6. Forms API

HTML5 has introduced a JavaScript API for forms. This API is used to customize the validations and processing performed on the forms. The new form's API provides new methods, events, and properties to perform complex validations combining fields or calculations.

Lists events and methods.

1. setCustomValidity(message): Sets the custom error message that is displayed when the form is submitted by the user
2. checkValidity(): Checks the validity of the e-mail address entered by the user
3. oninvalid: Allows script to run only when the element is invalid
4. onforminput: Allows script to run when the form gets input from the user
5. onfornchange: Represents a regular expression for validating the field's value
6. form: Allows script to run when the form changes