表單和HTML5

標籤：can   提示   nbsp   url   出現   hid   標籤   res   legend   

1、form表單

<form action="" method="">

</form>

action: 規定當提交表單時，向何處發送表單資料，其值為一個檔案名稱

method:表單的提交方式：其值有兩個：get，post

　　get：預設值，瀏覽器會將資料直接附在表單的 action url 之後，採用“索引值對”的形式出現

　　post:傳的值不會顯示在url中，相比get更安全

 

2、表單元素

2.1文本類型

文字框：<input type="text">

密碼框：<input type="password">

隱藏欄位：<input type="hidden">

多行文本：<textarea></textarea>

2.2選擇類型

單選：<input type="radio">

多選：<input type="checkbox">

下拉：<select>

           　　<option></option>

           　　<option></option>

           </select>

2.3按鈕類型

普通按鈕：<input type="button">

提交按鈕：<input type="submit">

重設按鈕：<input type="reset">

2.4其他類型

　　<input type="file">

       <input type="image">

　　<input type="date">

　　<input type="email">

　　……

 

3、 表單元素的寫法總結

3.1通用寫法：<input type=”類型”>

3.2特殊寫法：

　　<textarea></textarea>

　　<select>

　　　　<option></option>

  　　　  <option></option>

　　</select>

 

4、相關的一些標籤

4.1 <label></label>

　　為 input 元素定義圖說文字（標記）。

　　label 元素不會向呈現任何特殊效果，但是為滑鼠使用者改進了可用性。如果在 label 元素內點擊文本，就會觸發此控制項。就是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。

　　兩種寫法：

　　1）直接把input用label包裹起來

　　2）  <label for="male">Male</label>

　　　　<input type="radio" name="sex" id="male" />

4.2<fieldset>

　　　　<legend>表單標題</legend>

　 <fieldset>

　　解釋：fieldset 元素可將表單內的相關元素分組

　　　　    legend 元素為fieldset 元素定義標題

 

5、表單的屬性

5.1通用屬性：

5.1.1 name：用於傳值

　　  radio和checkbox的name除了傳值，還用來分組

5.1.2 value

　　1）    text的value是輸入的內容

　　2）    select的value要定義在option上，如果沒有value值，就取其內容的值

　　3）    textarea的value值就是其內容

5.1.3 disabled：元素不可用

5.2 文本元素的屬性：

　　  readonly：唯讀

　　  placeholder：提示文本

5.3選擇元素的屬性

　　  checked：預設選中

　　  selected：是option的屬性，指定預設選中項

5.4其他屬性瞭解

　　form的enctype：規定在發送到伺服器之前應該如何對錶單資料進行編碼。

 

練習：常用表單元素和屬性

代碼：

頁面效果：

 

6、HTML5

　　HTML5是HTML最新的修訂版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。

　　HTML5的設計目的是為了在行動裝置上支援多媒體。 

　　HTML5 中的一些有趣的新特性：

• 用於繪畫的 canvas 元素
• 用於媒介回放的 video 和 audio 元素
• 對本地離線儲存的更好的支援
• 新的特殊內容元素，比如 article、footer、header、nav、section
• 新的表單控制項，比如 calendar、date、time、email、url、search

7、 Iframe

　　使用架構，可以在同一個瀏覽器視窗中顯示不止一個頁面。

　　<iframe src="url"></iframe>

　　執行個體練習：使用iframe來顯示目標連結頁面

　　代碼：

　　

　　頁面效果：

　　

 

 

小tips：

1、語義標籤：

　　語義= 意義

　　語義元素 = 有意義的元素

　　一個語義元素能夠清楚的描述其意義給瀏覽器和開發人員。

　　無語義元素執行個體：<div> 和 <span> - 無需考慮內容

　　語義元素執行個體：<form>, <table>, <img> - 清楚的定義了它的內容

2、網站：通俗的理解，網站就是檔案夾

 

最後寫一點我的心得體會：今天學習了表單和html5相關的知識，內容很多，一下子也背不過，重要的是理解其含義和原理，多用，多敲代碼，學會在網上尋找需要的知識點，理解著記憶、和在實際應用中記憶，是最好的記憶方式，而不是死記硬背。做程式員就是，學習新知識很快，但忘的也快。所以就要不斷的練習，熟能生巧。

表單和HTML5