H5表单新增元素和属性
Posted BetiaStar
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5表单新增元素和属性相关的知识，希望对你有一定的参考价值。
1、form--把要提交的内容指定特定表单，而这个要提交内容不需要被包含在特定表单中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="" id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> </body> </html>
2、formaction--可以使在同一表单中的多个不同提交按钮能提交到不同的页面中去。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formaction</title> </head> <body> <form action="serve.jsp" id="testform"> <input type="submit" name="s1" value="提交到S1" formaction="s1.jsp"> <input type="submit" name="s2" value="提交到S2" formaction="s2.jsp"> <input type="submit" name="s3" value="提交到S3" formaction="s3.jsp"> <input type="submit" value="默认提交"> </form> </body> </html>
3、formmethod--可以给同一表单里下的不同表单元素提供不同的提交方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formmethod</title> </head> <body> <form action="serve.jsp" id="testform"> 姓名：<input type="text" name="name"> <br> <input type="submit" value="post方式提交" formmethod="post"> <input type="submit" value="get方式提交" formmethod="get"> </form> </body> </html>
4、fromenctype对表单元素分别制定不同的编码方式。（后面附上enctype属性值及说明）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formenctype</title> </head> <body> <form action="formserver.php" method="post"> 姓名：<input type="text" name="name"> <br> 文件：<input type="file" name="files"> <input type="submit" value="上传" formaction="upload.php" formenctype="multipart/form-data"> <input type="submit" value="提交"> </form> </body> </html>
enctype属性值及说明
属性值 ：application/x-www-form-urlencoded
说明：在发送前编码所有字符，当表单元素的action属性值为get时，浏览器用x-www-form-urlencoded的编码方式把表单数据转换成一个字符串（形式如?name1=value1&name2=value2...），然后把这个字符串添加到提交的目标URL地址的后面，十七成为新的目标URL地址，为默认属性。
属性值：multipart/form-data
说明：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
属性值：text/plain
说明：表单数据中的空格被转换为 "+"加号，单不对表单数据中特殊字符进行编码。
5、formtarget--表单提交后以哪种方式打开 （属性值及说明后附上）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formtarget</title> </head> <body> <form action="formserver.php"> <input type="submit" name="s1" value="提交S1" formtarget="_self"> <input type="submit" name="s2" value="提交S2" formtarget="_blank"> </form> </body> </html>
target属性值
属性值：_blank
说明：在新的窗口打开
属性值：_self
说明：target属性的默认值，在相同的框架（frame）中打开
属性值：_parent
说明：在当前框架（frame）的父框架（frame）中打开
属性值：_top
说明：在当前浏览器窗口中打开
属性值：framename
说明：在指定的框架（frame）中打开
6、autofocus--自动获得光标焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>autofocus</title> </head> <body> <form action="formserver.php"> <input type="text" name="s1" autofocus="" value=""> </form> </body> </html>
7、required--在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户必须输入内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>required</title> </head> <body> <form action="formserver.php"> <input type="text" required="" name="s1" value=""> <input type="submit"> </form> </body> </html>
8、labels--label标签中for属性相同的一个集合。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>labels属性的使用示例</title> </head> <body> <form action="" id="testform"> <label for="txt_name" id="label">姓名：</label> <input type="text" id="txt_name"> <input type="button" id="btnValidate" value="验证" onclick="Validate()"> </form> <script> function Validate(){ var txtName = document.getElementById(‘txt_name‘), btn = document.getElementById(‘btnValidate‘), form = document.getElementById(‘testform‘); if(txtName.value.trim() == ""){ if(txtName.labels.length == 1){ var label = document.createElement(‘label‘); label.setAttribute(‘for‘,‘txt_name‘); form.insertBefore(label,btn); txtName.labels[1].innerHTML = "请输入姓名"; txtName.labels[1].setAttribute(‘style‘,‘font-size:12px;color:red;margin-right:5px‘); } }else if(txtName.labels.length > 1){ form.removeChild(txtName.labels[1]); } } </script> </body> </html>
9、placeholder 属性提供一种提示（hint），描述输入域所期待的值。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>placeholder属性的使用示例</title> </head> <body> <form action="" id="testform"> <input type="text" id="txt" placeholder="请输入姓名："> <input type="submit" value="提交"> </form> </body> </html>
10、list--通过id指向datalist元素，当用户要的值不存在选择列表中，就让用户自行填写，如果有存在用户就可以选择。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>datalist</title> </head> <body> <form action="form.php" method="get"> 请输入网址: <input type="url" list="list" name="link" /> <datalist id="list"> <option label="谷歌" value="http://www.google.com/" /> <option label="百度" value="https://www.baidu.com/" /> <option label="淘宝" value="https://www.taobao.com/" /> <option label="京东" value="https://www.jd.com/" /> </datalist> <input type="submit" /> </form> </body> </html>
11、autocomplete--规定 form 或 input 域应该拥有自动完成功能，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>autocomplete</title> </head> <body> <form action="form.php" method="post" autocomplete="on"> 用户名:<input type="text" name="username" /><br /> 密码: <input type="password" name="password" autocomplete="off" /><br /> <input type="submit" /> </form> </body> </html>
12、pattern--为input设置正则表达式，在提交时进行检查。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pattern</title> </head> <body> <form action="form.php" method="post" autocomplete="on"> 请输入以小写字母开头数字结尾的两位数: <input type="text" name="test" pattern="[a-z][0-9]" /><br /> <input type="submit" /> </form> </body> </html>
以上是关于H5表单新增元素和属性的主要内容，如果未能解决你的问题，请参考以下文章
H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取