表單，音訊、視訊
表單、音訊、視訊
使用表單
表單概述
表單主要用於收集網頁上瀏覽者相關資訊。其標記為< form>< /form>,基本格式如下：
<form action="url" method="get|post" enctype="mime"></form>
action指定處理提交表單的格式，他可以是一個URL地址或一個電子郵件地址，method指明提交表單的HTTP方法。enctype指明用來把表單提交給伺服器時的網際網路媒體形式。
表單基本元素使用
常見的有文字框，密碼框，下拉選單，單選按鈕，複選框等等。
- 當行文字輸入框text
文字框是一種讓訪問者自行輸入內容的表單物件。使用格式如下：
<input type="text" name="..." size="..." maxlength="..." value="...">
解釋：type="text"定義單行文字輸入框，name屬性定義文字框的名稱，要保證資料點準確收集，必須定義一個獨一無二的名稱，size屬性定義文字框的寬度，單位是單個字元寬度，maxlength屬性定義最多輸入的字元數，value屬性定義文字框的初始值。
主要用於輸入較長的文字資訊。
格式如下：
<textarea name="..." cols="..." rows="..." wrap="..."></textarea>
解釋：name屬性與文字框屬性一致，cols定義了文字框的寬度，單位是單個字元長度，rows定義多行文字框的高度，單位是單個字元高度，wrap屬性定義輸入內容大於文字域時顯示的方式。
3. 密碼域password
密碼輸入框是一種特殊的文字域，主要用於輸入一些保密資訊。程式碼格式如下：
<input type="password" name="..." size="..." maxlength="...">
解釋：type="password"定義密碼框，name屬性定義密碼框的名稱，要求保證唯一性，size屬性定義密碼框的寬度，單位是單個字元寬度，maxlength屬性定義最多輸入的字元數。
4. 單選按鈕radio
主要是讓網頁瀏覽者在一組選項裡面只能選其一。程式碼格式如下：
<input type="radio" name="..." value="...">
解釋：type="radio"定義單選按鈕，name屬性定義單選按鈕名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱，value屬性定義單選按鈕的值，在同一組中他們的域值必須是不同的。
5. 複選框checkbox
主要是讓網頁瀏覽者在一組選項中可以同時選擇多個選型。每個複選框都是一個獨立的元素，必須有一個唯一的名稱。程式碼格式如下：
<input type="checkbox" name="..." value="...">
解釋：type="checkbox"定義複選框，name屬性定義複選框的名稱，在同一組中的複選框都必須使用同一個名稱，value屬性定義複選框的值。注意：
checked屬性主要用於設定預設的選中項。
6. 選擇列表標記< select>
下拉列表主要用於在有限的空間裡設定多個選型，它既可以用作單選，也可以用作多選。程式碼格式如下：
<select name="..." size="..." multiple>
<option value="..." selected>
....
</option>
....
</select>
解釋：name屬性定義選擇列表的名稱，size屬性定義選擇列表的行數，multiple屬性可以表示多選，如果不設該屬性，則只能單選，value屬性定義選擇項的值，selected屬性表示預設已經選擇本選項。
7. 普通按鈕button
普通按鈕用來控制其他定義了指令碼的處理工作。程式碼格式如下：
<input type="button" name="..." value="..." onclick="...">
解釋：type="button"定義普通按鈕，name屬性定義普通按鈕的名稱，value屬性定義按鈕的顯示文字，onclick屬性表示單擊行為，也可以通過指定指令碼函式來定義按鈕的行為。
8. 提交按鈕submit
提交按鈕用來將輸入的資訊提交到伺服器。程式碼格式如下：
<input type="submit" name="..." value="....">
解釋：type="submit"定義提交按鈕，name屬性定義提交按鈕的名稱，value屬性定義按鈕的顯示文字。通過提交按鈕可以將表單裡面的資訊提交給action所指向的檔案。
9. 重置按鈕reset
重置按鈕用來清空表單中的輸入資訊。程式碼格式如下：
<input type="reset" name="..." value="...">
解釋：type="reset"定義重置按鈕，name屬性定義重置按鈕的名稱，value屬性定義按鈕的顯示文字。
表單高階元素使用
- url屬性
該屬性是用於說明網站網址，顯示為在一個文字框中輸入URL地址，在提交表單時會自動的驗證url的值，程式碼格式如下：
<input type="url" name="userurl"/>
解釋：使用者可以使用普遍屬性設定url輸入框，例如可以使用max屬性設定其最大值，min屬性設定其最小值，step屬性設定合法的數字間隔，value屬性規定其預設值。
2. eamil屬性
該屬性用於讓瀏覽者輸入E-mail地址，在提交表單時會自動驗證email域的值。程式碼格如下：
<input type="email" name="user_email">
- date和Times
日期和時間輸入型別如下列表：
程式碼格式如下：
<input type="date" name="user_date"/>
- number屬性
該屬性提供了一個輸入數字的輸入型別，使用者可以直接輸入數字或者通過單擊微調框中的按鈕選擇數字，程式碼格式如下：
<input type="number" name="shuzi"/>
- range屬性
該屬性可以顯示一個滾動的控制元件，使用者可以使用max，min，和step屬性設定控制元件的範圍，程式碼格式如下：
<input type="range" name="" min="" max=""/>
- required屬性
該屬性規定必須在提交之前填寫輸入域（不能為空），required屬性適合用於以下型別的輸入屬性：text，search，url，email，password，date，pickers，number，checkbox，radio等。
HTML5中的音訊和視訊
< audio>標記
- < audio>標記概述
該標記主要是定義播放聲音檔案和音訊流的標準，支援三中格式：ogg，mp3，wav。
程式碼格式如下：
<audio src="song.mp3" controls="controls">
</audio>
解釋：src屬性是規定要播放的音訊地址，controls屬性是提供新增播放，暫停和音量的控制元件。
2. < audio>標記的屬性
3. 音訊解碼器
其定義了音訊資料流編碼和解碼的演算法。編碼器主要是針對資料流進行編碼操作，用於儲存和傳輸，解碼器主要是對音訊檔案進行解碼，然後進行播放操作。目前使用較多的音訊解碼器是Vorbis和ACC.
< video>標記
- 概述
該標記主要定義播放視訊檔案或視訊流標準，支援三種格式，Ogg，WebM，MPEG4。
格式如下：
<video src="123.mp4" controls="controls"></video>
- 該標記屬性
常見屬性如下表：
程式碼格式如下：
<video width="..." height="..." controls= src="..."></video>
- 視訊解碼器
視訊解碼器定義了視訊資料流編碼和解碼演算法。編碼器主要是針對資料流進行編碼操作，用於儲存和傳輸，解碼器主要是先對視訊檔案進行解碼，然後在進行播放操作。
音訊和視訊中的方法
- canPlayType（）方法
canPlayType（）方法用於檢測瀏覽器地是否能夠播放指定的音訊或視訊檔案，canPlayType（）方法返回值包含如下：
1）probably：瀏覽器全面支援指定的音訊或視訊型別。
2）maybe：瀏覽器可能支援指定的音訊或視訊型別。
3）“ ”（空字串）：瀏覽器不支援指定的音訊或視訊型別。 - load（）方法
該方法用於重新載入音訊或者視訊檔案。語法格式如下：
audio|video.load()
- play()方法和pause（）方法
play（）方法用於開始播放音訊或視訊檔案。pause（）方法用於暫停當前播放的視訊或音訊檔案。
音訊和視訊中的屬性
- autoplay屬性
該屬性設定與返回音訊或視訊是否在載入後立即開始播放。
語法格式如下：
audio|video.autoplay=true|false
- buffered屬性
buffered屬性返回TimeRanges物件。TimeRanges物件表示使用者的音訊或視訊緩衝範圍。緩衝範圍指的是已緩衝音訊或視訊的時間範圍。如果使用者在音訊或視訊中跳躍播放，就會得到多個緩衝範圍。語法格式如下：
audio|video.buffered
- controls屬性
該屬性設定或返回瀏覽器應當顯示標準的音訊或視訊檔案。標準的音訊或視訊控制元件包括播放、暫停、進度條、音量、全屏切換、字幕和軌道。語法格式如下：
audio|video.controls=true|false
- currentSrc屬性
該屬性返回當前音訊或視訊的URL。若未設定則返回空字串。
語法格式如下：
audio|video.currentSrc