html5表单和文件
浏览数：25 /
时间：2015年06月09日
|
1、新增元素和属性
在HTML4中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把它们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>
在HTML4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在HTML5中可以给所有的提交按钮，诸如<input type="submit">、
<input type="image">、<button type="submit">都增加不同的formaction属性
<form id="testform" action="serve.jsp">
<input type="submit" name="s1" value="v1" formation="s1.jsp">提交到S1
<input
type="submit" name="s2" value="v2" formation="s2.jsp">提交到S2
<input
type="submit" name="s3" value="v3" formation="s3.jsp">提交到S3
<input type="submit">
</form>
PS: 目前尚没有浏览器支持这一属性
placeholder是指当文本框(input、textarea)处于未输入状态时文本框中显示的输入提示。
<input type="text" placeholder="input me"/>
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点
<input type="text" autofocus/>
在HTML5中，为单行文本框(<input type="text">) 增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5新增的元素，改元素类似于选择框，但是当用户 想要设定的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器 显示，可以用CSS将其隐藏。
<input type="text" name="greeting" list="greetings"/>
<!--使用style="display:none;" 将datalist元素设定为不显示-->
<datalist id="greetings" style="display:none;">
<option value="Good Morning">Good Morning</option>
<option
value="Hello">Hello</option>
<option
value="Good Afternoon">Good Afternoon</option>
</datalist>
辅助输入所用的自动完成
<input type="text" name="greeting" list="greetings" autocomplete="on"/>
PS： chrome20不支持
search、tel、url、email等，可参照：
output元素
output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加form属性
<form id="testform">
请选择一个值 <input name="range1" type=range min=0 max=100 step=5/> <output onforminput="value=range1.value">50</output> </form>
PS: 目前只有Opera支持得比较好
2、表单验证
2.1、自动验证
<form method="post">
<input name="text" type="text" required pattern="^\w.*$"/>
<input type="submit"/>
</form>
min与max这两个属性是数值类型或日期类型的input元素的专用属性
step属性控制input元素中的值增加或减少时的步幅
2.2、显示验证
form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法，可以显示地对表 单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。
<script language="javascript">
function check(){
var email = document.getElementById("email");
if(email.value==""){
alert("请输入Email地址");
return false;
}...
}
</script>
<form id="testform" onsubmit="return check();">
Email:
<input name="email" type="email" id="email"/><br/>
<input type="submit"/>
</form> |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
