Form is use to
collect data from user. HTML 5 add some new control which helps and minimize your
coding for date,time,email etc input. In following code I have differentiate
HTML 4 and HTML 5 control sperately.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5
Form Tutorial</title>
</head>
<h1 align="center">Girfa : Student Help Form New
Element</h1><hr>
<body>
<form action="#" method="post">
<table cellspacing="5">
<tr>
<td colspan="2" align="center"><h3>HTML 4 Control</h3></td>
</tr>
<tr>
<td align="right">Text Box: </td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Password: </td>
<td><input type="password"></td>
</tr>
<tr>
<td align="right">Check Box: </td>
<td>
<input type="checkbox"
>Choice 1
<input type="checkbox"
>Choice 2
</td>
</tr>
<tr>
<td align="right">Radio Button: </td>
<td><input type="radio" name="radio" checked="checked">Choice 1 <input type="radio"
name="radio">Choice
2</td>
</tr>
<tr>
<td align="right">Hidden: </td>
<td><input type="hidden" value="This is hidden Data"></td>
</tr>
<tr>
<td align="right">File : </td>
<td><input type="file"></td>
</tr>
<tr>
<td align="right">Image : </td>
<td><input type="image" src="image.jpg"></td>
</tr>
<tr>
<td align="right">Buttons : </td>
<td>
<input type="button"
value="Sample
Button" >
<input type="submit" >
<input type="reset"
>
</td>
</tr>
<tr>
<td colspan="2" align="center"><h3>HTML 5 Control</h3></td>
</tr>
<tr>
<td align="right">Date Time : </td>
<td><input type = "datetime"
name = "newinput" /></td>
</tr>
<tr>
<td align="right">Local Date and Time : </td>
<td> <input type = "datetime-local" name
= "newinput"
/></td>
</tr>
<tr>
<td align="right">Date : </td>
<td> <input type = "date" name = "newinput"
/></td>
</tr>
<tr>
<td align="right">Month : </td>
<td> Month : <input type = "month" name
= "newinput"
/></td>
</tr>
<tr>
<td align="right">Week : </td>
<td> Week : <input type = "week" name = "newinput"
/></td>
</tr>
<tr>
<td align="right"> Time : </td>
<td> Time : <input type = "time" name = "newinput"
/></td>
</tr>
<tr>
<td align="right"> Select Number : </td>
<td> <input type = "number" min = "0" max = "10" step "1"
value
= "5"
name = "newinput" /></td>
</tr>
<tr>
<td align="right"> Select Range :</td>
<td>
<input type = "range" min = "0" max = "10" step "1"
value
= "5"
name = "newinput" /></td>
</tr>
<tr>
<td align="right"> Email : </td>
<td> <input type = "email" name = "newinput" /></td>
</tr>
<tr>
<td align="right"> URL : </td>
<td> <input type = "url" name = "newinput" /></td>
</tr>
<tr>
<td align="right"> Submit : </td>
<td> <input type = "submit" name = "newinput" /></td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment