3.前端html之表格标签与表单标签

放纵fly

已于 2022-06-04 17:57:35 修改

阅读量284

点赞数 1

分类专栏：前端--html/CSS/JavaScript/jQuery 文章标签：前端 html

于 2021-11-13 15:00:02 首次发布

本文链接：https://blog.csdn.net/m0_52559893/article/details/121303809

版权

前端--html/CSS/JavaScript/jQuery 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

1.表格标签

2.表单标签(form数据提交，input-type等，select）

1.表格标签

1.作用：表格标签顾名思义用于存放表格信息
2.属性要点：colspan="" 水平方向占多行
           rowspan="" 垂直方向占多行
           border="" 表格外边框

3.格式：
    <table border="1">
        <thead> 头字段
            <tr>                            # 一个tr就表示一行
                <th>usehrname</th>          # th默认加粗文本(头字段通常用th)
                <th>username</th>
                <th>hobby</th>
            </tr>
        </thead>

        <tbody> 表单(数据信息)
            <tr>
                <td>wsx</td>                # td正常文本
                <td>307</td>
                <td>boo</td>
            </tr>
            <tr>
                <td colspan="2">zcy</td>    # 水平方向占2行
                <td rowspan="2">run</td>    # 垂直方向占2行
            </tr>
            <tr>
                <td>zjf</td>
                <td>308</td>
                <td>read</td>
            </tr>
        </tbody>	 
    </table>

2.表单标签(form数据提交，input-type等，select）

1.作用：  在该<form action=""></form>标签内部书写用户的数据都会被提交到服务器（后台）
2.登录页面表单form格式:
<html>
    <head></head>
    <body>
        <form action="http://127.0.0.1:5000/index/" method="POST" enctype="multipart/form-data">
            <h1>注册页面</h1>
            <p>
                <label for="f1">
                    用户名:<input type="text" id="f1" name="uname">
                </label>
            </p>
            <p>
                <label for="f2">密码:</label>
                <input type="password" id="f2" name="upassword">
            </p>
            <p>
                <label for="f3">
                    生日:<input type="date" id="f3" name="birthday">
                </label>
            </p>
            <p>
                性别：
                <input type="radio" name="gender" checked="checked" value="male">男生
                <input type="radio" name="gender" value="female">女生
            </p>
            <p>
                <input type="checkbox" checked name="hobby" value="读书">读书
                <input type="checkbox" name="hobby" value="运动">运动
                <input type="checkbox" name="hobby" value="音乐">音乐
            </p>
            <p>省份：
                <select name="" id="">
                    <OPtion name="province" value="广东省">广东省</OPtion>
                    <OPtion name="province" value="上海市">上海市</OPtion>
                    <OPtion name="province" value="北京市">北京市</OPtion>
                </select>
            </p>
            <p>上传头像
                <input type="file" multiple name="myfile">
            </p>
            <p>自我介绍
                <textarea name="info" id="" cols="30" rows="10"></textarea>
                  
            </p>
            <p>
                <input type="submit" value="注册">
                <input type="reset" value="清空">
            </p>
        </form>
    </body>
</html>


3.属性：
    (1)action:控制数据提交的后端路径(给哪个服务端提交数据)
        a.什么都不写  默认就是朝当前页面所在的url提交数据
        b.写全路径:https://www.baidu.com  朝百度服务端提交
        c.只写路径后缀action='/index/'  自动识别出当前服务端的ip和port拼接到前面，如host:port/index/

    (2)method="post" 如果提交form数据方式是get,会把form的name数据加在url,容易泄露信息
                     所有提交数据方式应用post

    (3)enctype="multipart/form-data":提交数据类型为文本或文件
            enctype：类似于数据提交的编码格式
                     默认是参数是urlencoded 只能够提交普通的文本数据
                            formd-ata就可以支持提交文件数据
            multipart：不写文件只能上传一个，multipart表示多选

    (4)input:提供用户输入方式
             通常label连着用：实现点击用户名，锁定输入框（for与id关联）
             label 和 input都是行内标签，通常用p标签嵌套
            a.第一种 直接讲input框写在label内
                <label for="f1">
                    用户名:<input type="text" id="f1">
                </label>					
            b.第二种 通过id链接即可 无需嵌套
                <label for="f2">密码:</label>
                    <input type="password" id="f2">
            
    (5)form>p>input-type:属性
            text：文本(默认)
            password：密文
            日期：
                date：日期 年月日
                datetime-local：年月日+时分，定时发布作品
            按钮：
                button：普通按钮(可以通过js,绑定功能)
                submit:提交按钮（input的框数据，(name,用户输入)打包发给服务器）
                reset:重置按钮，输入框清空
                      在不同浏览器打开，按钮渲染内容不一样，可以设值，例如value="注册"
            选项：
                checkbox：选项勾选(可取消)
                radio：选项单点（默认不可取消，在做单选时，可以同时绑定name，只能选一个）
                        默认选项：添加属性checked="checked"，简写checked
                                 当标签的属性名和属性值一样的时候可以简写）
            file：选择文件,默认上传一个，上传多个加属性multiple
            Email：填Email用
            color：颜色选择器
            range:左右调值条 
            number：数字，可以上下点调,购物车件数
            hidden:隐藏当前input框,钓鱼网站

    (6)form>p>input-name：对input输入框或选择标签：返回后端成key
       form>p>input-value:对input输入框：显示在用户页面，默认信息
                          对input选择标签：返回后端成value值
       form>p>input-disable：输入框禁用
       form>p>input-readonly:输入框只读
       form>p>input-placeholder="用户名"：背景提示词
       form>p>input-enabled=""：属性允许在运行时使窗体和控件成为有效或无效，enabled=".t."有效，enabled=".f."无效

    (7)form>p>select>optio:下拉式选择框
        select标签 默认是单选 可以加mutiple参数变多选 默认选中参数：selected
            <select name="" id="" multiple>
                <option value="" selected>广东省</option>
                <option value="" selected>上海市</option>
                <option value="">北京市</option>
            </select>
        添加分列(组)提示信息
            在form>select和option之间加入<optroup lablel="中国">option</optroup>

    (8)form>textarea:大段文本框,自我介绍



4.补充
    (1)能够触发form表单提交数据的按钮
        <input type="submit" value="注册">
        <button>点我</button>
    (2)多选参数：multiple

放纵fly

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.前端html之表格标签与表单标签

目录1.表格标签2.表单标签(form数据提交，input-type等，select）1.表格标签1.作用：表格标签顾名思义用于存放表格信息2.属性要点：colspan="" 水平方向占多行 rowspan="" 垂直方向占多行 border="" 表格外边框3.格式： <table border="1"> <thead> 头字段 <tr> .
复制链接

扫一扫

专栏目录