HTML+CSS——制作简易注册界面

最新推荐文章于 2024-05-31 11:20:07 发布

W金刚葫芦娃W

最新推荐文章于 2024-05-31 11:20:07 发布

阅读量1.1k

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_39330735/article/details/128160133

版权

一、效果图

二、HTML代码

<!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>注册界面</title>
</head>
<script>

</script>

<style>

    table td{
        width: auto;
        border:solid 2px rgb(153, 156, 156);
        height: auto;
        font-size:22px;
    }
    table{
        width:600px;
        height:auto;
        border:solid 2px rgb(0, 0, 0);
    }

</style>
<body>
<form>
    <table>
        <tr>
            <td>用户名</td>                                                           
            <td><input type="text" id="username" style="margin-bottom: 4px;" f:\Xampp\htdocs\test\demo2.htmlplaceholder="请输入5~13个字符" maxlength="13" autofocus></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" style="margin-bottom: 4px;" maxlength="18" placeholder="请输入7~18个字符"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" checked="" name="sex">男<input type="radio" name="sex">女</td>
        </tr>
        <tr>
            <td>爱好</td>
            <td><input type="text" style="width:350px;height:24px;margin-bottom: 4px;"></td>
        </tr>
        <tr>
            <td>来自哪个城市:</td>
            <td><select name="city" id="city" style="margin-bottom: 4px;width:100px ;height: 24px;">
                <option selected="">北京</option>
                <option selected="">成都</option>
                <option selected="">重庆</option>
                <option selected="">天津</option>
                <option selected="">北京</option>
            </select></td>
        </tr>
        <tr>
            <td>大头照：</td>
            <td><input type="file"></td>
        </tr>
        <tr>
            <td>自我介绍</td>
                                           <!--列数     行数-->
            <td><textarea name="自我介绍" cols="46"  rows="5"></textarea></td>
        </tr>
        <tr>
            <td><input button type="submit" value="提交" style=" width: 100px;height: 30px;margin-left: 10px;margin-bottom: 2px;"></td>
            <td><input button type="reset" value="重置" style="width: 150px; height: 30px; margin-left: 90px;margin-bottom: 2px;"></td>
        </tr>
    </table>
</form>
    
</body>
</html>