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:
<form>
<label for="myemail">Enter Email Address:</label>
<input type="email" id="myemail" required>
</form>
|
Output:
Number: This field accepts only numerical values. The step attribute specifies the precision, which defaults to 1.
Example:
<form>
<label for="mynumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>
|
Output:
Time: The time (hour, minute, second, fractional second) is encoded according to ISO 8601.
Example:
<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime">
</form>
|
Output:
Week: A date that is composed of a weekday and a year is encoded according to ISO 8061.
Example:
<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek">
</form>
|
Output:
Month: According to ISO 8061, dates consisting of a year and a month are encoded.
Example:
<form>
<label for="mymonth">Select Month:</label>
<input type="month" id="mymonth">
</form>
|
Output:
Date: A date (year, month, day) is encoded using the ISO 8601 standard.
Example:
<form>
<label for="mydate">Select Date:</label>
<input type="date" value="2019-04-15" id="mydate">
</form>
|
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:
<form>
<label for="mydatetime">Choose Date and Time:</label>
<input type="datetime-local" id="mydatetime">
</form>
|
Output:
Week: A drop-down calendar lets the user choose a week and year from the week input type.
Example:
<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek">
</form>
|
Output:
range: For input fields, the range type is used to represent a range of values.
Example:
<form>
<label for="mynumber">Select a Number:</label>
<input type="range" min="1" max="10" step="0.5" id="mynumber">
</form>
|
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:
<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required>
</form>
|
Output:
The <output> element:
- HTML5 introduced a new element called <output> 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:
<!DOCTYPE html> <html lang="en">
<head>
<title>Example of HTML output Tag</title>
</head>
<body>
<form oninput=
"result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="100"> =
<output name="result" for="a b"></output>
</form>
</body>
</html>
|
Output:
Web Form2.0 Attributes:
1. placeholder attribute
- HTML5 introduced a new attribute called placeholder.
- With placeholder attributes on <input> and <textarea> elements, users are able to know what they can enter in the field.
- The placeholder text cannot contain line-feeds or carriage returns.
Example:
<input type="text" name="search" placeholder="search the internet"/>
|
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:
<input type=“text” name=“search” autofocus/>
|
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:
<input type=“text” name=“search” required>
|