HTML5
supports the following advanced form control; these are latest input types in
web 2.0. All major browsers support all the new input types. If they are not
supported, will behave as a regular text fields.
·
date – It
allows the user to select date. In real time applications it is very useful for
ticket booking, taking appointments, ordering food items etc.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select valid date</label><br/>
<input type="date" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
datetime
– This
input type allows the user to select date and time with time zone.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select date and time</label><br/>
<input type="datetime" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
datetime-local
– This
input type allows the user to select date and time without time zone.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select datetime local</label><br/>
<input type="datetime-local" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
month –
This
input allows the user to select month and year.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select month &
year</label><br/>
<input type="month" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
time – This
input type allows the user to select time with hours and minutes.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select time</label><br/>
<input type="time" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
week – This
input allows user to select week and year.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select week &
year</label><br/>
<input type="week" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
color –
This
input type allows the user to display color picker.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Select color</label><br/>
<input type="color" name="dt"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
email –
This
input type allows user to enter valid email address.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Enter email</label><br/>
<input type="email" name="el"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
number –
This
input type allows to display numerical spinners. It has 4 attributes – max (maximum
value allowed), min(minimum value allowed), step(specifies the legal number of
intervals), value(specifies the default value).
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>select number</label><br/>
<input type="number" name="n1"
value="0" min="5"
max="104" step="5"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
range –
This
input type allows the user to display slider.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Slider</label><br/>
<input type="range" name="n1"
value="0" min="5"
max="104" step="5"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
search –
In
HTML5 we can define textbox as search box instead of a normal textbox. Notice
there is a blue cross sign appears
in the textbox when we input something in the search box. When we click on the cross our input string will be clear
and we can start to type a new string.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Search</label><br/>
<input type=search name="key"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
·
tel – This input
type accepts only phone numbers. It does not confirm any specific pattern.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" name="myform"
id="form1">
<label style='color:red'>Mobile No</label><br/>
<input type="tel" name="mno"
pattern="[0-9]{10}"><br/>
<input type="submit" value="Next
Page">
</form>
</body>
</html>
No comments:
Post a Comment