Home > Developer > Web Develop
in HTML5, the form has added some attributes, the input tag has more type types, some have implemented JS to achieve the effect, but some browsers are not fully supported. Here are some of the H5 changes on the form and input labels.
<! DOCTYPE html>
<title> Form Testing </title>
<meta charset= "Utf-8"/>
<!--in browsers that don't support H5, you can overwrite them with CSS styles-
<style>
Input[type= "Search"] {-webkit-appearance:textfield;}
</style>
<script type= "Text/javascript" src= "Jquery-1.8.3.min.js" ></script>
<body>
<!--in HTML5, the input tag may not be written in the form, but give the form an ID (for example, login) and then add a form= "login" attribute to input.
If you are in the same form, you can submit the form to a different PHP processing file by adding the formaction= "1.php" attribute to input.
You can also increase the formmethod= "get" property to make different text boxes submit different methods. -
<!--If you want to invalidate the entire form validation, you can add the Novalidate property to the form, or you can add the Formnovalidate attribute to input to invalidate a single text box (not to use with required)-
<form action= "demo.php" >
<!--when the text box is either text or textarea type, you can use the placeholder property to display the input prompt when it is not in the input state-
Text:<input type= "text" placeholder= "Please enter user name" Name= "username"/><br/>
<!--search type input for searching keywords
The Autofocus property is used to automatically get the cursor focus, but only one page can be found.
The list property in the input tag is used to give a drop-down selection (similar to select), to be used with the DataList element, DataList to set an ID value,
Add list= "id value" to input.
Search:<input list= "listtest" type= "search" Autofocus name= "Ser"/><br/>
<datalist id= "Listtest" >
<option>www.baidu.com</option>
<option>www.sina.com</option>
<option>www.google.com</option>
</datalist>
<!--tel type input is used to enter the telephone, the title is a cue message, the pattern can write the phone's regular.
The AutoComplete property is used for auto-completion and can be turned off--
Tel:<input type= "Tel" autocomplete= "off" name= "num" title= "can only enter 11 digits! "Pattern=" ^1[34578]\d{9}$ "/><br/>
<!--the URL type of input to enter the URL of the text box--
Url:<input type= "url" required name= "url" title= "Please enter the correct URL"/><br/>
<!--e-mail type input is used to enter the text box for the mailbox, but it does not detect whether the email address exists, and the text box can be empty unless the required attribute is added. -
Email:<input Type=email required name= "email"/><br/>
<!--datetime is used to enter the UTC date and time, and the date format entered is detected on commit
Datetime:<input type= "datetime" Name= "datetime"/><br/>
<!--date Type: Easy to enter as a calendar
Date: <input type= "date" value= "2016-07-05" name= "date"/><br/>
<!--month type is the text box used to enter the month, and the month format is checked when it is submitted
Month: <input type= "Month" value= "2016-07" name= "Month"/><br/>
<!--week used to enter the week number, and his format resembles: 2014-w10, which represents the 10th week of 2014--
Week: <input type= "Week" value= "2016-w28" name= "Week"/><br/>
<!--time for input
Time: <input type= "Time" value= "18:18" name= "Time"/><br/>
<!--datetime-local specifically used to enter local date and time text boxes--
Datetime-local:<input type= "datetime-local" value= "2016-07-05t18:18" name= "local"/><br/>
<!--number type is used to enter numbers, and is detected at commit time. There are min, Max, step (number of steps that differ by number) attribute--
Number:<input type= "number" name= "num" min= "max=" "step=" 3 "/><br/>
<!--range allows you to enter only a text box with values for a range of Min, Max, and step properties, with a default range of 0 to
<!--the output element defines different types of outputs, such as calculation results or script output. It must either belong to a form, write inside the form, or add a form property to it. Output and range are combined as follows-
Range:<input type= "range" onchange= "Range.value=value" min= "Ten" max= "3" step= "/>"
<output id= "Range" >20</output><br/>
<!--color provides a colour picker--
Color:<input type= "Color" name= "Color"/><br/>
<!--file upload text box, the Multiple property allows it to select multiple files; The Accept property restricts the selection of file types--
File:<input type= "file" multiple accept= "image/*" id= "FILE0" name= "file"/><br/>
<!--This section JS implementation of the upload preview--
<script>
$ ("#file0"). Change (function () {
var objurl = Getobjecturl (This.files[0]);
Console.log ("Objurl =" +objurl);
if (Objurl) {
$ ("#img0"). attr ("src", objurl);
}
}) ;
Create a URL that can be accessed to the file
function Getobjecturl (file) {
var url = null;
if (window.createobjecturl!=undefined) {//Basic
url = window.createobjecturl (file);
} else if (window. url!=undefined) {//Mozilla (Firefox)
url = window. Url.createobjecturl (file);
} else if (window.webkiturl!=undefined) {//WebKit or Chrome
url = window.webkitURL.createObjectURL (file);
}
return URL;
}
</script>
<input type= "Submit" Name= "Dosubmit" value= "Commit" >
</form>
</body>New properties of Form form in HTML5 and types of modified input tag elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
