本文主要对HTML5表单新增属性进行详细介绍,并附上实例解析,简单易懂。需要的朋友一起来看下吧
1. 表单内元素的form属性
在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了
<form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea>
2. 表单内元素的formaction属性
在H4中,表单的提交方式
<form action="1.jsp"> </form>
提交整个表单
在H5中,可以为表单的每一个属性添加提交到的jsp页面
<form action="1.jsp"> <input type="submit" action="1-1.jsp">提交到1页面</form> <input type="submit" action="1-2.jsp">提交到2页面</form> <input type="submit" action="1-3.jsp">提交到3页面</form> </form>
3. 表单内元素的formmethod属性
可以对表单的每一个元素指定提交方法
<form action="1.jsp"> <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form> <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面,get提交方法</form> </form>
4. 表单内元素的formenctype属性
同上,作用与每一个元素,代码略
5. 表单的formtarget属性
同上,作用与每一个元素,代码略
6.元素的autofocus属性
为文本框、选择框和按钮控件等加上autofocus属性,画面打开时,将自动获得焦点。
<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>
一个页面上只能有一个控件具有autofocus属性,不能滥用
7. required属性
可以用在大多数输入用的元素,若输入的值为空则不允许提交,游览器显示文字信息提示用户必须输入内容。
8. labels属性
可为表单所有元素添加一个lables属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。
<script type="text/javascript"> window.onload = function () { var text = document.getElementById('text'); var btn = document.getElementById('btn'); var form = document.getElementById('form'); btn.onclick = function() { if (text.value.trim() =="") { //alert(text.labels.length) if(text.labels.length==1) { var label = document.createElement("label"); label.setAttribute("for","text"); form.insertBefore(label,btn); text.labels[1].innerHTML = "请输入姓名"; text.labels[1].setAttribute( "style","font-size:9px;color:red"); } } else if(text.labels.length>1) form.removeChild(text.labels[1]); } } </script> <form id="form"> <label id="label" for="text">姓名:</label> <input id="text"> <input id="btn" type="button" value="验证"> </form>
当用户不输入任何值时,单击验证,文本框旁边会动态的添加一个标签元素,标签元素为“请输入姓名”;当用户在文本框中有输入时,文字为“请输入姓名”的标签将被删除。
9. 标签的control属性
可以在标签(label)内部放置一个表单元素,并通过该标签的control属性来访问该表单元素。
<script type="text/javascript"> function setValue() { console.log(1); var label =document.getElementById("label"); var textbox = label.control; textbox.value = "231456" } </script> <form> <label id="label"> 邮编: <input id="txt_zip" maxlength="6"> <small>请输入6位数字</small> </label> <input type="button" value="设置默认值" onclick="setValue()"> </form>
在游览器中打开页面,单击“设置默认值”按键,文本框中会显示231456.
10. 文本框的placeholder属性
当文本框(text或者textarea)处于为选择状态时输入提示信息(灰色)
<input type="text" palceholder="hahah">
11. 文本框的list属性
结合h5新增的datalist元素,制作提示框
text:<input type="text" name="greeting" list="greetings"> <!-- 使用style="display:none";将datalist元素设置为不显示 --> <datalist id="greetings" style="display:none"> <option value="你是人">你是人</option> <option value="你是猪">你是猪</option> <option value="你是狗">你是狗</option> </datalist>
当你在文本框中输入“你”时,下面会出现三栏提示“你是人”、“你是猪”、“你是狗”,没有关键字将不出现提示
12. 文本框的autocomplete属性
autocomplete有三种值"on"、"off"、""(不指定)。不进行指定时,使用游览器的默认值。使用方法如下
<input type="text" name="greeting" list="greetings" autocomplete="on">
当你在文本框内输入如“我是人”点击提交后,返回前一页,再在文本框中输入“我”,就会出线提示“我是人”。
13. 文本框的pattern属性
相当于直接在html部分用正则表达式判断值输入是否符合要求。
请输入内容:4d7904dd42f2334ca7f582b1bebcfc55
此段代码要求输入一个数字三个大写字母,如果输入不正确,则出现“请与所要求的内容保持一致(谷歌)”的提示。
14. 文本框的selectionDirection属性
针对input的text和textarea元素,当用户在这两个元素中用鼠标选取部分文字时,可以使用该元素来获取选择方向。
<script type="text/javascript"> function alertSelectionDirection() { var control = document.forms[0]['text']; var Direction = control.selectionDirection; alert(Direction); } </script> <form> <input type="text" name="text"> <input type="button" value="惦记我" onclick="alertSelectionDirection()" > </form>
15. 复选框的indeterminate属性
对于复选框来说,过去只有选取和与非选取状态,html5中,可以在js中对该元素使用indeterminate属性,以说明复选框“尚未明确选取”状态。
<script> var cb = document.getElementById("cb"); //将indeterminate的属性设置为true cb.indeterminate = true; </script> <input type="checkbox" indeterminate id="cb">indeterminate属性测试
16. image提交按钮的height属性与width属性
height:指定图片按钮中图片的高度;
width:指定图片按钮中图片的宽度;
<input type="image" src="img/2.png" width="23" height="23">
17. textarea元素的maxlength属性与wrap属性
maxlength :使用整数值进行设定,用于限定textarea元素中可输入文字的个数。
wrap:可指定属性值为soft与hard.当属性为hard时,在没有用回车键而是文字超出一排规定范围而自动换行时,提交表单时会在换行处添加一个换行标志。
以上是具体介绍HTML5表单新增属性的详细内容。更多信息请关注PHP中文网其他相关文章!

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

禅工作室 13.0.1
功能强大的PHP集成开发环境

SublimeText3汉化版
中文版,非常好用

SublimeText3 Linux新版
SublimeText3 Linux最新版

记事本++7.3.1
好用且免费的代码编辑器

Dreamweaver CS6
视觉化网页开发工具