【12】HTML基础（3）——HTML常用标签⑧

【12】HTML基础（3）——HTML常用标签⑧

十三、表单的了解和制作

（一）表单了解：

1.表单是什么？

下图举例：

---

2.表单的作用？

• 用于收集用户输入信息，HTML表单用于搜集不同类型的用户输入。

---

3.表单的组成？

• 在HTML中，一个完整的表单通常由3个部分构成：

（1）表单域

• 作用：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法；
• 重要性：如果不定义表单域，表单中的数据就无法传送到后台服务器。

（2）提示信息

• 作用：一个表单中通常还需要包含一些说明性的文字；
• 重要性：提示用户进行填写和操作。

（3）表单控件（也称为表单元素）

• 作用：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等；
• 重要性：提升用户体验，表现表单功能。

---

（二）表单的制作：

1.表单域标签：

（1）语法：

• 使用<form>标签进行定义；
• <form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在—个<form>标签之内；
• <form>标签为双标签，容器级标签。
• <form>标签通过对应属性，规定提交数据的方法和提交位置。

（2）<form>常见属性：

form常见属性	属性值	含义
action	url	指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	自定义名称	规定表单的名称自定义名称

• 示例：

<form action="xx.php" method="post/get" name="message">
提示信息及表单控件书写位置
</form>

---

2.表元素标签：

（1）<input>标签：

语法：

• <input>标签是最重要的一个表单元素；
• <input>标签为单标签，本身相当于一个特殊的文本；
• <input>标签需要通过其标签属性实现各种功能。

常见属性：

属性名	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选框
	checkbox	复选框
	button	普通按钮
	reset	重置按钮
	submit	提交按钮
	image	图像形式的按钮
	file	定义输入字段和"浏览"按钮，供文件上传
	hidden	定义隐藏的输入字段
name	自定义	定义控件的名称
value	自定义	定义控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义选框控件的默认被选中项
maxlength	数字	定义允许输入的最多字符数

---

注意：

其中type属性的属性值不同，其input标签的形态不用
①

属性名	属性值	描述
type	text	单行文本输入框

定义提供用户输入的单行文本的输入框，不能输入多行文字。

示例：

<input type="text" value="默认输入文本">

浏览器显示：

---

②

属性名	属性值	描述
type	password	密码输入框

定义提供用户输入的密码框。password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
示例：

<input type="password">

浏览器显示：

---

③

属性名	属性值	描述
type	radio	单选框

定义提供用户点击选择的单选框。
单选框一般都是成组出现，多个单选框组成一组选择的情况。
同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现。
示例：

<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女

浏览器显示：

只能选择其中一项：

---

④

属性名	属性值	描述
type	checkbox	复选框

定义提供用户点击选择的多选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
同一组复选框最好也设置相同的name属性。
示例：

<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>代码
<input type="checkbox" name="hobby"/>运动

浏览器显示：

三项可以同时选择：

---

⑤四种形式的按钮

属性名	属性值	描述
type	button	普通按钮
type	reset	重置按钮
type	submit	提交按钮
type	image	图像形式的按钮

示例：

<input type="button"/>
<input type="reset"/>
<input type="submit"/>
<input type="image"/>

浏览器显示：

---

⑥

属性名	属性值	描述
type	file	定义输入字段和"浏览"按钮，供文件上传

定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。
示例：

<input type="file">

未选择文件时，浏览器显示：

选择文件时（只能选择一个），浏览器显示：

★使用input的multiple属性，可以决定是否可以选择多个文件。
示例：

<input type="file" multiple="multiple" />

未选择文件时，浏览器显示：

选择文件时（可以选择多个文件），浏览器显示：

---

其它常用属性详细解析：

①

属性名	属性值	描述
checked	checked	定义选框控件的默认被选中项

默认选中设置，单选框和复选框都可以提前设置默认选中项。
如果不设置表示默认没有选中。属性值如果设置为"checked"，表示该项默认被选中。
示例：

<input type="radio" name="sex" checked="checked"/>男
<input type="checkbox" name="hobby" checked="checked"/>唱歌

浏览器显示：

---

（2）<textarea>标签：

1.语法：

①<textarea>标签定义，制作可以输入多行文本的区域；
②<textarea>标签为双标签，本身相当于一个特殊的文字；
③文本域可以设置默认输入的文字，在双标签之间书写默认文字。

2.属性：

有两个标签属性，可以设置显示区域大小。
①rows∶ 行；属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。
②cols∶ 列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。
示例：

<textarea cols="30" rows="10">默认输入文字</textarea>

浏览器显示：

---

（3）下拉菜单标签：

HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中—项。
比如如下情况：

1.语法：

下拉菜单需要至少两个标签完成结构∶
①<select>∶选择，表示定义下拉菜单整体结构；
②<option>∶选项，表示定义下拉菜单的每一项；
★两个标签都是双标签，文本级标签。
★关系∶select>option，option可以有任意多项。

<select>
   <option>广州</option>
   <option>北京</option>
   <option>重庆</option>
   <option>上海</option>
</select>

补充：分组管理<optgroup>标签
下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
语法：
①<optgroup>是一个双标签。关系∶ select>optgroup>option；
②可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签
<optgroup>是不能被点击选择的。
示例：

<select>
   <optgroup label="国内">
      <option>广州</option>
      <option selected="selected">北京</option>
   </optgroup>
   <optgroup label="国外">
      <option>伦敦</option>
      <option>巴黎</option>
   </optgroup>
<select>

浏览器显示：

2.属性：

①默认选中项selected属性
默认情况下，选中的是第—项；
下拉菜单可以通过给<option>标签设置selected属性，属性值为selected，更改默认选中项。

<option selected="selected">北京</option>

---

（4）<label>标签：

语法

• <label>标签的作用是帮表单元素定义标注（标记）；
• 如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

绑定方法

• 给表单元素设置id属性→将需要绑定的其他内容用<label>标签包裹→给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。

<input type="checkbox" name="hobby" id="sport"/>
<label for="sport">运动</label>

• 如果绑定内容和表单元素写在一起，可以化简绑定写法。直接使用标签将绑定内容与表单元素一起进行嵌套。

<label>
  <input type="radio" name="sex"/>男
</label>

下篇继续html基础…