您的位置：首页 > Web前端 > HTML5

HTML5权威指南笔记：12-表单

2017-10-25 11:24 399 查看

1 制作基本表单

制作一个基本的表单需要三个元素： form 、input和button元素

form元素表示HTML页面上的表单


form元素
元素类型	流元素
允许具有的父元素	任何可以包含流元素的元素。但form元素不能是其他form元素的后代元素
局部属性	action 、method 、enctype 、name 、accept-charset 、novalidate 、target和autocomplete
内容	流内容（但主要是label元素和input元素）
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	novalidate和autocomplete屈性是HTML5中新增的
习惯样式	form { display: block; margin-top: oem; }

input元素, 其用途是收集用户输入数据


input元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	name 、disabled 、form、type , 以及取决于type属性值的其他一些属性
内容	无
标签用法	虚元素形式
是否为HTML5新增	否，但是增加了一些新的input元素类型，它们由type属性确定（详见第13章）
在HTML5中的变化	在HTML5 中type属性有一些新的值。此外还添加了一些新的属性，它们需要与type属性的特定值搭配使用
习惯样式	无。这种元素的外观取决于type属性


button元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	name 、disabled 、form 、type 、value 、autofocus , 以及取决千type属性值的其他一些属性
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	新增了一些属性，具体有哪些可用取决于type属性值，详见7节
习惯样式	无

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input name="fave"/>
<button>Submit Vote</button>
</form>
</body>
</html>

2 配置表单


属性	说明	值
action	提交表单时浏览器应该把从用户收集的数据发送到什么地方	服务器网址，如果不设置form元素的action属性，那么浏览器会将表单数据发到用以加载该HTML文档的Url
method	指定了用来将表单数据发送到服务器的HTTP方法	get（默认）和post
enctype	指定浏览器对发送给服务器的数据采用的编码方式	1、application/x-www-form-urlencoded：这是未设置enctype属性时使用的默认编码方式。它不能用来将文件上传到服务器。 2、multipart/form-data：该编码方式用于将文件上传到服务 df93 器。 3、text/plain：该编码方式因浏览器而异
autocomplete	自动填写表单，input元素也有autocomplete属性,会覆盖表单的autocomplete属性	on和off
target	指定表单反馈信息的目标显示位置	_blank、_parent、_self、_top、frame
name	设置表单名称,以便使用DOM,提交表单时其name属性值不会被发送给服务器,不设置name属性，那么用户在其中输入的数据在提交表单时不会被发送给服务器	独一无二的标识符

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form target="_blank" method="post" action="http://titan:8080/form"
enctype="application/x-www-form-urlencoded" autocomplete="off" name="fruitvote">
<input autocomplete="on" name="fave"/>
<input name="name"/>
<button>Submit Vote</button>
</form>
</body>
</html>

3 在表单中添加说明标签（label元素）


label元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	for 、form
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form属性是HTMLS中新增的，详见8节
习惯样式	label { cursor: default; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<!--input元素设置了id属性，并将相关label元素的for属性设置为这个id值。
这样做即可将input元素和label元素关联起来，
有助于屏幕阅读器和其他残障辅助技术对表单的处理。-->
<p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
<p><label for="name">Name: <input id="name" name="name"/></label></p>
<button>Submit Vote</button>
</form>
</body>
</html>

4 自动聚焦到某个input 元素

autofocus属性可以使表单显示出来的时候即聚焦于某个input元素

<input autofocus id="fave" name="fave"/>

5 禁用单个input 元素

disabled属性可以禁用input元素

<input disabled id="name" name="name"/>

6 对表单元素编组（fieldset元素）


fieldset元素
元素类型	流元素
允许具有的父元素	任何可以包含流元素的元素，通常是form元素的后代元素
局部属性	name 、form 、disabled
内容	流内容。在开头位置可以包含一个legend元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form属性是HTML5中新增的，详见8节
习惯样式	fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end : 0.75em; padding-after: 9.625em; border: 2px groove; }

legend元素为fieldset元素添加说明标签


legend元素
元素类型	无
允许具有的父元素	fieldset元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	legend { display: block; padding-start: 2px; padding-end: 2px; border: none; }

1. legend元素必须是fieldset元素的第一个子元素

2. 通过设置fieldset元素的disabled属性，可以一次性地禁用多个input元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<!--使用fieldset进行分组-->
<fieldset>
<!--使用legend设置分组的说明标签-->
<legend>Enter Your Details</legend>
<p><label for="name">Name: <input id="name" name="name"/></label></p>
<p><label for="name">City: <input id="city" name="city"/></label></p>
</fieldset>
<!--添加disabled进行禁用-->
<fieldset disabled>
<legend>Vote For Your Three Favorite Fruits</legend>
<p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
<p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>

7 使用button 元素

button元素的type属性的值

submit：表示按钮的用途是提交表单

reset：表示按钮的用途是重置表单

button：表示按钮没有具体语义

7.1 用button元素提交表单

type属性设置为submit时button 元素的额外属性


属性	说明
form	指定按钮关联的表单，详见8节
formaction	覆盖form元素的action属性，另行指定表单将要提交到的URL。关于action属性，详见2.1节
fornmethod	覆盖form元素的method属性。关于method属性，详见2.2节
formenctype	覆盖form元素的enctype属性，另行指定表单的编码方式。关于enctype属性，详见2.3节
formtarget	覆盖form元素的target属性。关于target属性，详见2.5节
formnovalidate	覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查。关于对输人数据的检查，详见第14章

例子：

<button type="submit"
formaction="http://titan:8080/form"
formmethod="post"
formenctype="application/x-www-form-urlencoded"
formtarget="_blank"
formnovalidate="formnovalidate">
Submit Vote
</button>

7.2 用button元素重置表单

将button元素的type属性设置为reset, 那么按下按钮会将表单中所有input元素重置为初始状态

<button type="reset">Reset</button>

7.3 把button作为一般元素使用

将button元素的type属性设置为button, 那么该button元素就仅仅是一个按钮，但是可以在按下按钮时可以用JavaScript执行一些操作。通过这种方法即可用button元素实现自定义的行为。

<button type="button">Do NOT press this button</button>

8 使用表单外的元素

在HTML4中， input 、button和其他与表单相关的元素必须放在form元素中。在HTML5中，与表单相关的元素都定义了一个form属性，将其form属性设置为相关form元素的id属性值即关联

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="voteform" method="post" action="http://titan:8080/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
</p>
</form>
<p>
<label for="name">Name: <input form="voteform" id="name" name="name"/>
</label>
</p>

<button form="voteform" type="submit">Submit Vote</button>
<button form="voteform" type="reset">Reset</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航