HTML三表单与布局标签

2025-03-15 约 3806 字预计阅读 8 分钟

https://bing.ee123.net/img/rand?artid=146278647

【HTML】三、表单与布局标签

1、input

input标签，表单用于收集用户信息，使用场景：

登陆页面
注册页面
搜索区域

如上，表单中有文本框，有选择、单选、多选等，由type属性决定：

<input type="..." >

<body>
    文本框：<input type="text">
    <br><br>
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio">
    <br><br>
    多选框：<input type="checkbox">
    <br><br>
    上传文件：<input type="file">
</body>

1.1 input的占位文案

文本框和密码框都可以使用，placeholder中写预设的提示文案

<input type="..." placeholder="提示信息">

示例：

昵称：<input type="text" placeholder="请输入注册昵称">
<br><br>
密码：<input type="password" placeholder="请输入密码">

1.2 单选框

如下，name属性值自定义，name相同，说明是同一组的选项，checked表示默认选中，可以不要checked：

性别：<input type="radio" name="sex" checked> 男
<input type="radio" name="sex">女

1.3 上传文件

文件上传表单控件默认只能上传一个文件，添加multiple属性实现文件多选

<input type="file" multiple>

Command按住多选文件：

1.4 多选框

<input type="checkbox" checked> 敲前端代码

示例：

兴趣爱好：
<input type="checkbox" checked>Java 
<input type="checkbox">Python
<input type="checkbox">Golang

2、下拉菜单

select 嵌套 option，父子关系，select 是下拉菜单整体，option是下拉菜单的每一项，默认显示第一项，selected属性实现默认选中功能

效果：

VSCode生成代码的name和id属性，以及option的属性，是用于后面传值用的，先忽略

<select name="" id="">
    <option value=""></option>
</select>

3、文本域：多行输入

textarea标签，用于多行输入文本（上篇看到，input的text属性不换行）

<textarea>请输入自我评价</textarea>

后面CSS设置文本域尺寸并禁用右下角拖拽变大功能

4、label标签：说明与增大点击范围

用于网页中，某个标签的说明文本，之前，写说明文本“昵称”是这么写的：

昵称：<input type="text" placeholder="请输入注册昵称">

使用label后：

<label>昵称：</label><input type="text" placeholder="请输入注册昵称">

label还可以绑定文字和表单组件的关系，用于增大表单的点击范围，如下面这个单选框，本来要点到小圆点上才生效，修改后，可以让其点到男、女两个字上时也生效，以提高用户体验

写法一 ：label标签只包裹内容，不包裹表单组件标签，要求label的for属性，等于表单标签的id属性

写法二 ：label标签包裹文字和表单标签，不需要属性

对比下原始未增大和两种增大写法：

性别：
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex">女

性别：
<input type="radio" name="sex" checked id="man">
<label for="man">男</label> 
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
<br><br>

性别：
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex">女</label>
<br><br>

注意，支持label标签增大点击范围的表单组件只有：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等

5、按钮与form表单

<button type="">按钮</button>

type属性取值：

按钮需配合 form 标签(表单区域) 才能实现对应的功能，如重置、提交，form用于包裹多种表单输入组件标签：

<form action=""></form>

<body>
    <form action="">
        <label>昵称：<input type="text" placeholder="请输入注册昵称"></label>
        <br><br>
        密码：<input type="password" placeholder="请输入密码">
        <br><br>

        性别：
        <label><input type="radio" name="sex" checked> 男</label>
        <label><input type="radio" name="sex">女</label>
        <br><br>

        
        兴趣爱好：
        <input type="checkbox" checked>Java 
        <input type="checkbox">Python
        <input type="checkbox">Golang
        <br><br>
        上传文件：<input type="file" multiple>
        <br><br>
        居住地：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected>武汉</option>
        </select>
        
        <br><br>
        <textarea>请输入自我评价</textarea>

        <br><br>
        <button type="reset">重置填写</button>
        <br><br>
        <button type="submit">注册/登陆</button>
    </form>
</body>

点击重置填写，所有信息恢复默认

6、无语义布局标签

用于 布局 网页，也就是划分网页区域，摆放内容

div ：独占一行，是一个大盒子
span ：不换行，是一个小盒子

直观感受下区别：

<body>
    <div>这是div标签</div>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <span>这是span标签</span>
</body>

7、有语义的布局标签

8、字符实体

在网页中显示预留字符时，用右边的实体名称，一般&开头；结尾

lt 是 less than 的缩写
gt 是 greater than 的缩写

9、练习：注册页面

写一个注册页面：

代码：

<!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>
    <form action="">
        <h1>注册信息</h1>

        <!--个人信息 -->
        <h2>个人信息</h2>
        <label>昵称：</label><input type="text" placeholder="请输入注册昵称">
        <br><br>
        密码：<input type="password" placeholder="请输入密码">
        <br><br>
        确认密码：<input type="password" placeholder="请再次确认密码">
        <br><br>
        <label>性别：</label>
        <label><input type="radio" name="sex" checked> 男</label>
        <label><input type="radio" name="sex">女</label>
        <br><br>
        <label>居住地：</label>
        <select>
            <option>北京</option>
            <option selected>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>武汉</option>
        </select>
        <br><br>
        <label>兴趣爱好：</label>
        <input type="checkbox" checked>Java 
        <input type="checkbox">Python
        <input type="checkbox">Golang       
        <br><br>
        <label>评价：</label>
        <textarea>请输入自我评价</textarea>
        <br><br>
        附件：<input type="file" multiple>
        <br><br>
        
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历：</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option selected>本科</option>
            <option>专科</option>
        </select>
        <br><br>
        <label>学校名称：</label>
        <input type="text" placeholder="请输入学校名称">
        <br><br>
        <label>所学专业：</label>
        <input type="text" placeholder="请输入所学专业">
        <br><br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        --
        <select>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option selected>2019</option>
        </select>
        <br><br>
        

        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称：</label>
        <input type="text" placeholder="请输入公司名称">
        <br><br>
        <label>工作内容：</label>
        <textarea>请输入具体内容</textarea>
        <br><br>
        <input type="checkbox"><label>我已阅读并同意以下协议：</label>
        <ul>
            <li><a href="#" target="_blank">《用户服务协议》</a></li>
            <li><a href="#" target="_blank">《隐私协议》</a></li>
        </ul>
        <br><br>
        <button type="submit">免费注册</button>
        <button type="reset">重置填写</button>
    </form>

</body>
</html>