Html设计注册页面（简单样式）

最新推荐文章于 2024-10-05 11:25:59 发布

Letternormal

最新推荐文章于 2024-10-05 11:25:59 发布

阅读量2k

点赞数 2

文章标签： html web开发

本文链接：https://blog.csdn.net/weixin_42661226/article/details/115435669

版权

这是一个HTML注册页面的示例，包含必填和选填字段，如用户名、密码、性别、电话、邮箱、所在地、出生日期、爱好、颜色选择、主页URL、邮政编码、考试时间和头像上传等。表单使用了各种输入类型如text、password、radio、checkbox、select、date、color、file，并设置了验证规则。

摘要由CSDN通过智能技术生成

效果运行如图
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的注册页</title>
    <link rel="stylesheet" href="CSS/Register.css">
</head>
<body>
<form name="Register" method="get" action="index.html">
    <fieldset class="Page">
        我的注册页
        <fieldset class="PageMain">
            <legend>必填项</legend>
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名" required="required"><br/>
            <label>密码</label>
            <input type="password" name="points" minlength="6" maxlength="10" placeholder="请输入密码（6-10个字符）" required="required"><br/>
            <label>确认密码</label>
            <input type="password" placeholder="再次输入密码（6-10个字符）" minlength="6" maxlength="10" required="required" oninput="if (value>10)value=10"><br/>
            <label>性别</label>
            <input type="radio" name="sex" >男
            <input type="radio" name="sex" checked="checked">女<br>
            <label>电话</label>
            <input type="tel" id="tel" minlength="11" maxlength="11" placeholder="请输入11位手机号码" required="required" checked="checked"><br>
            <label>邮箱</label>
            <input type="email" id="TxtEmail" name="TxtEmail" required="required" placeholder="请输入邮箱地址" checked="checked"/><br>
            <label>所在地</label>
            <select name="" id="place">
                <optgroup label="四川省">
                    <option value="cd">成都市</option>
                    <option value="nc">南充市</option>
                    <option value="dz">达州市</option>
                    <option value="qt">其他</option>
                </optgroup>
                <optgroup label="陕西省"></optgroup>
                <option value="xa">西安市</option>
                <option value="xy">咸阳市</option>
                <option value="qt2">其他</option>
            </select><br>
        </fieldset>
        <fieldset class="PageMain">
            <legend>选填项</legend>
            <label>出生日期</label>
            <input type="date" id="date" value="2000-02-24">
            <br>
            <label>爱好</label>
            <div>
                <input type="checkbox" id="love1" value="抽烟" checked="checked">抽烟
                <input type="checkbox" id="love2" value="喝酒" checked="checked">喝酒
                <input type="checkbox" id="love3" value="烫头" >烫头
                <input type="checkbox" id="love4" value="看郭德纲">看郭德纲
                <input type="checkbox" id="love5" value="看于谦" >看于谦
                <input type="checkbox" id="love6" value="放屁" >放屁
            </div><br>
            <label>你喜欢的颜色</label>
            <input type="color" value="#FFB6C1">
            <label>主页地址</label>
            <input type="text" placeholder="https://www.XXX.YYY/ZZZ"><br>
            <label>邮政编码</label>
            <input type="text" value="637300"><br>
            <label>本门课程的考试时间</label>
            <input type="week" value="2021-W19"><br>
            <label>你的头像</label>
            <input type="file" value="选择文件"><br>
        </fieldset>
        <input type="submit" value="提交注册"/>
        <input type="button" value="取消">
    </fieldset>
</form>




</body>
</html>