html+css用户注册模板

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    h3 {
      text-align: center;
      margin-top: 30px;
      color: #666;
    }
    form {
      width: 60%;
      margin: 10px auto;
      border-top: 1px solid #ccc;
    }
    form > fieldset {
      margin: 20px auto;
      padding-left: 15px;
      color: red;
      border-radius: 10px;
      box-shadow: 2px 2px 4px #bbb; /*背景阴影 */
    }
    form > fieldset > legend {
      background-color: rgb(212, 219, 255);
      border-radius: 10px; /*边框弧度 */
      color: rgb(255, 80, 80);
      padding: 5px 15px;
    }
    form > fieldset > div {
      margin: 15px;
      color: #666;
    }
    form div {
      margin: 5px;
    }
    form p {
      text-align: center;
    }
    form .btn {
        width: 80px;
        height: 30px;
        border: none;
        background-color: seagreen;
        color: #ddd;
      }
      form .btn:hover {
        background-color: coral;
        color: white;
        cursor: pointer;
      }
     input:text{
         height: 30px;
         line-height: 20px;
     }   
      input:focus {
        background-color: rgb(226, 226, 175);
      }
    form .rinput{
        height: 25px;
        width: 200px;
    }
  </style>
  <body>
    <h3>用户注册</h3>
    <form method="POST" action="#" name="form">
      <fieldset>
        <legend>基本信息(必填)</legend>
        <div>
          <label for="username_id">账号：</label>
          <input
            type="text"
            id="username_id"
            name="username"
            placeholder="6-15位字符"
            autofocus
            class="rinput"
          />
          *
        </div>
        <div>
          <label for="pass_id">密码：</label>
          <input
            type="password"
            id="pass_id"
            name="pass"
            placeholder="不少于6位且字母+数字"
             class="rinput"
          />
          *
        </div>
        <div>
          <label for="pass_id_1">确认：</label>
          <input
            type="password"
            id="pass_id_1"
            name="pass_1"
            placeholder="不少于6位且字母+数字"
             class="rinput"
          />
          *
        </div>
        <div>
          <label for="email_id">邮件：</label>
          <input
            type="text"
            id="email_id"
            name="email"
            placeholder="demo@example.com"
             class="rinput"
          />
          *
        </div>
      </fieldset>
      <fieldset>
        <legend>扩展信息(选填)</legend>
        <div>
          <label for="birthday">生日：</label>
          <input type="date" name="birthday" />
        </div>
        <div>
          <label for="secret">性别：</label>
          <input type="radio" name="sex" value="male" id="male" />
          <label for="male">男</label>
          <input type="radio" name="sex" value="female" id="female" />
          <label for="female">女</label>
          <input type="radio" name="sex" value="secret" id="secret" />
          <label for="secret">保密</label>
        </div>
        <div>
          <!-- 复选框 -->
          <label for="programme">爱好：</label>
          <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
          <input type="checkbox" name="hobby[]" id="game" value="game" />
          <label for="game">打游戏</label>
          <input type="checkbox" name="hobby[]" value="shoot" id="shoot" />
          <label for="shoot">摄影</label>
          <input
            type="checkbox"
            name="hobby[]"
            value="programme"
            id="programme"
            checked
          /><label for="programme">编程</label>
        </div>
        <div>
          <!-- 选项列表 -->
          <label for="brand">手机：</label>
          <input type="search" list="phone" name="brand" id="brand"   class="rinput"/>
          <datalist id="phone">
            <option value="apple"> </option>
            <option value="huawei" label="华为"></option>
            <option value="mi" label="小米"> </option>
          </datalist>
        </div>
      </fieldset>
      <fieldset>
        <legend>其它信息(选填)</legend>
        <!--文件上传-->
        <div>
          <label for="uploads">上传头像：</label>
          <input
            type="file"
            name="user_pic"
            id="uploads"
            accept="image/png, image/jpeg, image/gif"
          />
        </div>
        <!--文本域-->
        <div>
          <label for="resume">简历：</label>
          <!--注意文本域没有value属性-->
          <textarea
            name="resume"
            id="resume"
            cols="30"
            rows="5"
            placeholder="不超过100字"
          ></textarea>
        </div>
      </fieldset>
      <input type="hidden" name="user_id" value="123" />
      <p>
        <input type="submit" value="提交" class="btn" />
        <button class="btn">提交</button>
      </p>
    </form>
  </body>
</html>
实例效果图
html+css用户注册模板

html+css用户注册模板

实例

实例效果图

相关文章
