HTML(12月18日)作业_Form表单

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > HTML(12月18日)作业_Form表单

博主信息

博文 12

粉丝 0

访问量 10277

专题推荐

更多>

1. 表单元素类型

序号	元素	名称	描述
1	`<form>`	表单容器	表单应该放在该标签内提交
2	`<input>`	输入控件	由`type`属性指定控件类型
3	`<label>`	控件标签	用于控件功能描述与内容关联
4	`<select>`	下拉列表	用于选择预置的输入内容
5	`<datalist>`	预置列表	用于展示预置的输入内容
6	`<option>`	预置选项	与`<select>`,`<datalist>`配合
7	`<textarea>`	文本域	多行文本框,常与富文本编辑器配合
8	`<button>`	按钮	用于提交表单

2. 表单元素属性

序号	元素	属性
1	`<form>`	`action`, `method`
2	`<label>`	`for`
3	`<input>`	`type`, `name`,`value`,`placeholder`…
4	`<select>`	`name`
5	`<datalist>`	`id`,与`<input list="">`关联
6	`<option>`	`value`, `label`,`selected`
7	`<textarea>`	`cols`, `rows`,`name`…
8	`<button>`	`type`,`name`

表单元素的公共属性(并非所有元素都具备)

序号	属性	描述
1	`name`	元素/控件名称,用做服务器端脚本的变量名称
2	`value`	提交到服务器端的数据
3	`placeholder`	输入框的提示信息
4	`form`	所属的表单,与`<form name="">`对应
5	`autofocus`	页面加载时,自动获取焦点
6	`required`	必填 / 必选项
7	`readonly`	该控件内容只读
8	`disabled`	是否禁用

3. `<input>`的`type`类型

3.1 常用的`type`类型

序号	属性	名称	描述
1	`type="text"`	文本框	默认值
2	`type="password"`	密码框	输入内容显示为`*`,不显示明文
3	`type="radio"`	单选按钮	多个选项中仅允许提交一个(应提供默认选项)
4	`type="checkbox"`	复选框	允许同时提交一个或多个选项(应提供默认选项)
5	`type="hidden"`	隐藏域	页面不显示,但数据仍会被提交
6	`type="file"`	文件上传	本地文件上传,有`accept`,`multiple`属性
7	`type="submit"`	提交按钮	点击后会提交按钮所在的表单
8	`type="reset"`	重置按钮	点击后会重置输入控件中的内容为默认值
9	`type="button"`	自定义按钮	使用JS脚本定义按钮点击后的行为

3.2 其它`type`类型(部分)

序号	属性	名称	描述
1	`type="email"`	邮箱	输入必须是邮箱格式
2	`type="number"`	整数	输入必须是整数,可设置范围`min`,`max`
3	`type="url"`	URL地址	输入内容必须是有效的URL格式文本
4	`type="search"`	搜索框	通常与`autocomplete`配合
5	`type="hidden"`	隐藏域	页面不显示,但数据仍会被提交
6	`type="date"`	日期控件	不同浏览器显示略有不同,但功能一致
7	`type="color"`	调色板	可直接选择颜色, 不同平台略有不同
8	`type="tel"`	电话号码	手机端会弹出数字小键盘

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<h3>用户注册</h3>
<form action="check.php" method="post">
<!--    文本框-->
    <p>
        <label for="username">账号:</label>
        <input type="text" id="username" name="username" placeholder="6-15位中英文字符" required>
    </p>
<!--   密码 -->
    <p>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="密码不少于6位" required>
    </p>
<!--    邮箱-->
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="example@email.com" required>
    </p>
<!--    单选按钮-->
    <p>
<!--        label中的for应该与某一选项中的id对应-->
        <label for="male">性别:</label>
<!--        单选按钮控件的name名称，必须全部一样，才能确保只有一个值被提交-->
        <input type="radio" name="gender" value="1" id="male">
        <label for="male">男</label>
        <input type="radio" name="gender" value="1" id="female">
        <label for="female">女</label>
        <input type="radio" name="gender" value="3" id="secret" checked>
        <label for="secret">保密</label>
    </p>
<!--    复选框-->
<p>
    <label for="programme">爱好:</label>
<!--    复选框，name属性名，建议写成数组形式，便于后端脚本处理-->
    <input type="checkbox" name="hobby[]" value="game" id="game">
    <label for="game">游戏</label>
    <input type="checkbox" name="hobby[]" value="shoot" id="shoot" checked><label for="shoot">摄影</label>
    <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">编程</label>
</p>
<!--下拉列表-->
    <p>
        <label for="edu">学历</label>
        <select name="edu" id="edu">
            <option value="1" label="中学"></option>
            <option value="2" label="大学"></option>
            <option value="3" label="硕士"></option>
            <option value="4" >博士</option>
        </select>
    </p>
<!--    选项列表-->
    <p>
        <label for="brand">手机品牌</label>
        <input type="search" list="phone" name="brand" id="brand">
        <datalist id="phone">
            <option value="apple">苹果</option>
            <option value="huawei">华为</option>
            <option value="mi" label="小米"></option>
        </datalist>
    </p>
<!--    隐藏域：数据可以提交，但页面上没有显示，适合发送敏感或不需要用户输入的数据-->
    <input type="hidden" name="user_id" value="1040">
<!--    文件上传-->
    <!--文件上传-->
    <p>
        <label for="uploads">上传头像:</label>
        <input type="file" name="user_pic" id="uploads" accept="image/png, image/jpeg, image/gif">
    </p>
    <!--    日历控件-->
    <p>
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday">
    </p>
    <!--    文本域-->
    <p>
        <label for="resume">简历:</label>
        <!--        注意文本域没有value属性-->
        <textarea name="resume" id="resume" cols="30" rows="10" placeholder="不超过100字"></textarea>
    </p>
    <!--    按钮-->
    <p>
        <button>提交</button>
        <input type="submit" value="注册" name="submit">
        <input type="reset" value="重填" name="reset">
    </p>
</form>
</body>
</html>