html编写注册页面

shan33__

已于 2024-02-02 16:23:07 修改

阅读量819

点赞数 14

分类专栏：经典例题文章标签： html 前端

于 2023-12-07 21:25:45 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/134865359

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

运用表单相关知识编写了一个简单的注册页面

运行效果：

代码详情：

1.HTML代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/03.css">
</head>


<body>
    <div>
        <form action="">
            <fieldset>
                <legend>信息注册</legend>
                <p>
                    <label for="yhm">用户名：</label>
                    <input type="text" id="yhm">
                </p>
                <p>
                    <label for="mm"> 密码： </label>
                    &nbsp;&nbsp; <input type="password" placeholder="请输入密码" id="mm">
                </p>
                <p><label for="">籍贯：</label>
                    <select name="" id="">
                        <option value="">北京</option>
                        <option value="" selected="selected">山东</option>
                        <option value="">河南</option>
                    </select>
                    <select>
                        <option value="">北京</option>
                        <option value="" selected="selected">济南</option>
                        <option value="">郑州</option>
                    </select>
                    <select name="" id="">
                        <option value="">中关村</option>
                        <option value="" selected="selected">某某区</option>
                        <option value="">某某区</option>
                    </select>
                </p>
                <p>
                    <label for="">性别:</label>
                    <input type="radio" name="xb">男
                    <input type="radio" name="xb" checked="checked"> 女
                </p>
                <p>
                    <label for="">爱好：</label>
                    <input type="checkbox">打游戏
                    <input type="checkbox">打篮球
                    <input type="checkbox">逛街
                    <input type="checkbox">抽烟，喝酒烫头
                </p>
                <p>
                    <label for="">请上传帅气的头像：</label>
                    <input type="file" value="选择文件">
                </p>
                <p>
                    <label for="jszj">介绍自己：</label>
                    <textarea  name="jszj" id="" cols="30" rows="10"></textarea>
                </p>
                <p>
                    <input type="submit" value="提交表单">
                    <input type="reset" value="重新填写">
                </p>
                <p>
                    <input type="submit" value="免费注册 开启寻爱之旅" id="zc">
                </p>
            </fieldset>
        </form>
    </div>
</body>

</html>

2.CSS代码

textarea{
    vertical-align: top;
}
#zc{
    width: 300px;
    height:50px;
    background-color: #1CA3C9;
    color: #fff;
    border:0;
}

shan33__

关注

14
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
html编写注册页面

运用表单相关知识编写了一个简单的注册页面。
复制链接

扫一扫

专栏目录

html编写注册页面

运行效果：

代码详情：

“相关推荐”对你有帮助么？