整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
單是PHP程序中最常使用的收集站點訪問者信息的數據輸入界面。通過表單瀏覽器獲取用戶的輸入數據，并傳送給Web服務器的腳本程序中，以各種不同的方式進行處理。在表單中提供了多種輸入方式，包括文本輸入域、單選或多選按鈕、下拉式列表域等。表單是網頁上由<form>標簽定義的一個特定區域，而表單的各種輸入域可以由<input>、<select>和<textarea> 3個標簽定義。
1 表單標簽<form>
一個表單用<form></form>標簽來創建，即定義表單的開始和結束位置，在開始和結束標簽之間的一切定義都屬于表單的內容。單擊提交按鈕時，提交的也是表單范圍之內的內容。另外，在<form>標簽中需要攜帶表單的相關信息，例如處理表單的腳本程序的位置、提交表單的方法等。這些信息對于瀏覽者是不可見的，但對于處理表單卻有著決定性的作用。該標簽的常用屬性如表1所示。
表1 HTML表單標簽中常用的屬性
<form>標簽中必須加action屬性，并且不能為空。例如，<form action="login.php" method="post">。如果不需要使用action屬性，也必須定義：<form action="no">。
2 文本域和密碼域
在<form>標簽內定義的<input>標簽具有重要的地位，該標簽是單個標簽，沒有結束標記。<input type="">標簽用來定義一個用戶輸入區，用戶可以在其中輸入信息。<input>標簽中共提供了9種類型的輸入區域，具體是哪一種類型由type屬性來決定。文本和密碼輸入域是一個單行文本框，它們基本相似，唯一不同的是，用戶在密碼域中輸入的字符并不以原樣顯示，而是將每個字符用“*”代替。文本和密碼輸入域的基本語法格式如下：
<input type="text" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 輸入域 -->
<input type="password" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 密碼域 -->
這些屬性的含義如表2所示。
表2 HTML中<input>標簽的常用屬性z
3 提交、重置和普通按鈕
在<input>標簽中，當type屬性值為“submit”時，表示這是一個提交按鈕，單擊提交按鈕后，可以實現表單內容的提交；當type屬性為“reset”時，表示這是一個重置按鈕，單擊重置按鈕后，表單的內容將恢復為默認值；當type屬性為“button”時，表示這是一個普通按鈕，并不實現任何功能，需要和JavaScript等腳本語言一起使用。button按鈕必須定義在form之間，否則Netscape瀏覽器不支持。這3種按鈕的基本語法格式如下：
<input type="submit" name="field_name" value="field_value"> <!-- 提交按鈕 -->
<input type="reset" name="field_name" value="field_value"> <!-- 重置按鈕 -->
<input type="button" name="field_name" value="field_value"> <!-- 普通按鈕 -->
4 單選按鈕和復選框
單選按鈕和復選框都有“選中”和“未選中”兩種狀態。同一組單選按鈕如果有多個選擇框，則選擇框之間是相互排斥的，只允許用戶選擇其中的一個。復選框和單選按鈕的區別是，復選框允許用戶同時選中同一表單中的多個或全部選項，當然，也可以只選其中的一個選項。它們都是只有在“選中”時，數據才能被提交到服務器端。其語法格式如下所示：
<input type="radio" name="field_name" value="field_value" checked> <!-- 單選按鈕 -->
<input type="checkbox" name="field_name" value="field_value" checked> <!-- 復選框 -->
在<input>標簽中，當type屬性值為“checkbox”時，表示這是一個復選框輸入域；當type屬性值為“radio”時，則表示這是一個單選按鈕輸入域。但在同一組中的多個單選按鈕名稱必須相同，它們之間才能相互排斥。單選按鈕和復選框都可以通過checked屬性設置為選中狀態。
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
1 html5文檔類型和字符集
Html的發展歷程：
文檔類型設定
Document
HTML: sublime輸入html:4s
XHTML: sublime輸入html:xt
HTML5：sublime輸入html：5或者！顯示
2 查看手冊及其新增標簽
常用新標簽（需掌握）
W3c手冊中文官網：w3school
header：定義文檔的頁眉 頭部
nav：定義導航鏈接的部分
footer：定義文檔或節的頁腳 底部
article：定義文章。
section：定義文檔中的節（ section區段）
aside：定義其所處內容之外的內容 側邊
datalist：定義選項列表。與 input元素配合使用該元素
Fieldset：可將表單內的相關元素分組，打包
3 datalist標簽
有提示的下拉菜單
4 fieldset元素
fieldset元素可將表單內的相關元素分組、打包， 和legend搭配使用
5 HTML5新增 iInput表單（一）
6 HTML5新增 input表單（二）
7 新增占位符焦點多選屬性
8 autocomplete屬性
輸入內容自動記錄，方便下次快速輸入
autocomplete必須滿足兩個條件才會起作用，一是必須有提交按鈕，二是必須給給他名字，名字是什么無所謂，例如上面“123”
9 內容不能為空和獲得焦點屬性
required是提示輸入內容不能為空
accesskey是一個快捷鍵屬性，如上字母“s”,意思是在頁面中按“ctrl+s”可以將光標移至此文本框
10 表單綜合案例學生檔案
顯示效果如下（馬賽克不算）：
11 embed引入網上視頻
多媒體標簽 embed：定義嵌入的內容，embed可以用來插入各種多媒體，格式可以是Mid、Wav、AFF、AU、MP3等等。Url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑
因為兼容性問題，我們這里只講解插入網絡視頻，后面H5會講解audio和video視頻多媒體。
12 播放音頻 audio
autoplay是自動播放，controls是顯示播放器，Loop是循環次數
每個瀏覽器的顯示樣式有所不同，每個瀏覽器支持的音頻格式有所不同
Source可以提供多個音頻格式，以便兼容各種瀏覽器。
13 播放視頻 video
跟音頻播放用法一樣
看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
第一階段HTML5的所有章節都已結束，下篇文章將分享《第二階段 CSS3》小伙伴們不要錯過喲！
?
mail 類型用于郵件地址的輸入，很明顯，它只適用于郵箱輸入。
使用格式如下：
<input type="email" />如果你輸入的郵箱格式不正確，會提醒你格式錯誤。
url 類型是專門用來輸入網址的。
使用格式如下：
<input type="url" />也同樣會校驗網址格式是否合法。
number 類型用于數字的輸入，number 類型表單有以下屬性：
屬性 | 描述 |
max | 輸入框允許的最大值。 |
min | 輸入框允許的最小值。 |
step | 合法的數字間隔，例如 step=2，則合法為：2、4、6、8。 |
value | 默認值。 |
例如：設置默認值為 5，步長為 2，每點 ?? 一次，數字 + 2。
<input type="number" value="5" step="2" />range 類型用于包含一定范圍內數值的輸入。與number不同的是，range顯示為進度條。
其使用格式為：
<input type="range" />六種常用的日期選擇類型：
統稱為 Date pickers：
類型 | 描述 |
date | 選取年、月、日 |
month | 選取年、月 |
week | 選取年、周 |
time | 選取時間小時、分鐘 |
datetime | 選取年、月、日和 UTC 時間 |
datetime-local | 選取年、月、日和本地時間 |
例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
date： <input type="date" /> <br />
datetime-local：<input type="datetime-local" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
顯示效果如下：
search 類型的 input 標簽提供用于輸入搜索關鍵字的文本框，從外觀看 search 和 text 是一樣的，功能也是相近的可以輸入任意的字符串。
使用格式如下：
<input type="search" />不能從外觀和功能上能發現 search 類型和 text 類型的區別。那么我們為何還要學 search 類型呢？
如果使用不同的瀏覽器去看，就會發現有細微的差異，比如 Chrome 瀏覽器給 search 類型的輸入框提供了清空按鈕。如果在移動端的話，虛擬鍵盤會根據不同類型的輸入框給出不同的反應。還有就是起到語義化的作用，我們一眼能夠明白這里的 input 是起到搜索的效果。
tel 類型是 input 標簽專門用來輸入電話號碼的文本框，它并不僅局限輸入數字，還可以輸入一些其他的字符，例如：- +（）等。
語法格式如下：
<input type="tel" />datalist 標簽，為輸入框提供一個可選擇的數據列表。在具有自動提示功能的文本框中可以使用這些選擇項來自動補全文本框。該標簽由 datalist 和 option 標簽組合應用。
一個 datalist 標簽中可以包含多個 option 標簽。他們的關系和表單元素 select 和 option 的關系一樣。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
你最愛的水果：
<input list="fruits" id="fruit" name="fruit" />
<datalist id="fruits">
<option value="蘋果"></option>
<option value="李子"></option>
<option value="蘋果"></option>
<option value="西瓜"></option>
<option value="櫻桃"></option>
</datalist>
</body>
</html>顯示為，下拉菜單為提示框
HTML5 新增的 output 元素用于在瀏覽器中顯示計算結果或者腳本輸出，輸出的結果在標簽之間顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form oninput="r.value=parseInt(num1.value)+parseInt(num2.value)">
<!--定義了兩個 number 類型的輸入框，其默認值為 100-->
<input type="number" id="num1" value="100" />
+
<input type="number" id="num2" value="100" />=<!--for 屬性可以綁定對應 id 名的表單元素-->
<output name="r" for="num1 num2"></output>
</form>
</body>
</html>在上面代碼中，有 oninput="r.value=parseInt(num1.value)+parseInt(num2.value)"，我們使用 oninput 來及時獲取輸入框中改變后的值。在等號右側，使用 parseInt 是把輸入框中的值按照整型來解析。
關于 form 標簽中的 oninput 屬性是當元素獲得輸入時被觸發，其中 parseInt 是 JavaScript 中解析整數的函數，這里只要知道它所起的作用就好，不需要去深究。
顯示為，202就是output顯示的
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
