HTML第八章 表单标签

8. 表单标签（重）

8.1 表单标签_form

• 属性：action = "url（地址）"

• from表单提交流程

  1. 确认提交地址：action 的属性值 url（地址）
  2. 输入数据的标签（输入框/下拉框/文本域等）
  3. 以name=""对应的内容为 key ，输入的内容为值进行提交
  4. 提交 submit 类型的按钮/输入框

• ⚠**面试题：get 请求方式和 post 请求方式有什么区别？**⚠

  • get（默认）
    • 值拼接在跳转到 url 中------问号传值，不安全
    • 缓存，添加为书签
    • 数据量比较小，64kb

  

  • post
    • 安全，将数据封装在请求头中，不可见
    • 不能内被缓存，因此不能将页面添加为书签
    • 提交相对较大的数据量

  

<!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	普通按钮

<!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 绑定

• 方法二：直接在选项外面套

<!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）

<!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>