By the End of the Lesson you will learn
- New input types
- New elements
- New attributes
- Html 5 Form Validation
New HTML 5 INPUT types
color:
Select a color From a color picker like photoshop or illustrator.
date:
User request to input a date.
datetime:
Urgs user to select a data and time with time zone.datetime-local:
This allow users to select a local datetime (No time Zone)email:
For email address.month:
Give a option to user to select a month and year.number:
It allows user to input only number.range:
User may bound to select certain range of number like between 10 to 50.search:
For search field.tel:
Allows user to insert their telephone number.time:
No predefine time is given.User just type time in the field.url:
Allows user to insert website address.week:
Give a option to select the week and year.
HTML 5 New Form Element
<datalist>:
To achieve autocomplete feature in html 5 we use <datalist> tag.When user input data in text box it show apredefined list of option.
As an instant, in a text field user asked to write their profession when user start writing a list of profession
like student,Businessman,Lawer etc will appear below and they may select any option from them.
How to use it:
You can only use datalist in association with <input> tag which has list attribute.First of all you have to create <datalist> somewhere on the form.
like
<input type="text" name="profession" list="abc" >
<datalist id="abc">
<option>student</option>
<option>Businessman</option>
<option>Lawer</option>
</datalist>
In the input tag's list attribute you need write the id of your desire datalist as value.
<keygen>:
The HTML <keygen> tag is used for generating a key pair. When the control's form is submitted, the private
key is stored in the local keystore, and the public key is packaged and sent to the server.This attribute was not supported in HTML 4.01.
<output>:
The Brand new Html 5 output tag is used for showing calculation result,which is done previous withscripting language.Thanks for html 5 for make life easier.
Output Tags Attributes
for:Allows an explicit relationship to be made between the result of a calculation and the elements thatrepresent the values that went into the calculation or that otherwise influenced the calculation. The value must be one or more IDs (separated by a space) of elements within the same document.
form:Associates the output with a form.
name:Specifies the name of this element.
Example code snippets:
<form oninput="m.value=parseInt(x.value)+parseInt(x.value)">0
<input type="range" name="x" value="40" step="10">90 +
<input type="number" name="y" value="60">=
<output name="m" for="x y"></output>
</form>
Description:
The purpose of these code is to calculate the two input field's value and show them instantly by using output tag.
There are two input tag and one output tag.
Input tags are range and number which is new and will be describe below.
In the form there have one attribute which is oninput means when something is going to input then m.value means output tags value will be (x.value+y.value).by default input number's are string.But for to perform math we have to convert two input's value into integer by using parseInt function.This function convert value into integer.
Now why we use 'for' attribute in output tag.We tell that your work is to show the calculation between both x and y.
HTML 5 New Form attribute
autocomplete:
When we input someting in form and submit.Then if autocomplete is on at that time browser store the value.
Afterthat whenever you click that input field again to input data browser show the previous value you entered.If autocomplete off then browser will not give you any option.autofocus:
when we enter a form page firstly a input field is ready to take input and its cursor is blinking.Whitout clickedBefore discussion look at the below code carefully
<form action="another.php" name="myprofile">
First Name:<input type="text" name="firstname" />
Your Email:<input type="text" name="email" />
</form>
<p>Here are some rules and regulation you have to follow when you want to submit your profile so be carefull about the rules and regulation.
</p>
last Name:<input type="text" name="lastname" form="myprofile" />
Now Let's illustrate
You may notice that the last Name field is out of the myprofile form area.In html 4.01 there are no way to receive information such an isolateted input field.Input fields must within thier parents <form> tags.we add additional an attribute to last Name field that is 'form' .By doing this we reffer this input field as a
part of myprofile form.So when we have to use a isolated input field far away from the <form> tag we can use them and take information as a part of the original form.
formaction:
formaction override the action attribute.Lets code and describe
<!DOCTYPE html><html>
<body>
<form action="user.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="admin.php" value="Submit as admin">
</form>
</body>
</html>
Look carefully there are two submit button.The first one is normal when you hit this button it goes to the action page.But the second one is new in html 5 and there have additonal attribute formaction this means when you hit this button it goes to admin.php page.It does not care what is on action attribute.
formenctype:
The formenctype attribute indicates how the form-data should be encoded when submitting it to the server (only forms with method="post")The formenctype attribute overrides the enctype attribute of the <form> element.
Note: The formenctype attribute is used with type="submit" and type="image".
Lets code:
<form action="sample.php" method="post">First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
like previous if you hit the second button this form encypte data as multipart/form-data.
formnovalidate:
By default html 5 form fields validate your data like email,url if you input invalid type of email it will stop you
from submitting the form.But you can prevent this default event by using formnovalidate.just type formnovalidate in input field.formtarget:
After submitting a form some response come from server side.formtarget specifiy exactly where to display this kind of response message from server.Lets Code:
<form action="response.php">
First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit in new window">
</form>
When you hit the second button response message from server will display in a new window instant of current window.
height and width:
simple height and weight of input or button.list:
Already describe in <datalist> section at the top of this page.min and max:
minimum and maximaum value of a input field.Usually Integer.multiple:
choose multiple file at a timeLets code
<form action="files.php">Select images: <input type="file" name="photo" multiple>
<input type="submit" value="Send">
</form>
If you do not write word multiple it will only upload one file although you select two or more.
pattern (regexp):
Pattern attribut hold a regular expression and check the input element against it.suppose you want to accept first name from user which is start only A-N and you give this logic in pattern by using regular expression.Now Any first name who is not between A-N is not accepted.You need to know regular expression to do that.Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
placeholder:You can give instruction to user what type of data or how they fill up a input field.
Lets code:
<form action="simple.php">
Your first Name:<input type="text" name="fname" placeholder="First name">
</form>
required:
it make a input field required.User can not submit form by leaving these required field blank.Lets code:
<form action="go.php" name="info">
Name:<input type="text" name="fname" required >
Email Address<input type="text" name="email" >
<input type="submit" value="SEND" >
</form>
If user Name field leave blank and try to submit the form.User will no longer submit the form and message from the required field appear.User must fill up this required name field.
step:
Step is closely related to range.Suppose in a range field 50 and step is 10 so each point is equal to 10 when user increase one point it will
increase 10 like 10,20,30,40,50
Lest code:
<form oninput="m.value=parseInt(x.value)">0
<input name="x" type="range" step="10" >=
<output name="m" for="x"></output>
</form>
This code already describe in <output> section.Now new is step attribute.Each time range move 10 plus or minus.
For more information about HTML 5 Form Go to official page of W3.org
Complete HTML 5 Forum Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>full html 5 Form</title>
<style type="text/css">
input{
background-color:#FFF;
width:200px;
height:22px;
border:1px solid #FFF;
box-shadow:inset 0px 0px 3px 1px #aaa;
-webkit-box-shadow:inset 0px 0px 3px 1px #aaa;
-moz-box-shadow:inset 0px 0px 3px 1px #aaa;
padding-left:10px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
input[type=submit]{
background-color:#F00;
width:100px;
height:30px;
border:1px solid #fff;
box-shadow:inset 0px 0px 5px 2px #000;
color:#fff;
font-weight:bold;
}
label{
display:block;
width:200px;
float:left;
}
#form{
width:500px;
height:auto;
border:2px solid #69F;
background-color:#E4E4E4;
padding:20px;
margin:auto;
}
#form p {
border-bottom:1px dotted #fff;
}
</style>
</head>
<body>
<section id="form">
<form action="#" name="company info" oninput="m.value=parseInt(x.value)">
<h1 align="center">HTML 5 Form</h1>
<p align="center">Personal information</p>
<p><label>Search</label><input type="search" name="googlesearch"></p>
<p><label>Write Your name:</label><input type="text" name="fname" autofocus placeholder="your name" autocomplete="on" required /></p>
<p><label>Email Address:</label> <input type="email" required autocomplete="on" placeholder="email address" /></p>
<p><label>Website Address</label><input type="url" placeholder="company website" required autocomplete="on" /></p>
<p><label>Number of Employee</label><input type="number" value="10" maxlength="100" ></p>
<p><label>Telephone Number</label><input type="tel" placeholder="Tel Office" required /></p>
<p><label>Mobile</label><input type="tel" placeholder="Your mobile number" maxlength="11" autocomplete="on" /></p>
<p><label>Datalist example:</label><input type="text" list="size" ></p>
<p align="center">Date And Time </p>
<p><label>Standard Date</label><input type="datetime" required autocomplete="on"/></p>
<p><label>Local Date</label><input type="datetime-local" placeholder="yy-mm-dd" /></p>
<p><label>Time </label><input type="time" placeholder="hh:mm:ss"></p>
<p><label>Month </label><input type="month" placeholder="yy-mm" /></p>
<p><label>Week</label><input type="week" placeholder="yy-w" /></p>
<p><label>Range:</label><input type="range" step="10" value="50" id="ran" name="x"><output name="m" for="ran"></output></p>
<p><label>Choose Image</label><input type="image" accept="image/jpeg" required /></p>
<p><label>Files</label><input type="file" required accept="application/msword" /></p>
<p><label>Color</label><input type="color" placeholder="company's logo color" /></p>
<p><label>password</label><input type="password" placeholder="please write password" id="pw"/></p>
<p><label>Confirm password</label><input type="password" placeholder="Confirm password" /></p>
<datalist id="size">
<option value="Very Small">
<option value="Small">
<option value="Medium">
<option value="Standard">
<option value="National ">
<option value="International">
</datalist>
<p align="center"><input type="submit" value="SEND" ></p>
</form>
</section>
</body>
</html>
