HTML Web Browser

HTML5 - Web Forms 2.
Previous Page
Next Page
Web Forms 2.0 is an extension to the forms features found in HTML4.
Form elements and attributes in HTML5 provide a greater degree of
semantic mark-up than HTML4 and free us from a great deal of tedious
scripting and styling that was required in HTML4.
The <input> element in HTML4
HTML4 input elements use the type attribute to specify the data
type.HTML4 provides following types −
Sr.No Type & Description

.
1 text
A free-form text field, nominally free of line breaks.
password
2
A free-form text field for sensitive information, nominally free
of line breaks.
3 checkbox
A set of zero or more values from a predefined list.
4 radio
An enumerated value.
5 submit
A free form of button initiates form submission.
6 file
An arbitrary file with a MIME type and optionally a file name.
image
7 A coordinate, relative to a particular image's size, with the extra
semantic that it must be the last value selected and initiates form
submission.
8 hidden
An arbitrary string that is not normally displayed to the user.
9 select
An enumerated value, much like the radio type.
10 textarea
A free-form text field, nominally with no line break restrictions.
button
11
A free form of button which can initiates any event related to
button.
Following is the simple example of using labels, radio buttons, and

submit buttons −
...
<form action = "http://example.com/cgiscript.pl" method = "post">
<p>
<label for = "firstname">first name: </label>
<input type = "text" id = "firstname"><br />
<label for = "lastname">last name: </label>
<input type = "text" id = "lastname"><br />
<label for = "email">email: </label>
<input type = "text" id = "email"><br>
<input type = "radio" name = "sex" value = "male"> Male<br>
<input type = "radio" name = "sex" value = "female"> Female<br>
<input type = "submit" value = "send"> <input type = "reset">
</p>
</form>
...
The <input> element in HTML5
Apart from the above-mentioned attributes, HTML5 input elements
introduced several new values for the type attribute. These are listed
below.
NOTE − Try all the following example using latest version
of Opera browser.
Sr.No Type & Description

.
datetime
1 A date and time (year, month, day, hour, minute, second,
fractions of a second) encoded according to ISO 8601 with the
time zone set to UTC.
2 datetime-local
A date and time (year, month, day, hour, minute, second,
fractions of a second) encoded according to ISO 8601, with no
time zone information.
date
3
A date (year, month, day) encoded according to ISO 8601.
month
4
A date consisting of a year and a month encoded according to
ISO 8601.
week
5
A date consisting of a year and a week number encoded
according to ISO 8601.
time
6
A time (hour, minute, seconds, fractional seconds) encoded
according to ISO 8601.
number
7
It accepts only numerical value. The step attribute specifies the
precision, defaulting to 1.
range
8
The range type is used for input fields that should contain a
value from a range of numbers.
9 email
It accepts only email value. This type is used for input fields
that should contain an e-mail address. If you try to submit a
simple text, it forces to enter only email address in
email@example.com format.
url
It accepts only URL value. This type is used for input fields that
10 should contain a URL address. If you try to submit a simple
text, it forces to enter only URL address either in
http://www.example.com format or in http://example.com
format.
The <output> element

HTML5 introduced a new element <output> which is used to represent
the result of different types of output, such as output written by a script.
You can use the for attribute to specify a relationship between the output
element and other elements in the document that affected the calculation
(for example, as inputs or parameters). The value of the for attribute is a
space-separated list of IDs of other elements.
Live Demo
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function showResult() {
x = document.forms["myform"]["newinput"].value;
document.forms["myform"]["result"].value = x;
}
</script>
</head>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get" name =

"myform">
Enter a value : <input type = "text" name = "newinput" />
<input type = "button" value = "Result" onclick = "showResult();"
/>
<output name = "result"></output>
</form>
</body>
</html>
It will produce the following result −
The placeholder attribute
HTML5 introduced a new attribute called placeholder. This attribute on
<input> and <textarea> elements provide a hint to the user of what can
be entered in the field. The placeholder text must not contain carriage
returns or line-feeds.
Here is the simple syntax for placeholder attribute −
<input type = "text" name = "search" placeholder = "search the web"/>
This attribute is supported by latest versions of Mozilla, Safari and
Crome browsers only.
Live Demo
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">

Enter email : <input type = "email" name = "newinput"
placeholder = "email@example.com"/>
<input type = "submit" value = "submit" />
</form>
</body>
</html>
This will produce the following result −
The autofocus attribute
This is a simple one-step pattern, easily programmed in JavaScript at the
time of document load, automatically focus one particular form field.
HTML5 introduced a new attribute called autofocus which would be
used as follows −
<input type = "text" name = "search" autofocus/>
Chrome browsers only.
<!DOCTYPE HTML>
<html>
<body>
Enter email : <input type = "text" name = "newinput" autofocus/>
<p>Try to submit using Submit button</p>
</form>
</body>
</html>
The required attribute
Now you do not need to have JavaScript for client-side validations like
empty text box would never be submitted because HTML5 introduced a
new attribute called required which would be used as follows and
would insist to have a value −
<input type = "text" name = "search" required/>
Chrome browsers only.
Live Demo
<!DOCTYPE HTML>
<html>
<body>
Enter email : <input type = "text" name = "newinput" required/>
<p>Try to submit using Submit button</p>
</form>
</body>
</html>
It will produce the following result −
HTML Global Attributes
The global attributes are attributes that can be used with all HTML
elements.
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element

class Specifies one or more classnames for an element (refers to a class in a
style sheet)
contenteditable Specifies whether the content of an element is editable or not
data-* Used to store custom data private to the page or application
dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not
hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheck Specifies whether the element is to have its spelling and grammar che
or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
translate Specifies whether the content of an element should be translated or no
<input type="search">
<input> elements of type search are text fields designed for the user to
enter search queries into. These are functionally identical to text inputs,
but may be styled differently by the user agent.
<input type="datetime-local">
<input> elements of type datetime-local create input controls that let the
user easily enter both a date and a time, including the year, month, and
day as well as the time in hours and minutes.
Definition and Usage
The <input type="datetime-local"> defines a date picker.
The resulting value includes the year, month, day, and time.
Tip: Always add the <label> tag for best accessibility practices!
<!DOCTYPE html>
<html>
<body>
<h1>Show a Date and Time Control</h1>
<form action="/action_page.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit">
</form>
</body>
</html>
HTML <input type="number">
Syntax
<input type="number">
The <input type="number"> defines a field for entering a number.
Use the following attributes to specify restrictions:
 max - specifies the maximum value allowed

 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
HTML <input type="range">
Syntax
<input type="range">
❮ HTML <input> type attribute
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 attributes below.
 max - specifies the maximum value allowed

 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
HTML <input type="color">
The <input type="color"> defines a color picker.
The default value is #000000 (black). The value must be in seven-

character hexadecimal notation.
Tip: Always add the <label> tag for best accessibility practices!
Syntax
<input type="color">
❮ HTML <input>
type
attribute- Creating an Editable Drop-Down
<input type="text" name="product" list="productName" />
<datalist id="productName">
<option value="Pen">Pen</option>
<option value="Pencil">Pencil</option>
<option value="Paper">Paper</option>
</datalist>

HTML Web Browser

Uploaded by

Copyright:

Available Formats

HTML Web Browser

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Web Browser

Uploaded by

Copyright:

Available Formats

HTML5 - Web Forms 2.

Sr.No Type & Description

Following is the simple example of using labels, radio buttons, and

Sr.No Type & Description

The <output> element

<form action = "/cgi-bin/html5.cgi" method = "get" name =

<form action = "/cgi-bin/html5.cgi" method = "get">

HTML Global Attributes

accesskey Specifies a shortcut key to activate/focus an element

contenteditable Specifies whether the content of an element is editable or not

data-* Used to store custom data private to the page or application

dir Specifies the text direction for the content in an element

draggable Specifies whether an element is draggable or not

hidden Specifies that an element is not yet, or is no longer, relevant

id Specifies a unique id for an element

lang Specifies the language of the element's content

tabindex Specifies the tabbing order of an element

title Specifies extra information about an element

translate Specifies whether the content of an element should be translated or no

The <input type="datetime-local"> defines a date picker.

<h1>Show a Date and Time Control</h1>

The <input type="number"> defines a field for entering a number.

Use the following attributes to specify restrictions:

 max - specifies the maximum value allowed

❮ HTML <input> type attribute

Definition and Usage

The <input type="range"> defines a control for entering a number whose

Default range is 0 to 100. However, you can set restrictions on what

 max - specifies the maximum value allowed

The <input type="color"> defines a color picker.

The default value is #000000 (black). The value must be in seven-

You might also like