WEB前端之HTML5[3]~HTML5 表单新增表单元素与属性

HTML5 表单新增表单元素与属性

HTML5 表单新增表单元素与属性
表单内元素的form 属性

表单内元素的formaction属性

表单内元素的formmethod属性

表单内元素的formenctype属性

表单内元素的formtarget属性

表单内元素的aotufocus属性

表单内元素的required属性

表单内元素的labels属性

标签的control属性

文本框的placeholder属性

文本框的list属性

文本框的autoComplete属性

文本框的pattern属性

文本框的SelectionDirection属性

复选框的indeterminate属性

image提交按钮的height属性与width属性

表单内元素的form 属性

在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素制定一个form属性，属性值为该表单的id，这样就可以 声明元素从属于指定表单了。

<!--示例代码-->
<!--HTML4 以前的写法-->
<form id="formId">
<input type="text" name="userName">
<textarea form="formId"></textarea>
</form>
<!--HTML5之后的写法-->
<form id="formId">
<input type="text" name="userName">
</form>
<textarea form="formId"></textarea>
<!--虽然语义没有那么强了，但是在写css的时候变得更方便，清晰了！-->

表单内元素的formaction属性

在HTML4 中，一个表单内的所有元素只能通过表单的action 属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮增加不同的formaction属性，使点击不同的按钮时，可以将表单提交到不同的页面。

<!--示例代码-->
<form id="testForm">
<input type="submit" name="s1" value="第一个提交按钮" formaction="test1.php">
<input type="submit" name="s2" value="第二个提交按钮" formaction="test2.php">
<input type="submit" name="s3" value="第三个提交按钮" formaction="test3.php">
</form>
<!--通过运行以上代码，可以发现，确实是跳转到了不同的页面-->

表单内元素的formmethod属性

在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

<!--示例代码-->
<form id="testForm">
<input type="submit" name="s1" value="第一个提交按钮"       formaction="test1.php" formmethod="get">
<input type="submit" name="s2" value="第二个提交按钮" formaction="test2.php" formmethod="post">
<input type="submit" name="s3" value="第三个提交按钮" formaction="test3.php" formmethod="get">
</form>

表单内元素的formenctype属性

在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前，应该如何对表单内的数据进行编码。

在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

<!--示例代码-->
<form>
<!--表单中的空格被转换为+号，但不对表单数据中的特殊字符进行编码-->
<input type="text" formenctype="text/plain">
<!--不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该值-->
<input type="text" formenctype="multipart/form-data">
<!--这种形式是在发送前编码所有字符，当表单元素的action属性为get时，
浏览器则用当前的编码方式把表单数据转换成一个字符-->
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>

表单内元素的formtarget属性

在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。

在HTML5中，可以对多个按钮分别使用formtarget属性来指定提交后在何处打开所需要加载的页面。

<!--示例代码-->
<form>
<!--  _blank 在新的浏览器页面打开-->
<input type="submit" name="s1" value="第一个提交按钮" formaction="test1.php" formmethod="get" formtarget="_blank">
<!--  _self  在相同的框架frame中打开-->
<input type="submit" name="s1" value="第一个提交按钮" formaction="test1.php" formmethod="get" formtarget="_self">
<!-- _parent 在当前框架的父框架中打开-->
<input type="submit" name="s1" value="第一个提交按钮" formaction="test1.php" formmethod="get" formtarget="_parent">
<!-- _top 在当前窗口中打开-->
<input type="submit" name="s1" value="第一个提交按钮" formaction="test1.php" formmethod="get" formtarget="_top">
<!-- 在指定框架中打开-->
<input type="submit" name="s1" value="第一个提交按钮" formaction="test1.php" formmethod="get" formtarget="framename">
</form>

表单内元素的aotufocus属性

为文本框、选择框、或者按钮控件加上autofocus属性，当页面打开时，该控件自动获得光标焦点。

<!--示例代码-->
<form>
<input type="text" name="userName" autofocus>
<input type="checkbox" name="hobby" value="game"> game
<input type="submit" name="btn_submit" value="提交">
</form>
<!--运行代码，可以发现第一个文本框自动获得焦点了-->

运行结果图：

表单内元素的required属性

HTML5中新增的required属性可以应用在大多数输入元素上,在提交时，如果元素中内容为空白，则不允许提交，同时，在浏览器中显示信息提示文字。

<!--示例代码-->
<form>
<input type="text" name="userName" required>
<input type="submit" name="btn_submit" value="提交" actionform="index.jsp">
</form>

运行结果图：

表单内元素的labels属性

在HTML5 中，为所有可使用标签的表单元素，button、select元素等等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

<!--代码示例-->
<form id="formId">
<label id="label" for="txt_name"></label>
<input id="txt_name" type="text">
<input type="button" id="btnValidate" value="验证" onclick="Validate();">
</form>

<!--js部分-->
<script type="text/javascript">
function Validate() {
//获取到文本框
var txt_name = document.getElementById("txt_name");
//获取到按钮
var button = document.getElementById("btnValidate");
//获取到form表单
var form = document.getElementById("formId");
//判断文本框的内容如果为空
if (txt_name.value.trim() == "") {
//创建一个label控件
var label = document.createElement("label");
//设置lable控件的for属性为文本框的id
label.setAttribute("for", "txt_name");
//把lable添加到button的前面
form.insertBefore(label, button);
//设置lable的提示文字
txt_name.labels[1].innerHTML = "请输入名字";
//设置lable的样式
txt_name.labels[1].setAttribute("style", "color:red;font-size:9px;");
}
}

</script>

标签的control属性

在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。

<!--示例代码-->
<label id="label">邮编:
<!--在label标签内部定义一个input表单元素-->
<input type="text" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick=" setVal()">

<!--js部分-->
<script>
function setVal() {
//获取label元素
var label = document.getElementById("label");
//通过label元素的control属性来获得表单元素input
var txt_box = label.control;
//给input元素设置一个值
txt_box.value = "100000";
}
</script>

文本框的placeholder属性

placeholder 属性是指当文本框处于未输入状态时，显示的输入提示。当文本框处于未输入状态且未获得光标焦点时，模糊显示输入提示文字。

<!--示例代码-->
<form>
<input type="text" name="userName" placeholder="请输入用户名">
<input type="text" name="userPassword" placeholder="请输入密码">
</form>

运行结果如图所示：

文本框的list属性

在HTML5中，为单行文本框添加了一个list属性，该属性的值为某个datalist元素的id，datalist元素也是HTML5新增的元素，该元素类似于选择框，但是，当用户想要设定的值不在选择列表之内时，允许自行输入，datalist元素本身并不显示 ，而是当文本框获得焦点时，以提示输入的方式显示。

<!--示例代码-->
<form>
<!--要保证list的值和下面datalist的id一致哦~-->
<input type="text" name="language" list="languages" >
<!--datalist默认是隐藏的，为了提高各个浏览器的兼容性，把display设置为none，让他显示！-->
<datalist id="languages" style="display: none;">
<option value="Java">Java</option>
<option value="IOS">IOS</option>
<option value="HTML5">HTML5</option>
</datalist>
</form>

运行结果图：

文本框的autoComplete属性

帮助输入所用的自动完成功能，是一个既节省输入时间 ，又十分方便的功能。在HTML5之前，因为谁都可以看见输入的值，所以在安全方面存在缺陷，只要使用AutoComplete属性，安全性方面也可以得到很好的控制。

<!--示例代码-->
<form>
<!--autocomplete有三种写法，第一个是不填写任何东西，第二个是on 第三个是 off。不填写和填写on是一样的，可以显示指定后补的输入数据列表，off相反-->
<input type="text" name="language" autocomplete="" list="languages">
<datalist id="languages" style="display: none;">
<option value="Java">Java</option>
<option value="IOS">IOS</option>
<option value="HTML5">HTML5</option>
</datalist>
</form>

运行结果如图：

文本框的pattern属性

在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定的格式。当输入的内容不属于给定的格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

<!--示例代码-->
<form action = "index.jsp">
请输入内容：
<!--pattern其实就是一个正则表达式的验证-->
<input type="text" pattern="[A-Z]{3}" name="part">
<input type="submit">
</form>

文本框的SelectionDirection属性

这对input元素与textarea元素，HTML5增加了SelectDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，改属性为”forward”,当用户反向选取文字时，改属性为”backward”。当用户没有选取任何文字时，该属性值为”forward”。

<!--示例代码-->
<form>
<input type="text" name="textName">
<input type="button" value="点击我" onclick="test()">
</form>
<!--js部分-->
<script>
function test() {
//获取到text元素
var control = document.forms[0]['textName'];
//直接获取selectionDirection属性并弹出
var Direction = control.selectionDirection;
alert(Direction);
}
</script>

运行结果图：

复选框的indeterminate属性

对于复选框checkbox元素来说，过去只是选取和非选取这两种状态。在HTML5中，可以在JavaScript脚本代码中，对该元素使用indeterminate属性 ，以说明复选框处于“尚未明确是否选取”状态。

<!--示例代码-->
<input type="checkbox" indeterminate id="cb" > 测试
<script>
var cb = document.getElementById("cb");
cb.indeterminate=true;
</script>

image提交按钮的height属性与width属性

针对类型为image的input元素，HTML5新增了2个属性，height，width，分别用来指定图片按钮的高度，宽度。

<!--示例代码-->
<input type="image" src="GIF-FLRN-21.gif" alt="编辑" width="100" height="100">