Blogger Information
Blog 38
fans 1
comment 0
visits 24342
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月24日作业(2) html表单
鲨鱼辣椒的博客
Original
633 people have browsed it

2. 独立完成一个用户注册表单

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单用户登录首页</title>
</head>
<body>
    <div>
        <form action="phpcn.php" method="get">
            <p>
                <label for="username">账号</label>
                <input type="text" name="username" id="username" onkeyup = "value=value.replace(/[^\d]/g,'')" placeholder="不能低于8位数字">
            </p>
            <p>
                <label for="username">密码</label>
                <input type="password" name="pwd" id="pwd" placeholder="6-12的字母和数字组成">
            </p>
            <p>
                <label for="username">确认密码</label>
                <input type="password" name="pwd" id="pwd" placeholder="请再次确认密码">
            </p>
            <p>
                <label for="email">邮箱:</label>
                <!--        required: 必填项-->
                <input type="email" id="email" name="email" placeholder="example@mail.com" required>
            </p>
            <p>
                <label for="age">年龄</label>
                <input type="number" name="age" id="age" min="16" max="18">
            </p>
            <p>
                <label for="birthday">生日</label>
                <input type="date" name="birthday" id="birthday">
            </p>
            <!--单选按钮-->
            <p>
                <label for="male">性别</label>
                <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
                <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
                <!--checked 默认值-->
                <input type="radio" name="gender" value="ladyboy" id="ladyboy" checked><label for="ladyboy">人妖</label>
            </p>

            <!--复选框 多选框-->
            <p>
                <label for="programme">爱好: </label>
                <!--点击"爱好"标签会自动定位到"撸代码"选项上-->
                <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label>
                <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label>
                <input type="checkbox" name="hobby[]" value="music" id="music"><label for="programme">音乐</label>
                <!--        checked: 默认值-->
                <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">PHP</label
            </p>


            <p>
                <!--select: 下拉列表,也叫下拉框-->
                <label for="region">地区</label>
                <select name="region" id="region" size="1">
                    <optgroup label="地球:">
                        <option value="0">请选择</option>
                        <option value="1">中国</option>
                        <option value="2">美国</option>
                        <option value="3">台湾</option>
                        <option value="4">***鬼子</option>
                    </optgroup>

                    <optgroup label="中国:">
                        <option value="5">北京</option>
                        <option value="6">上海</option>
                        <option value="7">深圳</option>
                        <option value="8">长沙</option>
                    </optgroup>
                </select>
            </p>

            <!--文本域-->
            <p>
                <label for="comment">简介:</label>
                <textarea name="comment" id="comment" cols="30" rows="5" maxlength="30" placeholder="内容不能超过30个字符"></textarea>
            </p>

            <!--按钮-->
            <p>
                <!--提交按钮-->
                <input type="submit" name="submit" value="提交">
                <!--重置按钮-->
                <input type="reset" name="reset" value="重置">
                <!--普通按钮, 没有具体的功能,-->
                <input type="button" name="button" value="按钮">
                <!--button提交按钮-->
                <button>提交1</button>
                <button type="submit">提交2</button>

            </p>
        </form>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post