Web forms in HTML5.

0 comments

Web forms is an extension of the (‘forms’) features found in HTML4.
The elements & attributes in HTML5 gives a great degree of semantic mark-up than the HTML4 & remove the need of extra scripting & styling that was required in the previous version of HTML.

The <input> element in HTML5

Type Description
text A free-form text field, nominally free of line breaks.
password A free-form text field for sensitive information, nominally free of line breaks.
checkbox A set of zero or more values from a predefined list.
radio An enumerated value.
submit A free form of button initiates the form submission.
file An arbitrary file with a MIME type and optionally a file name.
image Relative to a particular image’s size, with extra semantic it must be the last value selected and initiates the form submission.
hidden An string that is not normally displayed to the user.
select An enumerated value, much like the radio type.
textarea A text field, nominally with no line break restrictions.
button A button which can initiates any event related to the button.
datetime A date and time (year, month, day, hour, minute, second, and a fractions of second) encoded according to the time zone set to UTC.
datetime-local A date and time (year, month, day, hour, minute, second,and a fractions of second) encoded according to with no time zone information.
date A date (year, month, day) encoded according to ISO 8601.
month A date consisting of a year and a month encoded according to ISO 8601.
week A date consisting of a year and a week number encoded according to ISO 8601.
time Time (hour, minute, seconds,m-seconds) encoded according to the ISO 8601.
number This field accepts only the numerical values .
range The range field is used for input fields that should contain a value within range of the numbers.
email This field accepts only the email value. This type of field is used for input that should contain an e-mail address.
url This field accepts only URL value. This type of field is used for input that should contain a URL address.

Element<output> in HTML5
In HTML5 a new element know as <output> which is mainly used to represent the result fro different type of output.

    • The attribute placeholder : In HTML5 new attribute is intoduced placeholder. This attribute provide user a hint of what can be entered in the field it works on <input> and <textarea> elements.
    • <input type="text" name="search" placeholder="search the web"/>
    • The attribute autofocus : In HTML5 new attribute is intoduced autofocus . This is just a simple pattern ,easily programmed in a JavaScript at the time of document load, automatically focus on the particular field.
    • <input type="text" name="search"  autofocus/>
    • The attribute required : In HTML5 new attribute is intoduced required . Beacause of this now do not need to have javascript for the client side validations for the empty text box it would never be submitted because of this attribute
    • <input type="text" name="search"  required />

Categories: Designs, Html

Leave A Comment

Loading...