HTML5学习笔记(四):H5中表单新增元素及改良

时间:2022-04-04 06:11:40

方便布局

表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下:

 <form id="test" action="test.php" method="get">
<input form="test" type="text" name="name"/>
</form>
<input form="test" type="submit" value="确定"/>

可指定提交按钮的目标及方法

在HTML5之前,一个表单只能填写一个action及一个method,在HTML5中每个提交按钮都可以指定自己的action及method,如下:

 <!-- HTML5以前的表单写法 -->
<form action="test.php" method="get">
<input type="text" name="name"/>
<input type="submit" value="确定"/>
</form>
<!-- HTML5的表单写法 -->
<form>
<input type="text" name="name"/>
<input type="submit" value="确定POST" formaction="test1.php" formmethod="post"/>
<input type="submit" value="确定GET" formaction="test2.php" formmethod="get"/>
</form>

enctype和formenctype

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

  • application/x-www-form-urlencoded:表单数据被编码为名称/值对。这是默认的编码方式(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。
  • multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
  • text/plain:空格转换为 "+" 加号,但不对特殊字符编码。

同上,enctype也可以针对每个提交按钮进行指定,使用formenctype即可。

target和formtarget

类似于<a>标签的target属性,form标签的target属性控制提交数据之后,action指向的地址的打开方式,其可填写的值于<a>标签的值意义和写法完全一致,默认为_self。

同上,每个提交按钮也可以配置自己的target,使用formtarget即可。

autofocus

使用该属性,可以在页面打开时将焦点自动设定到设置了该属性的组件上。

<input type="text" name="name" autofocus/>

required

指示输入字段的值是必需的,如果不填值就提交会出现提示并且也不会有提交的动作发出。

<input type="text" name="name" required/>

label

在我们使用单选框或复选框时,一般这个后面都会跟上一段文字,但是我们点击这段文字时却是无效的,label可以用来将文字和指定的单选框、复选框或者任意的控件进行绑定,我们可以点击文字就如同点击到对应的控件一般:

 <!-- 直接包含写法 -->
<form>
<label>
<input type="checkbox" value="value">
请选择这个复选框
</label>
</form>
<!-- 通过for进行指定 -->
<form>
<input type="checkbox" value="value" id="cb">
<label for="cb">请选择这个复选框</label>
</form>

标签的control属性

标签的control属性指定了标签包含或指向的控制对象,可以通过获取该属性来拿到对应的控件,如果标签包含了多个控件,则该属性表示第一个控件。

 <script>
function setDefault() {
var label = document.getElementById("label");
var input = label.control;
input.value = "123456";
}
</script>
<form>
<label id="label">
<input type="text">
</label>
<input type="button" value="点击设定默认值" onclick="setDefault()">
</form>

placeholder

输入框指定了该属性后,会作为一个提示文字在输入框没有输入时显示。

<input type="text" placeholder="请输入手机号">

带提示及可输入的文本框

在HTML5中可以通过datdlist来定义一个带有下拉提示的输入框,如下:

 <form>
<input type="text" list="dl">
<datalist id="dl">
<option value="HTML5">HTML5学习</option>
<option value="Android">Android学习</option>
<option value="IOS">IOS学习</option>
</datalist>
</form>

除了可以输入预订的信息外,还可以输入任意的信息。

autocomplete

在使用了autocomplete标记的输入框进行过一次提交之后,下一次再次输入会出现上次输入的文本,可以实现快速补齐的功能。

 <form action="test.php" method="get" autocomplete="on">
<input type="text">
<input type="submit">
</form>

pattern属性

pattern属性可以设定为一个正则表达式,为输入框设定了pattern属性之后,在提交时会对输入的文本进行检查,当发现不能匹配时会进行提示:

 <form action="test.php" method="get">
<input type="text" pattern="[A-Z]{3}" name="part">
<input type="submit">
</form>

上面的示例,只有在输入3个大写字母之后才能进行正确提交。

input元素的新增种类

在HTML5中,对input元素的种类进行了增加,用url类型来作为说明,使用了url类型,则在提交时,会验证填写的内容是否为url地址,实际上是方便了开发者,免去了常用的验证代码的编写。

新增种类如下:http://www.w3school.com.cn/html5/html_5_form_input_types.asp

有个不好的地方是,每个浏览器对新类型的外观设计都是不一样的,所以为了追求统一性,在大网站上,还是需要使用风格统一的类型,比如日期选择器等,个人感觉在编写快速小应用时可以使用到这些新增的类型。