HTML表单标签

input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input

  • input标签可以通过type属性值的不同，展示不同效果

type属性值：

标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单元框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于之后上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能，之后配合js添加功能

input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

属性名 说明
placeholder 占位符，提示用户输入内容文本

input系列标签-单选框

场景：在网页中显示多选一的单选表单空间

type属性值：radio

常用属性：

属性名 说明
name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked 默认选中

注意点：

  • name属性对于单选框有分组功能
  • 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

input系列标签-文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

属性名 说明
multiple 多文件选择

input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

标签名 type属性值 说明
input submit 提交按钮，点击之后提交数据给后端服务器
input reset 重置按钮，点击之后恢复表单默认值
input botton 普通按钮，默认无功能，之后配合js添加功能

注意点：

  • 如果要实现以上按钮功能，需要配合form标签使用
  • form使用方法：用form标签把表单标签一起包裹起来即可

button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性（同input的按钮系列）：

标签名 type属性值 说明
button submit 提交按钮，点击之后提交数据给后端服务器
button reset 重置按钮，点击之后恢复表单默认值
button botton 普通按钮，默认无功能，之后配合js添加功能

注意点：

  • 谷歌浏览器中button默认是提交按钮
  • button标签是双标签，更便于包裹其他内容：文字、图片等。

select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项

常见属性：

  • selected：下拉菜单的默认选中

textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性:

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注意点：

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐使用CSS设置

label标签

场景：常用于绑定内容于表单标签的关系

标签名：label

使用方法1：（第二种不行再用这种）

  1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

使用方法2：（推荐）

  1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
    昵称：<input type="text" placeholder="请输入你的用户名">
    <br>
    密码：<input type="password" placeholder="请输入你的密码">
    <br>
    性别：<input type="radio" name="gender">男<input type="radio" name="gender">女
    <br>
    隐私保密协议：<input type="radio" name="promise" checked>同意<input type="radio" name="promise">不同意
    <br>
    爱好：<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="checkbox" checked>摆烂
    <br>
    上传你的几张帅气照片吧：
    <br>
    <input type="file" multiple>
    <br>
    你的工作城市
    <br>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
        <option selected>南京</option>
    </select>
    <br>
    <textarea cols="30" rows="10"></textarea>
    <br>

    <br>
    <br>
    label方法1
    <br>
    <input type="radio" name="label1" id="duoshuhanzu"><label for="duoshuhanzu">多数汉族1</label>
    <input type="radio" name="label1" id="shaoshuminzu"><label for="shaoshuminzu">少数民族1</label>
    <br>
    label方法2
    <br>
    <label><input type="radio" name="label2">多数汉族2</label>
    <label><input type="radio" name="label2">少数民族2</label>
    <br>
    <input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="普通按钮">
    <br>
    <button type="submit">button我是提交按钮</button>
    <br>
    <button type="reset">button我是重置按钮</button>
    <br>
    <button type="button">button我是普通按钮</button>
</form>
</body>
</html>