html5新增的元素与属性

1.form表单属性
2.fornaction提交到jsp中


3.formmethod属性(form表单提交不同的方法)

   
   
<form id="test">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="aside.html">第一个月面
<input type="submit" name="s1" value="v1" formmethod="post" formaction="aside.html">第2个页面
</form>
4.formenctype属性  
formenctype="text/plain"表单中的空格转换成+号,但是对特殊的字符不作处理
formenctype="multipart/form-date"不对字符进行编码,在使用文件上传,控件的表单时必须使用该值
formenctype="application/x-www-form-urlencoded"编码所有的字符,当表单元素,当action属性为get时,浏览器则用当前的编码方式,把表单装换成字符。
5.formtarget属性

formtarget="_blank"在新的浏览器打开
formtarget="_self"在当前的页面中打开
formtarget="_parent在当前父类浏览器打开
formtarget="_top"在的浏览器打开
formtarget="framename"在框架中打开
6.autofocus属性

7.required属性(提交为空时提醒)

   
   
<form action="" >
<input type="text" required="required">
<button type="submit">提交</button>
</form>


8.labels属性

   
   
<body>
<script>
function Validate(){
var txtName=document.getElementById("txt_name");
var button=document.getElementById("btnValidate");
var form=document.getElementById("testform");
if(txtName.value.trim()==""){
var label=document.createElement("label");
label.setAttribute("for","txt_name")
form.insertBefore(label,button);
txtName.labels[1].innerHTML="请输入姓名";
txtName.labels[1].setAttribute("style","font-size:9px;color:red");
}
}
</script>
<form id="testform" action="" >
<label id="label" for="txt_name"></label>
<input id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
</body>


9.control属性

  
  
body>
<script>
function setValue(){
var label=document.getElementById("label");
var textbox=label.control;
textbox.value="010101";
}
</script>
<form>
<label id="label">
邮编:<input id="txt_zip" maxlength="6">
<small>请输入六位数</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
</body>


10.placeholder属性(文本框的提示

   
   
body>
<input type="text" placeholder="请输入用户名">
</body>


11.list属性(类似下拉菜单)可以自己输入
   
   
<form >
<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none">
<option value="HTML5学习">HTML5学习</option>
<option value="web学习">web学习</option>
<option value="ios学习">ios学习</option>
</datalist>
</form>


12.AutoComplete属性(后台提交的安全性)

   
   
<body>
<form>
<input type="text" name="greeting" autocomplete="off" list="greetings">
<datalist id="greetings" style="display:none">
<option value="HTML5学习">HTML5学习</option>
<option value="web学习">web学习</option>
<option value="ios学习">ios学习</option>
</datalist>
<input type="submit" value="提交">
</form>
</body>


13.文本框的pattern属性(输入的格式师是否正确)

   
   
<body>
<form>
<input pattern="[A-Z]{3}" name="part">
<input type="submit" value="提交">
</form>
</body>


14.文本框的SelectionDirection属性   
15.indeterminate属性





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值