HTML 表格(form/table)

最新推荐文章于 2025-06-08 20:30:00 发布

Joovo

最新推荐文章于 2025-06-08 20:30:00 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： ※ 前端文章标签： HTML

本文链接：https://blog.youkuaiyun.com/Joovo/article/details/79634079

※ 前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个用户注册表单的设计方案，包括表单布局、样式设置及交互元素的使用。表单采用HTML与CSS实现，涵盖了基本的输入验证与用户信息收集功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现一个表格:
这里写图片描述

3.css:
table,tr,td{
    margin:0 auto;
    border:1px solid;
    border-style:groove;(凹陷效果)
}


input{
    border-style:groove;

    background:lightblue;
    color:red;
}

a:link {color:blue;} /* 未访问的链接 */
a:visited {color:gray;} /* 已访问的链接 */
a:hover {color:red;} /* 鼠标划过链接 */
a:active {color:black;} /* 已选中的链接 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link href="3.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <form action="reg_check.jsp" method="post">
        <table>
            <tr>
                <td colspan="2" align="center">
                    用户注册信息
                </td>
            </tr>
            <tr>
                <td class="left">
                    用户名
                </td>
                <td style="width:250px">
                    <input type="text" name="user" style="width:150px"/>
                </td>
            </tr>
            <tr>
                <td class="left">
                    密&nbsp&nbsp&nbsp码
                </td>
                <td style="width:250px">
                    <input type="password" name="pw" style="width:150px"/>
                    </td>
            </tr>
            <tr>
                <td class="left">
                    校验密码
                </td>
                <td style="width:250px">
                    <input type="password" style="width:150px" maxlengh="16"/>
                </td>
            </tr>
            <tr>
                <td class="left">
                    籍&nbsp&nbsp&nbsp贯
                </td>
                <td>
                    <select name="place">
                        <option>
                            浙江
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    兴趣爱好
                </td>
                <td class="left">
                    <input type="checkbox"/>篮球
                    <input type="checkbox"/>足球
                    <input type="checkbox"/>书法
                    <input type="checkbox"/>音乐
                    <br>
                    <input type="checkbox"/>绘画
                    <input type="checkbox"/>散打
                    <input type="checkbox"/>瑜伽
                    <input type="checkbox"/>其他
                </td>
            </tr>
            <tr>
                <td>
                    政治面貌
                </td>
                <td>
                    <input type="radio"/>党员
                    <input type="radio"/>团员
                    <input type="radio"/>群众
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button type="button">
                        提交
                    </button>
                    <button type="button">
                        重置
                    </button>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <a href="">注册帮助信息请点击这里</a>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>