【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="xx.php" method="post/get" name="message">
提示信息及表单控件书写位置
</form>

2.表元素标签：

（1）<input>标签：

语法：

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

常见属性：

注意：

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

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

示例：

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

浏览器显示：

②

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

<input type="password">

浏览器显示：

③

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

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

浏览器显示：

只能选择其中一项：

④

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

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

浏览器显示：

三项可以同时选择：

⑤四种形式的按钮

示例：

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

浏览器显示：

⑥

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

<input type="file">

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

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

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

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

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

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

其它常用属性详细解析：

①

默认选中设置，单选框和复选框都可以提前设置默认选中项。
如果不设置表示默认没有选中。属性值如果设置为"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>标签将绑定内容与表单元素一起进行嵌套。</label>

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

下篇继续html基础…