TML5从入门到精通，兄弟连京修随堂笔记（二）HTML的框架结构，每日都有新内容，订阅走一波

HTML5的form标签

问：网站怎样与用户进行交互? 答案:使用HTML表单(form).

表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.

form 标签 -- 代表HTML表单

form标签是成对出现的,以<form>开始,以</form>结束

常用属性.

action -- 浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php)

method -- 数据传送的方法

get -- 此方式传递数据量少,但是传递的信息显示在网址上。

post --此方式传送信息多,而且不会把传递信息显示在网址上

enctype -- 表示将数据发送到服务器时浏览器使用的编码类型

application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。

multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.

text/plain -- 以纯文本形式进行编码,其中不含任何控件或格式字符

HTML5 input标签

input 标签 -- 代表HTML表单的单行输入域

input标签是单独出现的,<input />

属性.

type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)

name – 此表单项名称

value -- 输入域的值

size -- 输入域的长度

maxlength -- 输入域最多可以输入文字的长度

checked -- 如果是选择型的输入域,代表已经被选择，值为checked

readonly -- 输入域可以选择,但是无法修改 ，值为readonly

disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled="disabled"

accesskey -- 表单的快捷键访问方式，如值为h即按Alt+h快捷键。

tabindex -- 输入域的"tab"键遍历顺序

src -- 当使用图片来表示按钮时,代表图片的位置(URI)

alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。

type属性 -- 代表HTML表单,单行输入域(框)的表现方式

type属性取值:

text -- 文字输入域(输入型)

password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)

file -- 可以输入一个文件路径(输入型)

checkbox -- 复选框.可以选择零个或多个(选择型)

radio -- 单选框.只可以选择一个而且必须选择一个(选择型)

hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器

button -- 按钮(点击型)

image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)

submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)

reset -- 重置按钮,可以把表单中的信息清空(点击型)

select 标签 -- 选择列表标签

select标签是成对出现的,以<select>开始,以</select>结束

此标签中的每对option标签代表一个选择项

属性:

name – 表单项名称

size -- 选择域的高度

multiple -- 可以有多个选择

disabled -- 以灰色显示,在表单中不起任何作用

tabindex -- 使用"tab"键的遍历顺序

一篇讲了3个新的表单标签，下面小编再来介绍HTML5给表单带来的新属性。

autocomplete 属性

可用在form标签和input标签，实现自动完成输入功能。它的值为：on（开启）/off（关闭）。

为了完成表单的快速输入，提高网站的交互性，autocomplete=“on“，浏览器提供了自动补全的功能。在用户输入的内容被保存的情况下，如果用户在表单再次输入相同的或部分相同的字符时，浏览器会提示相关内容，从而让你快速的完成表单的输入。

我们来看一个例子，我们在form标签就开启autocomplete 属性。然后在其中一个子节点input标签关闭autocomplete 属性。

 <form autocomplete="on">
 <input type="text">
 <input type="text" autocomplete="off">
 </form>

这种写法的结果就是：第一个input标签实现了开启autocomplete，而第二个标签因为自己重新设置了autocomplete属性为off关闭，所以第二个输入域没有实现自动补全的效果。

novalidate属性

在提交表单时不应该验证 form 或 input 域。

如果表单中有一个输入域的类型是email，那么在提交表单的时候，浏览器会验证你输入的字符格式是否合法，若非法（不符合邮件格式类型），就会提示错误，阻止提交表单。

我们来看这个例子：

 <form>
 <input type="email">
 <input type="submit" value="save">
 </form>

我们试着输入一个非法的email邮箱地址，然后提交，如下图：

浏览器会提示你邮箱地址格式不对，而novalidate属性，就是为了让表单可以忽略验证，直接提交表单数据。

它的用法如下：

 <form novalidate>
 <input type="email">
 <input type="submit" value="save">
 </form>

autofocus 属性

在页面加载时，域自动地获得焦点。

这个很好理解，用法也很简单：

 <input type="text" autofocus>

设置了autofocus 属性的输入域，就会自动获得焦点，如图：

如果一个页面存在多个设置了autofocus属性的input标签，则只有第一个input标签才会获得焦点，其它的失效。

form 属性

规定input输入是属于哪个表单的。

这种情况，一般只会在当input标签不是form标签的子节点的情况下才会使用。如：

 <form id="demo">
 <input type="text">
 <input type="submit" value="save">
 </form>
 <input type="text" form="demo">

代码中一个input标签输入域放在了form表单的外面，但是表单提交的时候，也会带上这个输入域的数据。原因是因为外面的input标签通过form属性绑定了form表单的id。相当于对它说：“你提交数据的时候，别只顾着你的子节点啊，还记得带上我啊。“

觉得不错的朋友点个关注哩，后面小编会分享更多干货。

EB前端现在是时下较火的编程语言之一，但是对于怎么学习或者学习哪些内容很多朋友都是不了解的，针对以上内容小猿圈web前端讲师总结了form如何关闭自动完成功能的方法？希望对你的前端学习有一定的帮助。

什么是HTML5的form自动完成功能？

首先，HTML5 中有个新属性autocomplete ，autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

如：

<form autocomplete="on">

First name:<input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>

<p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>

会发现，autocomplete="on"的会被“记录下来”，而E-mail的autocomplete="off"，再次输入时不会被“记录”。这就是“HTML5中form的自动完成功能”啦！

如何关闭自动完成功能

有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

关闭输入框的自动完成功能有3种方法：

1、在IE的Internet选项菜单里的内容--自动完成里面设置

2、设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能

（关闭整个表单（form）自动提示功能）

3、设置输入框(input)的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能（关闭密码域的自动完成）

测试代码：（在每个form输入文字然后提交，然后再回来看看能否自动完成，注意要提交后才能有历史记录，才可能自动完成；提交后页面可能出错，不用管它，后退回去即可）

打开自动完成功能的Form<br>

<form name="form1" autocomplete="on">

打开自动完成功能的输入框

<input type="text" autocomplete="on" ><br>

关闭自动完成功能的输入框

<input type="text" autocomplete="off"><br>

<input type="submit" value="提交"><br>

</form>

关闭自动完成功能的Form<br>

<form name="form1" autocomplete="off">

打开自动完成功能的输入框

<input type="text" autocomplete="on"><br>

关闭自动完成功能的输入框

<input type="text" autocomplete="off"><br>

<input type="submit" value="提交"><br>

</form>

建议：不要全部关闭自动完成功能，根据需要禁用一部分自动完成功能即可，如果你觉得浏览器自带的自动完成功能还不够强大，可以使用jquery插件来实现更加强大的自动提示完成功能。

小猿圈web前端讲师认为：授之以鱼更授之以渔，想要学好web前端首先需要就是端正自己的学习态度，明确学习目标，这样才能坚持学习。想要了解更多关于前端方面的小伙伴，可以关注小猿圈每天的动态，会不定期更新互联网编程知识，希望对你的学习有一定的帮助。