表單和HTML5

1、form表單

</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>

</select>

2.3按鈕類型

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

送出按鈕：<input type="submit">

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

2.4其他類型

　　……

3、表單元素的寫法總結

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

3.2特殊寫法：

　　</select>

4、相關的一些标簽

4.1 <label></label>

　　為 input 元素定義标注（标記）。

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

　　兩種寫法：

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

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

4.2<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：規定在發送到伺服器之前應該如何對表單資料進行編碼。

　　　　（重要：multipart/form-data：不對字元編碼。當使用有檔案上傳控件的表單時，該值是必需的。）

不對字元編碼。當使用有檔案上傳控件的表單時，該值是必需的。

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

代碼：

頁面效果：

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來顯示目标連結頁面

　　代碼：

　　頁面效果：

小tips：

1、語義标簽：

　　語義= 意義

　　語義元素 = 有意義的元素

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

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

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

2、站點：通俗的了解，站點就是檔案夾

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