day22

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单的例子 - 注册</title>
        <style>
            /* 属性选择器 */
            /* form input 后代选择器 */
            /* form>input 儿子选择器 */
            form input[type=text], form input[type=password] {
                border: none;
                outline: none;
                border-bottom: 1px dotted darkgray;
            }
            /* form~input 兄弟选择器 */
            /* form+input 相邻兄弟选择器 */
            form~input[type=text] {
                outline: none;
                border: 1px solid lightgray;
            }
            form~input[type=text]:focus {
                outline: none;
                border: 1px solid #00FFFF;
            }
            .button {
                display: inline-block;
                color: white;
                background-color: red;
                border: none;
                width: 120px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <figure>
            <img src="images/bok-choi.jpg" alt="">
            <figcaption>图1. 这是一个图片</figcaption>
        </figure>
        <form action="" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend>用户基本信息</legend>
                <p>
                    用户名:
                    <input type="text" name="username" placeholder="用户名由6-20个字符构成" required>
                </p>
                <p>
                    密码：
                    <input type="password" name="password" required>
                </p>
                <p>
                    确认密码：
                    <input type="password" name="repassword" required>
                </p>
                <p>
                    性别：
                    <input type="radio" name="sex" value="1" checked>男
                    <input type="radio" name="sex" value="0">女
                </p>
                <p>
                    爱好：
                    <input type="checkbox" name="fav" value="阅读" checked>阅读
                    <input type="checkbox" name="fav" value="旅游">旅游
                    <input type="checkbox" name="fav" value="美食" checked>美食
                    <input type="checkbox" name="fav" value="运动">运动
                </p>
                <p>
                    省份：
                    <select name="province">
                        <option value="110000">北京</option>
                        <option value="120000">天津</option>
                        <option value="310000">上海</option>
                        <option value="500000">重庆</option>
                        <option value="510000" selected>四川省</option>
                    </select>
                </p>
                <p>
                    生日：
                    <input type="date" name="birthday">
                </p>
            </fieldset>
            <fieldset id="">
                <legend>用户附加信息</legend>
                <p>
                    邮箱：
                    <input type="email" name="email" required>
                </p>
                <p>
                    头像：
                    <input type="file" name="photo">
                </p>
                <p>
                    自我介绍：
                    <textarea cols="30" rows="10" name="intro"></textarea>
                </p>
                <p>
                    <input class="button" type="submit" value="确认注册">
                    <input class="button" type="reset" value="重新填写">
                </p>
            </fieldset>
        </form>
        <input type="text">
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容