博客园

☞嘘，旁边没人吧？偷偷点进来☞

  • 老司机的博客

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>
posted @ 2021-03-08 20:13  小刘学python  阅读(99)  评论(0)  编辑  收藏  举报