What is Web Forms 2.0 ? (original) (raw)

Last Updated : 23 Jul, 2025

An HTML form is a special part of a web page that contains certain controls, including labels, text fields, password fields, hidden fields (used by the software), radio buttons, checkboxes, fieldsets, legends, and submit buttons. During the interaction with these forms, users provide all the necessary information for the server to process. Currently, client-side scripting is used for effects and simple validation (usually using Javascript), but HTML5 will reduce the need for this materially in the near future.

What Is Web Forms 2.0

HTML5 form elements are supported by many browsers, although some of them differ in their compatibility and display features. This article explores both the main components of an HTML5 website form and those new features designed to make HTML more user-friendly.

HTML5 Input Element (Text):

E-mail: It will only accept email values. Input fields that need to contain an email address should use this type. When you try to submit a simple text, it only asks for an email address in the format email@example.com.

Example:

HTML `

Enter Email Address:

Output:

Number: This field accepts only numerical values. The step attribute specifies the precision, which defaults to 1.

Example:

HTML `

Enter a Number:

Output:

Time: The time (hour, minute, second, fractional second) is encoded according to ISO 8601.

Example:

HTML `

Select Time:

Output:

Week: A date that is composed of a weekday and a year is encoded according to ISO 8061.

Example:

HTML `

Select Week:

Output:

Month: According to ISO 8061, dates consisting of a year and a month are encoded.

Example:

HTML `

Select Month:

Output:

Date: A date (year, month, day) is encoded using the ISO 8601 standard.

Example:

HTML `

Select Date:

Output:

datetime-local: Date and time encoded in ISO 8601 (year, month, day, hour, minute, second, fraction of a second) without time zone information.

Example:

HTML `

Choose Date and Time:

Output:

Week: A drop-down calendar lets the user choose a week and year from the week input type.

Example:

HTML `

Select Week:

Output:

range: For input fields, the range type is used to represent a range of values.

Example:

HTML `

Select a Number:

Output:

URL: It can only accept URL values. In this type of field, URL addresses should be entered. Those who submit simple text entries must specify the URL, either http://www.example.com/ or http://example.com/

Example:

HTML `

Enter Website URL:

Output:

The element:

HTML5 introduced a new element called to represent the output of different types of scripts, like the ones written by a script.
An output element's for the attribute is used to specify a relationship between that element and other elements in the document that influence the calculation.
A space-separated list of IDs of other elements is the value for this attribute.

Example:

HTML `

Example of HTML output Tag + =

Output:

Web Form2.0 Attributes:

1. placeholder attribute

HTML5 introduced a new attribute called placeholder.
With placeholder attributes on and
The placeholder text cannot contain line-feeds or carriage returns.

Example:

HTML `

2. autofocus attribute

This is a simple one-step pattern that can be easily programmed in JavaScript as soon as the document loads. When the form loads, it automatically focuses on a particular field in the document.

Example:

HTML `

3. required attribute:

The required attribute is used in place of Javascript validations.
Due to this attribute, Javascript is now only required for client-side validations where an empty text box cannot be submitted.

Example:

HTML `