HTML5 demos and examples

HTML5 - min, max and step Attributes

min, max and step Attributes

The min, max and step attributes are used to specify restrictions for input types containing numbers or dates.
The max attribute specifies the maximum value allowed for the input field.
The min attribute specifies the minimum value allowed for the input field.
The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).
Note: The min, max, and step attributes works with the following <input> types: date pickers, number, and range.
The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9):

Syntax

Points: <input type="number" name="points" min="0" max="15" step="5" />

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="15" step="5"/>
<input type="submit" />
</form>

</body>
</html>

HTML5 - list Attribute

list Attribute

The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field.
Note: The list attribute works with the following <input> types: text, search, url, telephone, email, date pickers, number, range, and color.

Syntax

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://css3-xhtml.blogspot.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://html5-demo.blogspot.com" />
</datalist>

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="css3-xhtml" value="http://css3-xhtml.blogspot.com" />
<option label="Google" value="http://www.google.com" />
<option label="html5-demo" value="http://html5-demo.blogspot.com" />
</datalist>
<input type="submit" />
</form>

</body>
</html>

HTML5 - height and width Attributes

height and width Attributes

The height and width attributes specifies the height and width of the image used for the input type image.
Note: The height and width attributes only works with <input> type: image.

Syntax

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
User name: <input type="text" name="user_name" /><br />
<input type="image" src="img_submit.gif" width="24" height="24" />
</form>

</body>
</html>

HTML5 - Form Override Attributes

Form Override Attributes

The form override attributes allow you to override some of the attributes set for the form element.
The form override attributes are:

formaction - Overrides the form action attribute
formenctype - Overrides the form enctype attribute
formmethod - Overrides the form method attribute
formnovalidate - Overrides the form novalidate attribute
formtarget - Overrides the form target attribute

Note: The form override attributes works with the following <input> types: submit and image.

Syntax

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br />
<input type="submit" formnovalidate="true" value="Submit without validation" /><br />
</form>

</body>
</html>

HTML5- Form Attribute

Form Attribute

The form attribute specifies the input field which is belong to one or more forms.
It must refer to the id of the form.
Note: The form attribute works with all <input> types.

Syntax

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>

<p>The input field below is outside the form element, but still part of the form.</p>

Last name: <input type="text" name="lname" form="user_form" />

</body>
</html>

HTML5 - Autofocus Form Attribute

Autofocus Attribute

The autofocus attribute specifies that a field should automatically get focus when a page is loaded.
Note: The autofocus attribute works with all <input> types.

Syntax

User name: <input type="text" name="user_name" autofocus="autofocus" />

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>

</body>
</html>

HTML5- Autocomplete Form Attribute

Autocomplete Form Attribute

The autocomplete attribute specifies that the form or input field should have an autocomplete function.
Note: The autocomplete attribute works with <form>, and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color.
When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Syntax

<form action="demo_form.asp" method="get" autocomplete="on">
UserName: <input type="text" name="UserName" /><br />
Password: <input type="text" name="Password" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get" autocomplete="on">
UserName:<input type="text" name="UserName" /><br />
Password:<input type="text" name="Password" /><br />
E-mail: <input type="email" name="email" /><br />
<input type="submit" />
</form>

<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>
<p>Then, try to set autocomplete to "off".</p>

</body>
</html>

Friday, 30 December 2011

min, max and step Attributes

Syntax

Example

list Attribute

Syntax

Example

height and width Attributes

Syntax

Example

Form Override Attributes

Syntax

Example

Form Attribute

Syntax

Example

Autofocus Attribute

Syntax

Example

Autocomplete Form Attribute

Syntax

Example