HTML5 Secrets
Let's start by sending the code in the form type. Feel HTML5 input tag, almost the previous use of JS verified all pass,
Placeholder for text in input.
Commonly used data validation, such as email, url, min, max, required and so on.
The selection of the numerical value is convenient and can be used to drag the slider in the right way.
| code is as follows |
copy code |
|
<form>
<!--HTML5 added placeholder text The
Text property can have placeholder text <input Style= "width:200px" name= "q" placeholder = "Search bookmarks and History" AUTOFOCUS/><HR/>
<!--type= " Email ", the data validation is very convenient;
Type=email data validation <input style=" width:300px "type=" email "name=" email "placeholder = "Please input your e-mail address"/> <!--This is a control that can be dragged to set the value;
Slide the selection <input type= "range" min= "0" max= "value=" 1 "/><HR/>
<!--min, max, value, required, etc.
Data validation <input type=" Number "min=" 0 "max=" value= "6" required= "required"/><HR/>
<input type= "Submit"/> </form> |
Example
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "UTF8"/>
<script type= "Text/javascript" >
When dragging
function drag (EV)
{
Set a key value of text, the value of ev.target.id data, when the ev.target.id is the ID of the current element, that is DRAG1
Ev.dataTransfer.setData ("Text", ev.target.id);
}
function DragOver (EV)
{
Execution prevents the browser from default actions on data or elements
Ev.preventdefault ();
}
When the element is dropped
function Drop (EV)
{
Ev.preventdefault ();
var data = Ev.dataTransfer.getData ("Text");
Ev.target.appendChild (document.getElementById (data));
}
</script>
<body>
<form>
<!--HTML5 added placeholder text-->
The Text property can have placeholder text <input style= "width:200px" name= "q" placeholder = "Search bookmarks and History" autofocus/><!--type= "email", data validation is very convenient-->
Type=email Convenient data validation <input style= "width:300px" type= "email" name= "email" placeholder = "Please input your e-mail address "/><!--This is a control that can be dragged to set the value-->
Slide Select value <input type= "range" min= "0" max= "1" value= "/><!--min, max, value, required, etc.-->
Data validation <input type= "number" min= "0" max= "ten" value= "6" required= "required"/>
<input type= "Submit"/></form>
<!--is the element can drag draggable= "true"-->
<div style= "border:1px solid #000 width:100px;height:100px;padding:10px;" ondrop= "Drop (event)" Ondragover= " DragOver (event) "></div>
<div id= "Drag1" style= width:100px;height:100px;background:yellow;margin:0; "draggable=" true "ondragstart =" drag (event) "></div>
</body>
|
