使用HTML設計注冊界面

網站注冊頁面案例

需求分析

編寫一個HTML頁面, 顯示效果如圖所示

技術分析

表單標簽

• action : 直接提交的地址
• method :
  get 方式 默認提交方式 ,會將參數拼接在鏈接后面 , 有大小限制 ,4k
  post 方式 會將參數封裝在請求體中, 沒有這樣的限制
• input :

type: 指定輸入項的類型
text : 文本
password : 密碼框
radio : 單選按鈕
checkbox : 復選框
file : 上傳文件
submit : 提交按鈕
button : 普通按鈕
reset : 重置按鈕
hidden : 隱藏域

date : 日期類型
tel : 手機號
number : 只允許輸入數字

placeholder : 指定默認的提示信息
name : 在表單提交的時候,當作參數的名稱
id : 給輸入項取一個名字, 以便於后期我們去找到它,並且操作它

textarea : 文本域, 可以輸入一段文本
cols : 指定寬度
rows : 指定的是高度

select : 下拉列表
option : 選擇項

步驟分析

1. logo部分
2. 導航欄
3. 注冊部分
4. 頁腳圖片
5. 網站聲明信息

代碼實現

<form action="注冊入門案例.html">
  <table width="60%" align="center"> 
    <tr>
      <td colspan="2"><font color="blue" size="5">會員注冊</font> USER REGISTER</td>
    </tr>
    <tr>
      <td>用戶名:</td>
      <td>
        <input type="text"  placeholder="請輸入用戶名"/>
      </td>
    </tr>
    <tr>
      <td>密   碼:</td>
      <td>
        <input type="password"  placeholder="請輸入密碼"/>
      </td>
    </tr>
    <tr>
      <td>確認密碼:</td>
      <td>
        <input type="password"  placeholder="請再次輸入密碼"/>
      </td>
    </tr>
    <tr>
      <td>email:</td>
      <td>
        <input type="text"  placeholder="請輸入郵箱"/>
      </td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>
        <input type="text"  placeholder="請輸入真實姓名"/>
      </td>
    </tr>
    <tr>
      <td>性別:</td>
      <td>
        <input type="radio" name="sex" /> 男
        <input type="radio" name="sex" /> 女
        <input type="radio" name="sex" /> 妖
      </td>
    </tr>
    <tr>
      <td>出生日期:</td>
      <td>
        <input type="date"  />
      </td>
    </tr>
    <tr>
      <td>驗證碼:</td>
      <td>
        <input type="text"  />
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="submit" value="注冊"  />
      </td>
    </tr>
  </table>
</form>

網站后台頁面展示案例

框架標簽：frameset
注意: 使用了frameset必須將body刪掉,否則頁面會有問題
cols：按列划分頁面
rows：按行划分頁面

frame常用屬性:
src: 引入的html文件路徑
name: 指定框架的名稱

框架中點擊跳轉