註冊頁面案例

注 冊 頁 面 案 例 註冊頁面案例 註冊頁面案例

標籤名	做用	備註
form	表示表單，是用來收集用戶輸入信息並向 Web 服務器提交的一個容器

舉例：

<form >
    //表單元素
</form>

表單的屬性

屬性名	做用	備註
action	處理此表單信息的Web服務器的URL地址
method	提交此表單信息到Web服務器的方式	可能的值有get和post，默認爲get
autocomplete	自動補全，指示表單元素是否可以擁有一個默認值，配合input標籤使用	HTML5

舉例：

<!-- 一個簡單的表單，會發送一個 GET 請求 -->
<form action="/web/login" method="get">
</form>

<!-- 一個簡單的表單，發送 POST 請求 -->
<form action="/web/reg" method="post">
</form>

GET與POST說明：

post：指的是 HTTP POST 方法；表單數據會包含在表單體內而後發送給服務器。

get：指的是 HTTP GET 方法；表單數據會附加在 action 屬性的URI中，並以 ‘?’ 做爲分隔符，而後這樣獲得的 URI 再發送給服務器。

GET與POST對比：

	地址欄可見	數據安全	數據大小
GET	可見	不安全	有限制（取決於瀏覽器）
POST	不可見	相對安全	無限制

5.2.2 表單元素入門

表單元素指的是 input 元素、複選框、下拉框、提交按鈕等等。

標籤名	做用	備註
**label **	表單元素的說明，配合表單元素使用	for屬性值爲相關表單元素的id屬性值
input	表單中輸入控件，多種輸入類型，用於接受來自用戶數據	type屬性值決定輸入類型
button	頁面中可點擊的按鈕，能夠配合表單進行提交	type屬性值決定按鈕類型

1）簡單的文本輸入框

• label標籤：表單的說明。

  • for屬性值：匹配input標籤的id屬性值

• input標籤：輸入控件。

  • type屬性：表示輸入類型，text值爲普通文本框
  • id屬性：表示標籤惟一標識
  • name屬性：表示標籤名稱
  • value屬性：表示標籤數據值

代碼實現：

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
</form>

2）提交用戶名的表單

• button標籤：表示按鈕。
  • type屬性：表示按鈕類型，submit值爲提交按鈕。

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
  <button type="submit" >login</button>
</form>

5.2.3 關於屬性值

1）NAME和VALUE屬性

屬性名	做用
name	<input>的名字，在提交整個表單數據時，能夠用於區分屬於不一樣<input>的值
value	這個<input>元素當前的值，容許用戶經過頁面輸入

使用方式：

以name屬性值做爲鍵，value屬性值做爲值，構成鍵值對提交到服務器，多個鍵值對瀏覽器使用&進行分隔。

舉例：

2）TYPE屬性

• input標籤的type屬性

  【建議】

  這是今天的重點講解內容，type的值決定輸入的類型

  • 基本的文本屬性

  屬性值	做用	備註
  text	單行文本字段
  password	單行文本字段，值被遮蓋
  email	用於編輯 e-mail 的字段，能夠對e-mail地址進行簡單校驗	HTML5

  舉例：

  <form action="#" method="get">
        <label for="username">Username:</label>
        <input type="text" id="username"  name="username"> <br/>
    
        <label for="password">Password:</label>
        <input type="password" id="password"  name="password"><br/>
    
        <label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="email" id="email"  name="email"><br/>
        <button type="submit"> login</button>
    </form>

  • 單選多選屬性

    屬性值	做用
    radio	單選按鈕。 1. 在同一個」單選按鈕組「中，全部單選按鈕的 name 屬性使用同一個值；一個單選按鈕組中是，同一時間只有一個單選按鈕能夠被選擇。 2. 必須使用 value 屬性定義此控件被提交時的值。 3. 使用checked 必須指示控件是否缺省被選擇。
    checkbox	複選框。 1. 必須使用 value 屬性定義此控件被提交時的值。 2. 使用 checked 屬性指示控件是否被選擇。 3. 選中多個值時，全部的值會構成一個數組而提交到Web服務器

    舉例：

    <form action="#" method="get">
        <label for="gender">性別:</label>
        <input type="radio" id="gender" name="gender" value="boy"/>男
        <input type="radio" name="gender" value="girl" checked="checked"/>女
    
        <hr/>
        <label for="hobby">愛好: </label>
        <input type="checkbox" id="hobby" name="hobby" value="sport"/> 體育
        <input type="checkbox"  name="hobby" value="tech"/> 科技
        <input type="checkbox" name="hobby" value="fun" /> 娛樂
        <input type="checkbox" name="hobby" value="video" checked="checked"/> 短視頻
    </form>

  • 按鈕屬性

    屬性值	做用
    button	無行爲按鈕，用於結合JavaScript實現自定義動態效果
    submit	提交按鈕，用於提交表單數據。
    reset	重置按鈕，用於將表單中內容恢復爲默認值。
    image	圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。還可使用 height 和 width 屬性以像素爲單位定義圖片的大小。

  • HTML5新增的type值

    屬性值	做用	備註
    date	HTML5 用於輸入日期的控件	年，月，日，不包括時間
    time	HTML5 用於輸入時間的控件	不含時區
    datetime-local	HTML5 用於輸入日期時間的控件	不包含時區
    number	HTML5 用於輸入浮點數的控件
    range	HTML5 用於輸入不精確值控件	max-規定最大值 min-規定最小值 step-規定步進值 value-規定默認值
    search	HTML5 用於輸入搜索字符串的單行文本字段	能夠點擊x清除內容
    tel	HTML5 用於輸入電話號碼的控件
    url	HTML5 用於編輯URL的字段	能夠校驗URL地址格式

屬性值	做用	備註
file	此控件可讓用戶選擇文件，用於文件上傳。	使用 accept 屬性能夠定義控件能夠選擇的文件類型。
hidden	此控件用戶在頁面上不可見，但它的值會被提交到服務器，用於傳遞隱藏值

• button標籤的type屬性

  屬性值	做用	備註
  submit	此按鈕將表單數據提交給服務器。若是未指定屬性，或者屬性動態更改成空值或無效值，則此值爲默認值。	同 <input type="submit"/>
  reset	此按鈕重置全部組件爲初始值。	同<input type="reset"/>
  button	此按鈕沒有默認行爲。它能夠有與元素事件相關的客戶端腳本，當事件出現時可觸發。	同<input type="button"/>

3）HTML5新增屬性

屬性名	做用	備註
placeholder	提示用戶輸入框的做用。用於提示的佔位符文本不能包含回車或換行。	僅適用於當type 屬性爲text, search, tel, url or email時; 不然會被忽略。
required	這個屬性指定用戶在提交表單以前必須爲該元素填充值	1. 布爾屬性，可省略屬性值表示true 2. 當type屬性是hidden,image或者button類型時不可以使用
autocomplete	自動補全，規定表單或輸入字段是否應該自動完成。當自動完成開啓，瀏覽器會基於用戶以前的輸入值自動填寫值。	1. 開啓爲on，關閉爲off 2. 能夠設置指定的字段爲off，關閉自動補全

5.2.4 更多表單元素

標籤名	做用	備註
**select **	表單的控件，下拉選項菜單	與option配合實用
optgroup	option的分組標籤	與option配合實用
**option **	select的子標籤，表示一個選項
textarea	表示多行純文本編輯控件	rows表示行高度， cols表示列寬度
fieldset	用來對錶單中的控制元素進行分組(也包括 label 元素)
legend	用於表示它的fieldset內容的標題。	fieldset 的子元素

select舉例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!--  
  select的name屬性值與option的value屬性值,構成鍵值對,提交到Web服務器
-->

textarea舉例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

fieldset舉例：

<form action="#" method="post">
  <fieldset>
    	<legend>是否贊成</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">贊成</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不一樣意</label>
  </fieldset>
</form>

5.3 使用標籤

1. 簡單佈局，使用div標籤
2. 基本文本標籤
3. 表單標籤
4. 圖片標籤

5.4 實現步驟

1. 設置背景圖。
2. 基本上下兩部分佈局。
3. 實現上部（圖片）
4. 實現下部（表單）
5. 實現頁面跳轉，從案例2跳轉到案例3。