Scribd
Upload
193 views

HTML5 - Web Forms 2

HTML5 - Web Forms 2

Uploaded by

oskandaria
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
193 views

HTML5 - Web Forms 2

HTML5 - Web Forms 2

Uploaded by

oskandaria
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Copyright tutorialspoint.

com

HTML5 - Web Forms 2.0

Advertisements

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 remove a great deal of the need for 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: Type text password checkbox radio submit file image hidden select textarea button Description A free-form text field, nominally free of line breaks. A free-form text field for sensitive information, nominally free of line breaks. A set of zero or more values from a predefined list. An enumerated value. A free form of button initiates form submission. An arbitrary file with a MIME type and optionally a file name. 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. An arbitrary string that is not normally displayed to the user. An enumerated value, much like the radio type. A free-form text field, nominally with no line break restrictions. 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:

. . . < f o r ma c t i o n = " h t t p : / / e x a m p l e . c o m / c g i s c r i p t . p l "m e t h o d = " p o s t " > < p > < l a b e lf o r = " f i r s t n a m e " > f i r s tn a m e :< / l a b e l > < i n p u tt y p e = " t e x t "i d = " f i r s t n a m e " > < b r/ > < l a b e lf o r = " l a s t n a m e " > l a s tn a m e :< / l a b e l > < i n p u tt y p e = " t e x t "i d = " l a s t n a m e " > < b r/ > < l a b e lf o r = " e m a i l " > e m a i l :< / l a b e l > < i n p u tt y p e = " t e x t "i d = " e m a i l " > < b r > < i n p u tt y p e = " r a d i o "n a m e = " s e x "v a l u e = " m a l e " >M a l e < b r > < i n p u tt y p e = " r a d i o "n a m e = " s e x "v a l u e = " f e m a l e " >F e m a l e < b r > < i n p u tt y p e = " s u b m i t "v a l u e = " s e n d " >< i n p u tt y p e = " r e s e t " >

< / p > < / f o r m > . . .

The <input> element in HTML5


Apart from the above mentioned attributes, HTML5 input elements introduced sevral new values for the type attribute. These are listed below. NOTE: Try all the following example using latest version of Opera browser. Type datetime Description 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. A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information. A date (year, month, day) encoded according to ISO 8601. A date consisting of a year and a month encoded according to ISO 8601. A date consisting of a year and a week number encoded according to ISO 8601. A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601. This accepts only numerical value. The step attribute specifies the precision, defaulting to 1. The range type is used for input fields that should contain a value from a range of numbers. This 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. This accepts only URL value. This type is used for input fields that 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.

datetime-local date month week time number range

email

url

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. To learn this concept - Do Online Practice.

The placeholder attribute


HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides 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:

< i n p u tt y p e = " t e x t "n a m e = " s e a r c h "p l a c e h o l d e r = " s e a r c ht h ew e b " / >


This attribute is supported by latest versions of Mozilla, Safari and Crome browsers only. To learn this concept - Do Online Practice.

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:

< i n p u tt y p e = " t e x t "n a m e = " s e a r c h "a u t o f o c u s / >


This attribute is supported by latest versions of Mozilla, Safari and Crome browsers only. To learn this concept - Do Online Practice.

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:

< i n p u tt y p e = " t e x t "n a m e = " s e a r c h "r e q u i r e d / >


This attribute is supported by latest versions of Mozilla, Safari and Crome browsers only. To learn this concept - Do Online Practice.

Copyright tutorialspoint.com

You might also like