Search within TutorialsPark

HTML5 Form Attributes


HTML5 introduced several new form type attributes .


Form Attribute Types

HTML5 Webforms 2.0 brought many new attributes for form elements.

The following are webforms2.0 form attributes.

autofocus.

autocomplete.

list.

min-max.

formenctype

multiple.

placeholder.

pattern.

required.

step.


Autocomplete

Enter you website URL :

1.Autocomplete attribute enables the browser to remember the data entered and reuse it.

2.Autocomplete attribute allows you to fill form faster.By reducing effort to write same data over and over. Eg: e-mail address,creditcard no etc.

3.Autocomplete attribute is a standard(by default). For secure data input switch if "off". Eg: autocomplete="off"

Url input Example

Give it a TRY! »


Autofocus

What's your email :

1.Autofocus attribute enables the cursor to focus automatically to input as soon as the page is loaded.

2.Only one element per page should have an autofocus attribute,otherwise it becomes undefined.

3.To enable autofocus just put the attribute autofocus alone in input element.

Autofocus Example

Give it a TRY! »


List

Operating System:

1.List attribute is used along with datalist element,allowing a list of possible values for an input.

2.List attribute is used for input,while datalist is used to create a list of options .

List attribute Example

Give it a TRY! »


Min-Max

Number(20 to 100) :

1.The min and max attribute puts a constrain on the input values.

2.The min sets the minimum input value, whereas max sets the maximum value the input can attain.

3.In above example 20 is minimum, and 100 is maximum.

Min-Max Example

Give it a TRY! »


Multiple

upload a file:

1.The multiple attribute allows you to enter multiple values for a input. Its is boolean in nature.

2.Syntax of multiple Attribute is multiple="multiple", or just multiple.

Multiple attribute example

Give it a TRY! »


DATETIME-LOCAL: < input type="datetime-local">

Local Date and Time :

1.Obtains values which represents local date and time(no timezone).

2.The Input format is yyyy-mm-ddThh:mm:ss.Eg:2012-08-15T17:30:47.

Multiple Example

Give it a TRY! »


Placeholder

e-mail :

1.Place holder attribute allows the user to get a hint about the nature of input. These are text that occupy input field by default.

Placeholder Example.

Give it a TRY! »


Pattern

1.Pattern Attribute enables the browser to validate the input to ensure it matches a regular expression.

2.The Example validates the input for two names seperated by blank space.

3.The Example validates the input for two names seperated by blank space.

Pattern Attribute Example

Give it a TRY! »


Required attribute

Name:

1.Required form attribute makes it mandatory for user to enter some value before submittion.

2.Required attribute can be added by just writingrequired within input element.

Required Attribute Example

Give it a TRY! »


Step attribute

Select your Number :

1.Step attribute is used to control the granularity and specificity of input.

2.The value within the step attribute is the value by which the input changes.

3.Eg: step="2" means the increment or decrement will be by amount 2.

Color input Example

Give it a TRY! »






Related Examples

Related Tags