form表单样式案例

最新推荐文章于 2025-06-08 21:13:28 发布

benxiaohai888

最新推荐文章于 2025-06-08 21:13:28 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： form表单 html form表单样式案例 radio checkbox

本文链接：https://blog.youkuaiyun.com/benxiaohai888/article/details/77872180

web前端专栏收录该内容

35 篇文章

订阅专栏

本文提供了一个HTML表单的设计实例，包括个人信息和其他信息的填写部分。表单包含必填项和选择题，如单选、复选等。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: large;
        }

        .all {
            height: 600px;
            width: 500px;
            background-color: #F5F5F5;
            margin: 0 auto;
        }

        .content {
            padding-top: 30px;
            height: 570px;
            width: 400px;
            margin: 0 auto;
        }

        .p1 {
            font-weight: bold;
        }

        .p2 {
            margin-left: 10px;
        }

        .m {
            margin-left: 30px;
        }

        .s {
            margin-left: 150px;
        }

        span {
            margin-left: 280px;
            text-align: right;
        }
    </style>

</head>
<body>

<div class="all">
    <div class="content">
        <form action="" method="post" enctype="multipart/form-data">
            <span> *所在为必填项</span>

            <p class="p1"> 个人信息 <img src="img/line.png" width="320px"></p>
            <table cellspacing="10px">
                <tr>
                    <td>姓名*</td>
                    <td colspan="3"><input type="text"/></td>

                </tr>
                <tr>
                    <td>地址*</td>
                    <td colspan="3"><input type="text"/></td>

                </tr>
                <tr>
                    <td>出生*</td>
                    <td><select>
                        <option>1</option>
                    </select></td>
                    <td>
                        <select>
                            <option>Jan</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option>1979</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>性别*</td>
                    <td colspan="3"><select>
                        <option>男</option>
                    </select></td>

                </tr>
            </table>
            <p class="p1"> 其它信息 <img src="img/line.png" width="320px"></p>
            <p class="p2"> 你喜欢这个表单吗？ <img src="img/line.png" width="220px"></p>
            <input type="radio" name="habit" class="m">  喜欢
               <input type="radio" name="habit">不喜欢
            <br>
            <p class="p2"> 你喜欢什么运动? <img src="img/line.png" width="245px"></p>
            <input type="checkbox" name="sport" class="m">足球
              <input type="checkbox" name="sport">篮球
               <input type="checkbox" name="sport">篮球
            <br>
            <p class="p2">请写下你的建议？* <img src="img/line.png" width="230px"></p>
            <textarea cols="30" rows="10" class="m"></textarea><br>
            <input type="submit" value="提交个人信息" class="s">
        </form>
    </div>
</div>
</body>
</html>

截图：