html表单+表格的练习

最新推荐文章于 2025-03-23 12:17:29 发布

桃之夭夭QAQ

最新推荐文章于 2025-03-23 12:17:29 发布

阅读量380

点赞数

分类专栏： css html 文章标签： html servlet

本文链接：https://blog.youkuaiyun.com/m0_57519583/article/details/129248242

版权

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

html

7 篇文章

订阅专栏

这是一个HTML代码示例，展示了如何创建包含用户名、密码、确认密码、验证码、性别选择、年龄输入、爱好选择、游戏喜好多选以及邮箱和邮箱密码输入的用户注册表单。表单元素如文本框、密码框、复选框、单选按钮和下拉菜单都使用了基本的CSS样式进行美化。

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

代码

如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px black solid;
        }
    </style>
</head>

<body>
    <form action="">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="name" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="password" placeholder="请再次输入密码"></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td><input type="text" name="yzm" placeholder="请输入验证码"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="sex" value="sex" checked>男<input type="radio" name="sex" value="sex">女
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input type="text" name="age" placeholder="请输入年龄"></td>
            </tr>
            <tr>
                <td>爱好</td>
                <td><select name="aihao">
                        <option value="购物" selected>购物</option>
                        <option value="吃">吃</option>
                        <option value="喝">喝</option>
                        <option value="旅游">旅游</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>你喜欢的游戏：</td>
                <td><input type="checkbox" name="game">穿越火线 <input type="checkbox" name="game" checked>英雄联盟 <input
                        type="checkbox" name="game">逆战<input type="checkbox" name="game">守望先锋</td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name="e-mail" placeholder="请输入邮箱">@qq.com</td>
            </tr>
            <tr>
                <td>邮箱密码：</td>
                <td><input type="password" name="password" placeholder="请输入邮箱密码"></td>
            </tr>
            <tr>
                <td> <input type="submit" /></td>
                <td> <input type="reset" /></td>
            </tr>
        </table>
    </form>
</body>
</html>