• 6、表格标签及表单标签


    1、表格标签

    <table>
        <thead>
            <tr>
                <th>username</th>  加粗文本
                <td>username</td>   正常文本
            </tr>
        </thead>   表头(字段信息)
        <tbody></tbody> 表单(数据信息)
    </table>
    
    <table border="1"> 加外边宽
    <td colspan="2">egon</td> 水平方向占两行
    <td rowspan="2">dbj</td> 竖直放上占两行
    原生表格标签很丑、但是后续使用框架
    
    

    2、表单标签

    Title

    注册页面

    birthday:

    gender: 其他

    hobby: red dbj jbd haahah

    province:

    file:

    自我介绍:

    女朋友:

    ps:以上页面代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>注册页面</h1>
        <form action="">
            <p>
                <label for="d1">username<input type="text" id="d1"></label>
            </p>
            <p>
            <label for="d2">password<input type="password" id="d2"></label>
            </p>
            <p> birthday:
                <input type="date">
            </p>
            <p>gender:
                <input type="radio" name="gender" checked>男
                <input type="radio" name="gender">女
                <input type="radio" name="gender">其他
            </p>
            <p>hobby:
                <input type="checkbox">red
                <input type="checkbox" checked>dbj
                <input type="checkbox">jbd
                <input type="checkbox">haahah
            </p>
            <p>province:
                <select name="" id="">
                    <optgroup label="上海">
                        <option value="">浦东</option>
                        <option value="">青浦</option>
                        <option value="">黄埔</option>
                    </optgroup>
                    <optgroup label="杭州">
                        <option value="" >滨江</option>
                        <option value="">上城</option>
                        <option value="">西湖</option>
                    </optgroup>
                    <optgroup label="南京">
                        <option value="" >栖霞</option>
                        <option value="">玄武</option>
                        <option value="">丽水</option>
                    </optgroup>
                </select>
            </p>
            <p>file:
                <input type="file" multiple>
            </p>
            <p>自我介绍:
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </p>
            <p>女朋友:
                <select name="" id="" multiple>
                    <option value="" selected>新垣结衣</option>
                    <option value="">桥本环奈</option>
                    <option value="">小泽玛利亚</option>
                </select>
    
            </p>
            <input type="submit" value="注册">
    <!--        当没有指定按钮的内容,不同浏览器渲染的内容不一样-->
            <input type="button" value="按钮">
            <input type="reset" value="重置">
            <button>点我</button>
    
        </form>
    </body>
    </html>
    
  • 相关阅读:
    更改滚动条样式
    进度条代码
    css实现线条样式(中间高亮,两边透明)
    实现瀑布流布局 https://blog.csdn.net/csdn_zsdf/article/details/69367182
    css实现等高布局
    select多选框默认第一个是---请选择---
    后台返回的数据换行显示
    js实现文字无间断上下滚动
    用swiper实现类似淘抢购的滑动tab效果
    解决iframe高度自适应的问题
  • 原文地址:https://www.cnblogs.com/liuyang521/p/14501896.html
Copyright © 2020-2023  润新知