第十一章 body中的标签（五）

一、form 标签

使用 <form> 标签可以向服务器传输数据，实现用户与服务器的交互。

1.1 用法

示例：

<form action="/demo.html" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

Out:

1.2 属性

New ：HTML5 中的新属性。

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocompleteNew	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method	get post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidateNew	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top	规定在何处打开 action URL。

---

二、input标签

<input> 标签用于创建交互式控件，这类控件是基于 web 表单的，它可以接收用户的数据、信息。

<input> 标签通常是与<form>表单联用。

2.1 用法

示例：

<form action="demo-form.php">
  User name: <input type="text" name="userName"><br>
  Password : <input type="password" name="pwd"><br>
  Email    : <input type="mail" name="email"><br>
  <input type="submit" value="提交">
</form>

2.2 属性

New ：HTML5 中的新属性。

属性	值	描述
accept	audio/video/image/*MIME_type	规定通过文件上传来提交的文件的类型。(只针对type="file")
align	leftrighttopmiddlebottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocompleteNew	onoff	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNew	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
formNew	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
formactionNew	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNew	application/x-www-form-urlencodedmultipart/form-datatext/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNew	getpost	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNew	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew	_blank_self_parent_topframename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNew	pixels	规定 <input>元素的高度。(只针对type="image")
listNew	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNew	numberdate	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
minNew	numberdate	属性规定 <input>元素的最小值。
multipleNew	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
patternNew	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNew	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
readonly	readonly	readonly 属性规定输入字段是只读的。
requiredNew	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")
stepNew	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
widthNew	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

三、textarea标签

<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本

该标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。

3.1 用法

示例：

<textarea rows="10" cols="30">
Text Content...
</textarea>

亲自尝试：

输入你的HTML代码~

3.2 属性

New ：HTML5 中的新属性。

属性	值	描述
autofocusNew	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的列数。
disabled	disabled	规定禁用文本区域。
formNew	form_id	定义文本区域所属的一个或多个表单。
maxlengthNew	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholderNew	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
requiredNew	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrapNew	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

---

四、label标签

<label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。

如：当单选框绑定label后点击label中的文本，即可操作该单选框。

4.1 用法

<form action="/demo.html">
 <label for="male">男</label>
 <input type="radio" name="sex" id="male" value="male"><br>
 <label for="female">女</label>
 <input type="radio" name="sex" id="female" value="female"><br>
 <input type="submit" value="提交">
</form>

Out:

---

4.2 使用说明

• label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

• <label> 标签的 for 属性应当与相关元素的 id 属性相同。

4.3 属性

1. for |element_id|规定 label 与哪个表单元素绑定。
2. form|form_id   |规定 label 字段所属的一个或多个表单。(HTML5新增)

五、select标签

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

亲自尝试：

<h1>Hello Word!</h1>