【HTML基础】第八课、HTML基础之标签(Ⅳ)

---

表单和表单元素标签

• 表单：是一个区域，采集用户信息
• 表单元素：文本框、按钮、单选、复选、下拉列表、文本域

---

一、表单 form

<form> 标签用于为用户创建 HTML 表单。表单内包含表单元素

• 表单作用：表单用于向服务器传输数据。

<form> 标签，用法如下：

	<form action="URL">
		表单元素
	</form>

action 为 form 标签的一个元素，该元素的值为 URL 用于规定当提交表单向何处发送表单数据
<form> 其他的更多属性：传送门

---

二、表单元素标签 input select textarea 等等

1. 文本框和密码框

即 <input> 标签的 type 属性为 text 或者 password

	<form>
		<input type="text" name="text"/>	<!--当前为文本框-->
		<input type="passowrd name="psd" />	<!--当前为密码框-->
	</form>

通常每个表单都会带有一个 name 属性，这个name 属性就是这个表单数据的名字

• name属性的作用：当表单的元素的数据提交到后端的时候，那么这时候后端在处理数据的时候，就需要知道这个数据来源于哪个表单元素。这就是他的作用
• 简单的概括一句，就是 告诉后端要处理的数据来源于哪个表单元素

2. 提交按钮、重置按钮

即 <input> 标签的 type 属性为 sublime 或者 reset

	<form>
		<input type="sublime" value="提交按钮"/>
		<input type="reset" value="重置按钮" />
	</form>

value 属性：input 元素的值。

• 在按钮中也就是 <input> 标签显示的文本

3. 单选框、复选框

单选框：顾名思义 只能选择一个选项，复选框即可以选择多个选项

	<form>
		<input type="radio 或 checkbox" 
			value="值" name="名称" checked="checked">
	</form>

checked 属性：当设置 checked="checked"时，该选项被默认选中

	性别：
	<input type="radio" value="boy" name="gender" checked="checkbox"/>男
	<input type="radio" value="girl" name="gender"/>女
	<br />
	爱好：
	<input type="checkbox" value="1" name="music">音乐
	<input type="checkbox" value="2" name="sport">体育
	<input type="checkbox" value="3" name="code" checked="checkbox">写代码

• 对于单选框，我们要注意的是 name的属性的值要一致！！！
• 对于复选框，name 的属性的值可以不用

4. 下拉列表框

	<select>
		<option>选项1</option>
		<option selected="selected">选项2</option>
	</select>

selected 属性：当设置 selected="selected"时，该选项被默认选中，作用和上述的 checked 属性相同。

5. 文本域

	<textarea rows="行数" cols="列数">文本</textarea>

• 在 <textarea> 标签内写下的文字，会默认的出现到编辑区域内，作为提示性文本

---

各位小伙伴可以自行复制代码到本地新建网页预览一下，代码如下

（补充：表单元素没有自动换行的效果，为了展示更美观，所以我加上了 <br />标签进行换行）

<form>
		账号：<input type="text" name="userName"/>
		<br />
		密码：<input type="password" name="userPsd"/>
		<br />
		性别：
		<input type="radio" value="boy" name="gender" checked="checkbox"/>男
		<input type="radio" value="girl" name="gender"/>女
		<br />
		爱好：
		<input type="checkbox" value="1" name="music">音乐
		<input type="checkbox" value="2" name="sport">体育
		<input type="checkbox" value="3" name="code" checked="checkbox">写代码
		<br />
		年级：
		<select>
			<option>大一</option>
			<option>大二</option>
			<option>大三</option>
			<option>大四</option>
			<option selected="selceted">请选择</option>
		</select>
		<br />
		个人简介：
		<br />
		<textarea cols="50" rows="10">
			在这里输入内容...
		</textarea>
		<br />
		<input type="submit" value="点击确认" />
		<input type="reset" value="点击重置" />
</form>