首页 > 代码库 > HTML5之表单新增属性
HTML5之表单新增属性
之前已经接触过的新增属性：autocomplete、autofocus、list、multiple、placeholder、required、min、max、step
from属性：将表单外的内容与表单进行关联
<form action="" id="kc" >
<input type="text" name="dd" form="kc" >(不再form表单中)
novalidate属性：设置数据提交时不进行验证
enctype属性：仅作了解，规定在发送服务器之前应该如何对表单数据进行编码。通常情况下我们使用默认值即可
accept-charset属性：仅作了解accept-charset属性规定服务器处理表单所接受的字符集。accept-charset属性允许你指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据，通常情况下我么使用默认值即可，此属性的默认值是unkonwn，表示表单的字符集与包含表单的文档字符集相同。
lable元素及其属性
用来为input元素定义标注，建立一个与之相关联的标签
for属性，让标签与指定的input元素建立关联
<input type="checkbox" name="dd" form="kc"id="A" >
<label for="A">aa</label>
将input元素包含在lable标签中
可通过accesskey建立快捷键
lable属性
在option元素中可以设定比标签内容更优先的选项
<optgroup label="JAVA系列">
<option lable="java" >javame</option>
<option>javase</option>
<option>javaee</option>
</optgroup>
optgroup的分组名称
<h3>查找你要收看的课程</h3>
<select>
<optgroup label="HTML5系列">
<option>HTML5</option>
<option>CSS3</option>
<option>javascript</option>
</optgroup>
<optgroup label="JAVA系列">
<option>javame</option>
<option>javase</option>
<option>javaee</option>
</optgroup>
</select>
textarea元素
用来建立多行输入文本框
元素标签中的内容将以文本框默认值的形式呈现
不仅可以用在表单中，也可以在其他块元素或内联元素中
textarea元素的属性
name、disable。readonly、form、reauired/autofocus/placeholder属性，这些属性的用法之前都有提到
rows属性：设置多行文本的行数(高度)
cols属性：设置多行文本的每行显示的字数(宽度)
button元素
用来建立一个按钮从功能上来说，与input元素建立的按钮相同
button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
button元素的属性
type属性：可以设置三个值，submit、reset、button与input元素设置的按钮含义相同
name/value/disable属性：与input的用法相同
autofocus属性：设置按钮自动获得焦点
form属性：设定按钮隶属于哪一个或多个表单
formmethod属性：设定表单的提交方式，将覆盖原本的提交方式
formnovalidate属性：设定表单将会覆盖原本的novalidate属性
formaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
fromenctype：指定表单的数据发送类型，将覆盖原本的enctype属性设定
fromtarget属性：将覆盖原本的target属性设定。
重要提示：如果表单中使用button元素，不同的浏览器会提交不同的值，ie将提交button元素之间的文本值，二其他浏览器将提交value属性的内容，最好就是在表单中使用input元素来创建按钮，其他地方使用button创建按钮。
表单重写
HTML的拖放功能
1.HTML5拖放(Drag和drop)是HTML5标准的组成部分
2.拖动开始：ondragstart：调用了一个函数，drag(event)，它规定了被拖动的数据
3.设置拖动数据：setData()：设置被拖动的数据类型和值
4.放入位置：ondragover()：事件规定在何处放置被拖动的数据
5.放置：ondrop：当放置被拖数据时，会发生drop事件
<style type="text/css"> .box{ width:400px; height:400px; } #box1{ float:left; background-color:#CCC; } #box2{ float:left; background-color:red; } </style> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <img id="img1" alt="" src="img/1.jpg"> <div id="msg"></div> <script type="text/javascript"> var box1Div,msgDiv,img1,box2Div; window.onload = function(){ box1Div = document.getElementById("box1"); box2Div = document.getElementById("box2"); msgDiv = document.getElementById("msg"); img1 = document.getElementById("img1"); /* box1Div.ondragenter = function(e){ showObj(e); }; */ box1Div.ondragover = function(e){ e.preventDefault();//阻止系统的默认事件 }; box2Div.ondragover = function(e){ e.preventDefault();//阻止系统的默认事件 }; img1.ondragstart = function(e){ e.dataTransfer.setData("imgId","img1");//第一个参数指定图片的id，第二个自己设置的图片id }; box1Div.ondrop = dropImgHandle; box2Div.ondrop = dropImgHandle; }; function dropImgHandle(e){ showObj(e.dataTransfer); e.preventDefault(); //创建节点 var img = document.getElementById(e.dataTransfer.getData("imgID")); e.target.appendChild(img); } function showObj(obj){ var s= ""; for(var k in obj){ s += k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; } </script> </body>
本地拖拽
<style type="text/css"> #imgContainer{ background-color:#CCC; width:500px; height:500px; } </style> </head> <body> <div id="imgContainer"></div> <div id="msg"></div> <script type="text/javascript"> var imgContainer,msgDiv; window.onload = function(){ imgContainer = document.getElementById("imgContainer"); msgDiv = document.getElementById("msg"); imgContainer.ondragover = function(e){ e.preventDefault(); } imgContainer.ondrop = function(e){ e.preventDefault(); var f = e.dataTransfer.files[0]; var fileReader = new FileReader(); fileReader.onload = function(e){ imgContainer.innerHTML = "<img src=http://www.mamicode.com/""+fileReader.result+"\">" } fileReader.readAsDataURL(f); }; }; function showObj(obj){ var s=""; for(var k in obj){ s +=k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; } </script> </body>
HTML5之表单新增属性