HTML第八章表单标签

8. 表单标签（重）

8.1 表单标签_form

属性：action = "url（地址）"
from表单提交流程
1. 确认提交地址：action 的属性值 url（地址）
2. 输入数据的标签（输入框/下拉框/文本域等）
3. 以name=""对应的内容为 key ，输入的内容为值进行提交
4. 提交 submit 类型的按钮/输入框
⚠**面试题：get 请求方式和 post 请求方式有什么区别？**⚠
- get（默认）
  - 值拼接在跳转到 url 中------问号传值，不安全
  - 缓存，添加为书签
  - 数据量比较小，64kb
- post
  - 安全，将数据封装在请求头中，不可见
  - 不能内被缓存，因此不能将页面添加为书签
  - 提交相对较大的数据量

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="post">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        <input type="submit">
    </form>
</body>
</html>

8.2 表单标签_input

input：输入框，主要用于采集信息的载体（选择性、点击型、输入型）
常见属性

属性	说明
`type`	输入框的类型
`name`	提交表单数据时，以 `username : zhangsan`（Key-Value，键值对/JSON字符串），`name`属性主要就是设置数据的键（Key），而 Value 就是输入框中输入中输入的值
`id`	表示当前 html 元素的唯一标识，要求 `id` 不能一致，CSS / JS 中要用
`value`	代表文本框中的默认值
`placeholder`	输入框的提示信息，不在数据范围内，只做提示使用
`maxlength`	最大输入字符数，限制输入字数
`readonly`	文本框只读
`required`	必填项
`hidden`	隐藏
`disabled`	不可输入
`checked`	选中，一般用在复选框、单选框
`src`	图片资源路径，主要用于输入类型为 `image` 时
`autofocus`	自动获取焦点（光标）
`class`	❗❗CSS / JS 一般都用来设置样式和行为，本身无特殊含义，其值可以为多个，多个之间使用空格分割❗❗

常见类型

类型	说明
`test`	普通文本框
`password`	密码框，文本是黑点
`radio`	单选框
`checkbox`	复选框
`image`	图片提交方式，点击图片提交至 `action` 的 `url`
`hidden`	隐藏域
`file`	文件域
`email`	邮箱
`color`	颜色
`date`	日期（年月日）
`datetime-local`	年月日时分
`month`	年月
`week`	年周
`time`	时分
`range`	数字滑块
`tel`	电话
`url`	网站地址
`search`	搜索框，在文本框右上角 `X` 可以删除
`reset`	重置按钮，清空文本框所有数据
`submit`	提交按钮
`button`	普通按钮

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素_input标签</title>
</head>
<body>
    <form action="../code/1.Hello.html" method="post">

        <p>普通输入框1：<input type="text" name="username" value="zhangsan" readonly maxlength="5"></p>

        <p>普通输入框2：<input type="text" name="name" required></p>

        <p>普通输入框3：<input type="text" name="name" value="此处不允许修改" disabled></p>

        <p>密码框：<input type="password" name="password" placeholder="请输入密码" autofocus></p>

        <p>单选框：<input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
        </p>

        <p>复选框：<input type="checkbox" name="hobby" value="sports">运动
            <input type="checkbox" name="hobby" value="music" checked="checked">音乐
            <input type="checkbox" name="hobby" value="reading">阅读
        </p>

        <p>图片提交：<input type="image" src="../code/cat.jpg" alt="提交" width="200px"></p>

        <p>隐藏域：<input type="hidden" name="id" value="123456"></p>

        <p>文件上传：<input type="file" name="file"></p>

        <p>邮件：<input type="email" name="email"></p>

        <p>颜色：<input type="color" name="color"></p>

        <p>日期（年月日）：<input type="date" name="date"></p>

        <p>年月日时分：<input type="datetime-local" name="datetime-local"></p>

        <p>年月：<input type="month" name="month"></p>

        <p>年周：<input type="week" name="week"></p>

        <p>时分：<input type="time" name="time"></p>

        <p>数字滑块：<input type="range" name="range"></p>

        <p>电话：<input type="tel" name="tel"></p>

        <p>URL：<input type="url" name="url"></p>

        <p>重置按钮：<input type="reset" value="重置"></p>

        <p>提交按钮：<input type="submit" value="提交"></p>
        
        <p><button type="submit">提交表单</button></p>

    </form>
</body>
</html>

8.3 表单标签_label（语义化标签）

方法一（不推荐） ：通过 lable 可以使点击文字时也能勾选，使文字具备了功能性，for 属性必须与 id 绑定
方法二：直接在选项外面套

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lable标签</title>
</head>
<body>

    <!-- 方法一 -->
    <input type="checkbox" name="hobby" value="sports" id="sport"><label for="sport">运动</label>

    <hr>

    <!-- 方法二 -->
    <label ><input type="checkbox" name="hobby" value="sports">运动</label>
    <label ><input type="checkbox" name="hobby" value="music">音乐</label>
    <label ><input type="checkbox" name="hobby" value="reading">阅读</label>

</body>
</html>

8.4 下拉框和文本域

下拉框（select，option）

multiple 标识将下拉框以列表形式展示

文本域（textarea）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框和文本域</title>
</head>
<body>
    <form action="./1.Hello.html">
        <!-- 下拉框 -->
        <select name="city" id="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
        </select>
        请选择您的城市：
        <select name="city" id="city" multiple="multiple">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
        </select>

        <p>请输入您的留言：</p>

        <!-- 文本域 -->
        <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </form>
</body>
</html>

HTML第八章 表单标签

8. 表单标签（重）

8.1 表单标签_form

8.2 表单标签_input

8.3 表单标签_label（语义化标签）

8.4 下拉框和文本域

HTML第八章表单标签