首页 > 技术文章 > 作业-前端注册页面

dingbei 2020-05-12 22:10 原文

<!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">
    <title>registered </title>

    <style>
         h1 {
            color: green;
            margin-left:40%;
            margin-right:40%;
            width:30%;

        }
        .f1
        {
            margin-top: 5%;
            margin-left:auto;
            margin-right:auto;
            width:40%;
            background-color:lightyellow;
        }
         .f2
         {
             margin-left:33%;
             margin-right:45%;
             width:30%;
         }
         .f3
         {
             margin-left:33%;
         }
        .b1
        {
            margin-left:40%;
            margin-right:45%;
            background-color:goldenrod;
        }
        .b2
        {
            margin: 1px;
            width: 145px;
            height: 12px;
        }

    </style>

</head>
<body>
<div class="f1">
    <h1>注册</h1>
<!--    form表单提交文件需要注意-->
<!--	1.method必须是post-->
<!--	2.enctype="multipart/form-data"-->
<!--		enctype类似于数据提交的编码格式-->
<!--			默认是urlencoded 只能够提交普通的文本数据-->
<!--			formdata 就可以支持提交文件数据-->
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
    <div class="f2">
        <p>
         <label for="d1">
             <input type="text" name="username" placeholder="用户名" id="d1"></label></p>
        <p>
        <label for="d2">
             <input type="password" name="password" placeholder="设置密码" id="d2"></label></p>
        <p>
        <label for="d4">
            <input type="password" name="password" placeholder="确认密码" id="d4"></label></p>
        <p>
        <label for="d5">
            <input type="text" name="email" placeholder="邮箱" id="d5"></label></p>
        <p>性别:
            <input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女</p>
        <p>省份:
            <select name="province" >
<!--                加上selected是设置默认值-->
                <option value="sh" selected>上海</option>
                <option value="bj">北京</option>
                <option value="sz">深圳</option>
            </select></p>
    </div>
     <div class="f3">
          <p>爱好:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox"  name="hobby" value="football">足球
            <input type="checkbox"  name="hobby" value="doublecolorball">羽毛球 </p>
          <p>头像:
<!--              multiple 可以传多个-->
              <input type="file" name="myfile" multiple></p>
          <p>自我介绍:
<!--              textarea标签 :获取大段文本   cols="30" row="10":设置大小-->
              <textarea name="" id="" cols="30" rows="5" class="b2"></textarea></p>
     </div>

        <label for="d3"><input type="submit" value="提交" class="b1" id="d3"></label>


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

推荐阅读