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:该编码方式用于将文件上传到服务器。 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>