首页 > 博客列表 > 表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符，表单控件的form属性

博主信息

博文 22

粉丝 0

访问量 20483

专题推荐

表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符之代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符</title>
    </head>
    <body>
        <h3 class="title">用户注册</h3>
        <!-- action: 处理表单的程序 -->
        <!-- method: 表单提交类型
        默认是GET：数据直接放在url地址中(适合少量和不敏感数据发送)
        POST: 表单数据放在请求体中（大量和敏感数据发送） -->
        <form action="" method="POST" class="register">
            <!-- ---------- 1. --------- 单行文本框  -->
            <!-- 账号加label标签是为了"账号"和文本框的焦点绑定提高体验
            控件的绑定是通过 for 和 id 属性值绑定 -->
            <label for="username">账号：</label>
            <!-- type:控件类型 -->
            <!-- name:控件中的name是程序读取的变量名。而class是css用来做读取的变量名 -->
            <!-- value: 数据的值 -->
            <!-- 控件的三个基本属性：type,name,value -->
            <!-- required: 必选属性 -->
            <!-- placeholder: 提示信息 -->
            <!-- 通用文本框 -->
            <input type="text" id="username" name="username" value="" placeholder="用户名" required> </input>
            <label for="email">邮箱:</label>
            <!-- 邮箱文本框 -->
            <input type="text" id="email" name="email" value="" placeholder="demo@email.com" required> </input>
            <label for="password">密码:</label>
            <!-- 密明/非明文文本框 -->
            <input type="password" id="password" name="password" value="" placeholder="不少于6个字符" required> </input>
            <!-- ---------- 2. ---------  单选按钮与复选框按钮-->
            <!-- 单选按钮 -->
            <!-- label for="female" 表示点击性别会选中female 却焦点绑定 -->
            <label for="female">性别:</label>
            <div>
                <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性也就是可能变成多组单选按钮了 -->
                <!-- checked: 默选中 -->
                <input type="radio" name="gender" value="male" id="male" /> <label for="male">男</label>
                <input type="radio" name="gender" value="female" id="female" /> <label for="female">女</label>
                <input type="radio" name="gender" value="secret" id="secret" checked/> <label for="secret">保密</label>
            </div>
            <!-- 复选框按钮 -->
            <label for="#">兴趣:</label>
            <div>
                <!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接收到一组值 -->
                <!-- checked: 默选中 -->
                <input type="checkbox" name="hobby[]" value="game" id="game" /> <label for="game">游戏</label>
                <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
                <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
                <input type="checkbox" name="hobby[]" value="program" id="program" checked/> <label for="program">编程</label>
            </div>
            <!-- ---------- 3. ---------  下拉列表/下拉框-->
            <!-- select 和 option 组合成 下拉列表 -->
            <!-- selected 是默选中 -->
            <label for="edu">学历:</label>
            <!-- <select name="edu" id="edu" multiple size="2"> </select> -->
            <select name="edu" id="edu">
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3" selected>本科</option>
                <option value="4">研究生</option>
                <!-- label 属性的优先级大于option内部的文本 -->
                <!-- <option value="5" label="老司机">自学成材</option> -->
            </select>
            <!-- ---------- 4. ---------  隐藏域-->
            <!-- 隐藏域 -->
            <!-- 上传文件要注意二点：
                1.请求类型必须是: POST
                2.将表单数据编码设置为：multipart/form-data 却二进制编码 -->
            <label for="user-pic">头像:</label>
            <!-- 隐藏域，在前端页面看不到的，它的值供后端处理用 -->
            <input type="hidden" name="MAX_FILE_SIZE" value="10240">
            <input type="file" name="user_pic" id="user-pic" />
            <!-- 头像占位符 -->
            <div class="user-pic" style="grid-column: span 2"></div>
            <label for="user-resume">简历:</label>
            <!-- 隐藏域，在前端页面看不到的，它的值供后端处理用 -->
            <input type="hidden" name="MAX_FILE_SIZE" value="102400">
            <input type="file" name="user_resume" id="user-resume" />
            <!-- 简历占位符 -->
            <div class="user-resume" style="grid-column: span 2"></div>
            <!-- ---------- 5. ---------  文件域-->
            <label for="comment">备注:</label>
            <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
            <!-- --------------------------------- -->
            <!-- 提交按钮 -->
            <button>提交</button>
        </form>
    </body>
</html>

表单控件的form属性之代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>表单控件的form属性</title>
        <style>
            .box {
                width: 18em;
                display: grid;
                grid-template-columns: 60px 180px;
                place-content: center;
                gap: 1em;
                border: 1px solid #000000;
                padding: 1em;
                margin: auto;
            }
            .title{
                text-align: center;
            }
            .box button {
                grid-column: span 2;
            }
        </style>
    </head>
    <body>
       <h3 class="title">用户注册</h3>
       <form action="check.php" method="GET" id="register">
            <div class="box">
                <!-- 使用form属性，将控件与它所属的表单进行关联/绑定 -->
                <label for="username">账号：</label>
                <input type="text" form="register" name="username" id="username" placeholder="不能为空" />
                <label for="email">邮件：</label>
                <input type="text" form="register" name="email" id="email" placeholder="demo@email.com" form="register"/>
                <label for="password">账号：</label>
                <input type="password" form="register" name="password" id="password" placeholder="至少8位" form="register"/>
                <button>提交</button>
            </div>
       </form>
       <!-- 尽管form属性可以实现将控件写到任何地方，仍然能够获取到值，但不要这样做
       第一影布局，第二代码混乱，第三有的浏览器不支持
       但是，用在js中，获取数据将会变得非常的方便（所以一般是绑定form属性并放在 form标签里面） -->
    </body>
</html>

总结：

表单标签form

action: 处理表单的程序
method: 表单提交类型；默认是GET：数据直接放在url地址中(适合少量和不敏感数据发送)；POST: 表单数据放在请求体中（大量和敏感数据发送）

控件的三个基本属性：type,name,value

控件的绑定是通过 for 和 id 属性值进行焦点绑定提高体验

通用文本框,邮箱文本框,密明/非明文文本框,单选按钮, 复选框按钮,隐藏域,文件,下拉列表,占位符,form属性

type=”text”通用文本框
type=”mail”邮箱文本框
type=”password”密明/非明文文本框
type=”radio” 单选按钮（一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性也就是可能变成多组单选按钮了；checked: 默选中）
type=”checkbox” 复选框按钮（复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接收到一组值；checked: 默选中）
type=”hidden”” 隐藏域 (上传文件要注意二点：1.请求类型必须是: POST; 2.将表单数据编码设置为：multipart/form-data 却二进制编码 )
type=”file”” 文件 (可以选取一个文件)
select 和 option 组合成下拉列表 (selected 是默选中; label 属性的优先级大于option内部的文本 )
grid-column 占位符
form属性使用form属性，将控件与它所属的表单进行关联/绑定 (控件一般是绑定form属性并放在 form标签里面)

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php之win运行环境，工具与运行原理

2020-12-08 19:59:37

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符 之代码

表单控件的form属性 之代码

总结：

表单标签form

控件的三个基本属性：type,name,value

控件的绑定是通过 for 和 id 属性值进行焦点绑定提高体验

通用文本框,邮箱文本框,密明/非明文文本框,单选按钮, 复选框按钮,隐藏域,文件,下拉列表,占位符,form属性

表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符之代码

表单控件的form属性之代码