使用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: 指定框架的名稱

框架中點擊跳轉