HTML5 Forms Introduction and New Attributes

 Form Input types:

 HTML5 has several new input types for forms, using these means less development time and an improved user experience. These new features allow better input control and validation.

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

autocomplete

novalidate

New attributes for <input>:

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta charset=”utf-8″ />

<title>HTML Form</title>

<style>

input:required:invalid, input:focus:invalid {

border-color:red;

}

input:focus:valid

{

color:blue

}

</style>

</head>

<body>

<form action=”/” method=”post”>

Name: <input type=”text” placeholder=”LastName, FirstName” required/> <br />

Employee ID: <input type=”text” pattern=”[a-z][0-9]{4}” placeholder=”1 letter + 4 nums” /> <br />

Color: <input type=”color” id=”colorpicker” name=”color” value=”#ff0000″><div id=”hexcolor”></div> <br />

Experience (0-20): <input type=”rangemin=”0″ max=”20″ step=”1″ value=”3″ /> <br />

Date of Birth: <input type=”date” name=”dob” value=”2011-01-13″ /> <br/>

Time of Birth: <input type=”time” name=”bdaymonth”> <br />

Join Month and Year: <input type=”month” name=”bdaymonth”> <br />

Choose Even Number: <input type=”numbermin=”0″ max=”200″ step=”2″ value=”0″ /> <br />

Telephone Number: <input type=”tel” name=”telphone” value=”98490 01840″ /> <br />

Email Id: <input type=”email” list=”emailchoices” name=”lstCourses” />

<datalist id=”emailchoices“>

<option label=”Sandeep Soni” value=”sandeepsoni@deccansoft.com”>

<option label=”Rahul” value=”rahul@deccansoft.com”>

<option label=”E.M. Sai” value=”sai@deccansoft.com”>

</datalist> <br />

URL: <input type=”url” name=”siteurl” value=”http://www.deccansoft.com” /> <br />

Preferred Holiday Week: <input type=”week” name=”week_year”> <br />

<input type=”submit” name=”submit” value=”Submit” />

</form>

</body>

</html>

 Form Elements:

<output> element :- The <output> element represents the result of a calculation

<form oninput= “x.value=parseInt(a.value) + parseInt(b.value)”>0

<input type=”range” id=”a” value=”50″>100 +

<input type=”number” id=”b” value=”50″>=

<output name=”x” for=”a b”></output>

</form>

Attributes in Form tag:

 <form> /<input> autocomplete Attribute

The autocomplete attribute is used to provide help for user during form entry by showing previous entered data in drop-down list for re-entering data. The autocomplete attribute has two states, on and off. By default its state is on for form.

<form action=”demo1.php” target=”my-iframe1″ id=”form1″ autocomplete=”on”>

Enter your Name: <input type=”text” name=”name”/>

Contact Num: <input type=”text” name=”num”/>

Email ID: <input type=”email” name=”mail” autocomplete=”off”/>

<input type=”submit”/>

</form>

  <form> novalidate Attribute

 novalidate if a form-level attribute used to turn off validation for a form, despite the attributes of the inputs it contains (i.e. will override inputs with the required attribute

<form action=”saveperson.aspx”>

<label for=”name”>Name: </label>

<input type=”text” name=”name” required/><br/>

<label for=”age”>Age: </label>

<input type=”number” name=”age”/><br/>

<input type=”submit” value=”Save”/>

<input type=”submit” value=”Cancel” formaction=’cancel.aspx’ formnovalidate/>

</form>

 Attributes for <input>

 <input> autofocus Attribute

It specifies that an <input> element should automatically get focus when the page loads.

<form action=”demo_form.asp”>

Name:<input type=”text” name=”name” autofocus><br>

Telephone: <input type=”tel” name=”tel”><br>

<input type=”submit”>

<input> form Attribute

It specifies one or more forms an <input> element belongs to Deccansoft Software Services HTML 5 – Form Elements

<form action=”form.asp” id=”form1″>

Student Name<input type=”text” name=”fname”><br>

<input type=”submit” value=”Submit”>

</form>

PhoneNumber <input type=”tel” name=”Phonenum” form=”form1″>

</body>

</html>

<input> form related Attribute

 <form action=”demo_form.asp”>

<input type=”submit” formaction=”form2.asp” formenctype=”multipart/form-data” formmethod=”post” formtarget=”_blank” value=”Submit to form2″>

<input type=”submit” value=”Save 2″ formtarget=”_self”/>

</form>

formenctype :-

 The formenctype attribute can force a form to submit the data in the specified encoding rather than the encoding specified in the form element when submitted as “post”.

Valid as an attribute of elements that can submit a form, including <input type=submit> and <input type=image> and <button>.

Possible values include

the default of “application/x-www-form-urlencoded” which encodes special chars in the URL to ASCII HEX values and spaces to ‘+’,

no encoding with multipart/form-data, and

text/plain which only converts spaces to +, and leaves other characters as is.

height and width:

Similar to the <img> element, the height, width, src, and alt attributes define the height, width, source and alterative text of the image button.

<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>

multiple Attribute:We can take our lists and datalists one step further by applying the Boolean attribute multiple to allow more than one value to be entered from the datalist

<form action=”form1.asp”>

Select multiple files to upload: <input type=”file” name=”file” multiple>

<input type=”submit”>

</form>

Leave a Reply