html+css用戶注冊(cè)模板

實(shí)例


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用戶注冊(cè)</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>用戶注冊(cè)</h3>
    <form method="POST" action="#" name="form">
      <fieldset>
        <legend>基本信息(必填)</legend>
        <div>
          <label for="username_id">賬號(hào)：</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位且字母+數(shù)字"
             class="rinput"
          />
          *
        </div>
        <div>
          <label for="pass_id_1">確認(rèn)：</label>
          <input
            type="password"
            id="pass_id_1"
            name="pass_1"
            placeholder="不少于6位且字母+數(shù)字"
             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>擴(kuò)展信息(選填)</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>
          <!-- 復(fù)選框 -->
          <label for="programme">愛(ài)好：</label>
          <!-- 因?yàn)閺?fù)選框返回是一個(gè)或多個(gè)值，最方便后端用數(shù)組來(lái)處理， 所以將name名稱設(shè)置為數(shù)組形式便于后端腳本處理 -->
          <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>
          <!-- 選項(xiàng)列表 -->
          <label for="brand">手機(jī)：</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">簡(jiǎn)歷：</label>
          <!--注意文本域沒(méi)有value屬性-->
          <textarea
            name="resume"
            id="resume"
            cols="30"
            rows="5"
            placeholder="不超過(guò)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>

實(shí)例效果圖

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：下次寫完再提交

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

Grid還原首頁(yè)圖片布局

2020-07-04 21:22:36

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

html+css用戶注冊(cè)模板

實(shí)例

實(shí)例效果圖