HTML 前端学习（2）—— 表格、表单标签

表格标签

    <table border="2"> <!-- border 相当于表格显现框架线 -->
        <thead> <!--相当于表头-->
            <tr> <!--分行-->
                <th>username</th> <!-- th 和 td 的区别在于 th 加粗 -->
                <th>password</th>
                <th>hobby</th>
            </tr>
        </thead>
        <tbody> <!--相当于除去表头-->
            <tr>
                <td>aoteman</td>
                <td>abc123</td>
                <td rowspan="2">alterman</td> <!--rowspan 相当于竖向合并单元格，colspan为水平合并单元格,2 表示合并两个单元格-->
            </tr>
            <tr>
                <td>123</td>
                <td>456</td>
            </tr>
        </tbody>
    </table>

表单标签

form 标签和 label 标签

    <form action=""></form> 在该 form 标签内部书写的获取用户的数据都会被 form 提交到后端

    action 控制数据提交的后端路径（往哪个服务器提交数据）
        1. 什么都不写——默认朝当前页面所在的 URL 提交数据
        2. 写全路径：https://www.baidu.com 朝百度提交
        3. 只写路径后缀： action="/index/" 自动识别当前服务端的 IP 和 PORT 拼接到前面，host:port/index/

     <label for="d1"> 第一种 直接将 input 框写在 label 内
        username:<input type="text" id="d1">
     </label>

     <label for="d2">password:</label> 第二种 通过 id 链接即可 无需嵌套
     <input type="text" id="d2">

     input 不跟 label 关联也没有问题

     label 和 input 都是行内标签

input 标签介绍

类似于前端的变形金刚 通过 type 属性变形

    text：     普通文本
    password： 密文展示
    date：     日期
    submit：   用来触发 form 表单提交数据的动作
    button：   就是一个普通的按钮 本身没有任何功能 学完 js 之后给它自定义的功能
    reset：    重置内容
    radio:     单选框
         默认选中要加 checked="checked"
         <input type="radio" name="gender" checked="checked">男
         当标签的属性名和属性值一样的时候可以简写
         <input type="radio" name="gender" checked>男

    checkbox:  多选
         <input type="checkbox" checked>abc
    file:      获取文件
        <input type="file">
    hidden:   隐藏当前 input 框
        <input type="hidden">

select 标签介绍

默认是单选 可以加 multiple 实现多选 selected 默认选中
    <select name="" id="" multiple>
        <option value="" selected>迪迦</option>
        <option value="">赛文</option>
        <option value="">杰克</option>
    </select>

textarea 标签介绍

获取大段文本
    <textarea name="" id="" cols="30" rows="10"></textarea>

表单标签其他内容

# 能够触发 form 表单提交数据的按钮有哪些
    1. <input type="submit" value="注册">
    2. <button>点我</button>

# 所有获取用户输入的标签 都应该有 name 标签
    name 相当于 字典的 key
    用户的数据类似于字典的 values

    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">其他

# form 表单默认提交的是 get 请求
    http://127.0.0.1:5000/index/?gender=on

# form 可以通过 method 设置请求为 post
    <form action="http://127.0.0.1:5000/index" method="post">

# 针对用户选择的标签，用户不需要输入内容，但是需要提前给这些标签添加内容，即：value 值

# form 表单提交文件
    1. method 必须是 post
    2. enctype类似于数据提交的编码格式
           默认是 urlencoded 只能够提交普通的文本数据
           formdata 就可以支持提交文件数据

     <form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">


# 针对用户的标签，如果加了 value 那就是默认值
    username:<input type="text" id="d1" value="默认值">

# disable 禁止用户对该输入框进行修改（禁用），readonly，只读

代码演示

<!--
action表示数据提交的方式
    1. 什么都不写，默认提交到本地
    2. 写完整的 URL 路径
    3. 写部分 URL ，比如：/index/
-->
<!--
form 默认请求方式为 get，要选择 post 请求需要 method="post"
-->
<form action="" method="post" enctype="multipart/form-data">
    <!--
    label 和 input 连用，这样在 pycharm 中单独使用 input 不会被标黄，实际标黄也没事
    label 中的 for 和 label 内 id 相一致，这样的效果是，点击在框架外的文字（如：“用户名：”光标也会跳转至输入框内部）
    -->
    <label for="d1">用户名：
        <!--
        表单中所有标签都需要有 name 属性，不然在 post 提交数据时很有可能会造成此数据丢失，注意非用户输入标签，即选择框，除了 name 属性还需要 value 属性，不然后端接收数据时不清楚用户的选择是什么
        placeholder 表示在一开始加载中输入框中的提示性信息，并且用户不需要将这些信息删除就可以输入信息

        text 表示输入文本内容
        -->
        <input type="text" id="d1" name="username" placeholder="用户名">
    </label>

    <!--
    password 即 密文输入
    -->
    <p>密码：
        <input type="password" name="password">
    </p>

    <!--
    date 日期选择
    -->
    <p>出生日期：
        <input type="date" name="date">
    </p>

     <!--
    radio 选择
    如果要在加载完成后就选择一个选项，checked=“checked”，因为属性值一致，可以简写为 checked
    -->
    <p>性别：
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="else">其他
    </p>

     <!--
    checkbox 多项选择
    其他部分和 radio 一致
    -->
    <p>兴趣爱好：
        <input type="checkbox" name="hobby" value="aoteman" checked>奥特曼
        <input type="checkbox" name="hobby" value="alterman">alterman
        <input type="checkbox" name="hobby" value="abc">abc
    </p>

    <!--
    submit 提交数据
    value 表示用户在 HTML 页面中看到的内容，因为不设置在不同浏览器中 submit 渲染的文字不同，所以最好设置 value
    -->
    <p>
        <input type="submit" value="提交">
    </p>

    <!--
    button 按钮选项
    -->
    <p>
        <input type="button" value="点我">
    </p>

    <!--
    reset 重置用户输入内容
    -->
    <p>
        <input type="reset" value="重置">
    </p>

    <!--
    file 用户上传文件，默认上传单个
    multiple 允许上传多个文件
    -->
    <p>提交文件：
        <input type="file" multiple>
    </p>

    <!--
    hidden 隐藏输入框，用户看不见也无法输入，一般钓鱼网站会使用
    -->
    <p>这是隐藏的输入框：
        <input type="hidden">
    </p>

    <!--
    select option 组合下拉框
    和单选框一样，selected 实现预选
    -->
    <p>所在省份：
        <select name="province" id="s1">
            <option value="sh" selected>上海</option>
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
        </select>
    </p>

    <p>居住地：
        <select name="place" id="s2">
            <optgroup label="上海">
                <option value="pd">浦东</option>
                <option value="px">浦西</option>
            </optgroup>
            <optgroup label="杭州">
                <option value="xh">西湖区</option>
                <option value="yh">余杭</option>
            </optgroup>
        </select>
    </p>

    <!--
    textarea 大量文本
    -->
    <p>自我介绍：
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
</form>
</body>
</html>