01-表单进阶

image-20251125100829463

1. 表单进阶

1.1 radio 单选框

input组件中type=”radio“可以设置单选效果。

  • name 分组要相同，可以在同一个name分组中进行单选
  • checked 默认选中属性
  • label for=”id” 可以点击文字进行选中
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表单进阶-单选框</h1>

    <div>你对京东首页的满意度如何？</div>

    <div>
        <!-- 多个 radio 单选需要设置为同一个 name，类似与将其分组为 name 属性，才能真正单选 -->
         <!-- checked 是等同于 checked="checked"，属于简写方式 -->
        <input type="radio" name="aaa" checked> 非常满意
    </div>
    <div>
        <input type="radio" name="aaa"> 满意
    </div>
    <div>
        <input type="radio" name="aaa"> 一般
    </div>
    <div>
        <input type="radio" name="aaa"> 不满意
    </div>

    <div>
        <div>你的性别</div>
        <div>
            <!-- label 设置id，通过 label 标签去 for id就可以点击文字进行选中 radio 单选 -->
            <input type="radio" name="sex" id="man">
            <label for="man">男</label>
        </div>
        <div>
            <input type="radio" name="sex" id="woman">
            <label for="woman">女</label>
        </div>
    </div>
</body>
</html>

效果：

image-20251128160554934

1.2 checkbox 复选框

input组件中type=”checkbox“可以设置多选效果。

  • name 分组要相同，可以在同一个name分组中进行，便于给后端服务器传值使用
  • checked 默认选中属性
  • label for=”id” 可以点击文字进行选中
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>表单进阶-复选框（多选）</h1>

    <div>
        <div>你的兴趣爱好：</div>

        <div>
            <!-- 需要name分组将其归类为同一个值，便于传输给后端服务器 -->
            <input type="checkbox" name="aaa" checked>抽烟
            <input type="checkbox" name="aaa">喝酒
            <input type="checkbox" name="aaa">烫头
        </div>
    </div>

    <div>
        <div>你擅长的技术：</div>

        <div>
            <input type="checkbox" name="bbb" id="html">
            <label for="html">HTML</label>
            <input type="checkbox" name="bbb" id="css">
            <label for="css">CSS</label>
            <input type="checkbox" name="bbb" id="js">
            <label for="js">JS</label>
        </div>
    </div>
</body>

</html>

效果：

image-20251128161233762

1.3 file 上传文件

input组件中type=”file“，可以设置上传文件效果。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>请截图说明</div>

        <div>
            <!-- 上传任何文件 -->
            <input type="file" name="" id="">
        </div>
    </div>

    <!-- 上传图片小按钮 -->
     <div>
        <div>图片按钮-代替提交按钮使用（input type="submit"）</div>

        <form>
            <input type="image" src="submit.jpg">
        </form>
     </div>
</body>
</html>

效果：

image-20251128162556294

1.4 隐藏|禁用|只读

input组件中type=”hidden“，可以设置上传文件效果。

disabled 禁用。

readonly 只读。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div>
        <div>隐藏按钮-用于携带一些字段信息传给后端使用，但不展示到前端页面上</div>
        <input type="hidden" name="" id="" value="带给后端的字段信息">
     </div>

     <div>
        <div>禁用，只读</div>

        <div>
            <button disabled>注册</button>
            <br>
            <input type="radio" disabled> 不满意
            <br>
            <input type="text" disabled value="禁止输入">
            <br>
            <input type="text" readonly value="禁止输入">
        </div>
     </div>
</body>
</html>

效果：

image-20251128162611944

1.5 select option 下拉菜单

select > option 标签，可以设置多选。

select

  • size，只控制显示几个
  • multiple，可以按着ctrl或者shift来选择多个

option

  • value，提供给后端需要的value值，必须要设置
  • selected，默认选中
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>表单进阶-下拉菜单</h1>
    <div>
        <div>你的收货地址</div>
        <select size="3">
            <!-- 默认展示和选中的是第一个 -->
            <option value="ln">辽宁</option>
            <option value="sd">山东</option>
            <option value="sx">山西</option>
            <option value="hn" selected>河南</option>
            <option value="hb">河北</option>
        </select>
    </div>

    <div>
        <select size="5" multiple>
            <option value="" selected>桌子</option>
            <option value="" selected>椅子</option>
            <option value="">凳子</option>
            <option value="" selected>电脑</option>
            <option value="">显示器</option>
        </select>
    </div>
</body>

</html>

效果：

image-20251128163704397

1.6 textarea 文本域

textarea 标签，可以支持输入文本域，即多行文本。

属性：

  • cols，可输入的列数 - 不常用
  • rows，可输入的行数 - 不常用
  • placeholder，预制文本，不影响输入，不会被携带

注意：

  • 默认value值写在双标签内部，注意空格或换行问题（即标签内写在同一行不要进行换行）
  • resize，在CSS中的属性设置可拖动的范围，即重新设置大小即拖动右下角
    • vertical-垂直
    • horizontal-水平
    • both-双向都可
    • none-不允许拖动-常用
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea{
            width: 300px;
            height: 150px;
            /* ： */
            resize: vertical;
        }
    </style>
</head>
<body>
    <h1>多行文本-文本域</h1>
    <div>
        <!-- cols和rows分别设置可输入的列数和行数-不常用 -->
        <!-- <textarea cols="10" rows="10"></textarea> -->
        <!-- textarea写在同一行，不要进行换行 -->
         <textarea placeholder="请输入你的意见（预制文本）"></textarea>
    </div>
</body>
</html>

效果：

image-20251128163650472

1.7 fieldset legend 字段集

fieldset > legend 标签，可以设置多选。

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset{
            border: 1px solid blue;
            width: 400px;
            height: 100px;
            background: lightblue;
        }
        legend{
            border: 1px solid red;
            text-align: left;
        }
    </style>
</head>

<body>
    <h1>字段集</h1>

    <fieldset>
        <!-- 缺口说明信息 -->
        <legend>性别</legend>

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

    <fieldset>
        <!-- 缺口说明信息 -->
        <legend>爱好</legend>

        <input type="checkbox" name="sex">抽烟
        <br>
        <input type="checkbox" name="sex">喝酒
    </fieldset>
</body>

</html>

效果：

image-20251128165110541

04_大前端 > 01_HTML
#HTML #表单
01-表单进阶
https://janycode.github.io/2017/04/28/04_大前端/01_HTML/01-表单进阶/
作者
Jerry(姜源)
发布于
2017年4月28日
许可协议