css+html注册页面

最新推荐文章于 2023-07-18 20:29:19 发布

哲哲哲哲哲123

最新推荐文章于 2023-07-18 20:29:19 发布

阅读量460

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/m0_61585359/article/details/121479108

版权

作为前端的初学者，希望自己可以一步一个脚印，积累学习，在CSDN上发一些自己练习的小效果，以便于后面温故而知新，也希望有大神可以指出不足。

从今天开始会陆续上传写过的效果，和自己的学习经验、知识总结。

学完HTML的表单标签，就可以制作简单的注册页面了。

效果图

html 结构

<body>
    <form>
    
        <table rules="rows">
            <tr>
                <td>用户名：</td>
                <td><input type="text" value="至少输入六位数用户名" minlength="6"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="passw" value="请做多输入11位数的密码" maxlength="11"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex">男<input type="radio" name="sex" checked>女</td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input type="text" value="请输入年龄"></td>
            </tr>
            <tr>
                <td>学历：</td>
                <td>
                    <select>
                        <option value="">研究生</option>
                        <option value="">本科</option>
                        <option value="" selected>大专</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>特长：</td>
                <td><input type="checkbox" checked>H5前端
                <input type="checkbox">PHP
                <input type="checkbox">javaee
                <input type="checkbox">Java大数据
                <input type="checkbox">物联网
                <input type="checkbox">UI设计
                </td>
            </tr>
            <tr>
                <td>email：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>电话：</td>
                <td><input type="text" maxlength="11"></td>
            </tr>
            <tr>
                <td>上传简历：</td>
                <td><input type="file" multiple></td>
            </tr>
            <tr>
                <td>自我介绍：</td>
                <td><textarea cols="8" rows="4"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交">
                <input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>
</body>

css样式

*{
    margin: 0;
    padding: 0;
}
table{
    margin:0 auto;
    width: 626px;
}
td{
    height: 34px;
}
td:nth-child(1) {
    text-align: right;
}
td:nth-child(2) {
    padding-left: 20px;
}