表單和輸入

1、文本域、密碼域、單選按鈕、復(fù)選框、提交按鈕、下拉列表、預(yù)選下拉列表。

<form>
    文本域：<input type="text" name="">
    密碼域：<input type="password" name="">
    單選：a<input type="radio" name="">
    復(fù)選：a<input type="checkbox" name="">b<input type="checkbox" name="">
    <input type="submit" name="">
    <select>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>
    <select>
        <option value="">1</option>
        <option value="">2</option>
        <option value="" selected>3</option>
    </select>
</form>

2、點(diǎn)擊其中一個文本標(biāo)簽選中選項(xiàng)

<form action="#">
<label for="a">a</label>
<input type="radio" name="letter" id="a" value="a">
<label for="b">b</label>
<input type="radio" name="letter" id="b" value="b">
<input type="submit" name="">
</form>

3、對表單中的相關(guān)元素進(jìn)行分組

<form action="#" method="get">
<fieldset>
    <legend>this is a demo</legend>
    A:<input type="text" name="">
    B:<input type="text" name="">
</fieldset>
</form>

4、select屬性
disabled：禁用下拉列表
multiple：可選擇多個選項(xiàng)
（multiple 屬性是一個布爾屬性。在不同操作系統(tǒng)和瀏覽器中，選擇多個選項(xiàng)的差異。對于 windows：按住 Ctrl 按鈕來選擇多個選項(xiàng)；對于 Mac：按住 command 按鈕來選擇多個選項(xiàng)）
required：必須選擇一項(xiàng)
size：下拉列表中可見的項(xiàng)目

<select disabled="true">
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
</select>
<select multiple="true">
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
</select>
<select required>
    <option>111</option>
    <option>222</option>
    <option>333</option>
</select>
<select size="2">
    <option>111</option>
    <option>222</option>
    <option>333</option>
</select>

5、<optgroup>標(biāo)簽:把相關(guān)的選項(xiàng)組合在一起 。

<select>
    <optgroup label="ABC">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </optgroup>
    <optgroup label="123" disabled>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </optgroup>
</select>

6、<datalist> 為 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項(xiàng)是預(yù)先定義好的，將作為用戶的輸入數(shù)據(jù)。使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。

<form action="#" method="get">
<input list="abc">
<datalist id="abc" name="A">
    <option value="Aaaa">
    <option value="Bbbb">
    <option value="Cccc">
    <option value="Dddd">
</datalist>
<input type="submit">
</form>

7、<keygen> 標(biāo)簽規(guī)定用于表單的密鑰對生成器字段。當(dāng)提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務(wù)器。

<form action="#" method="get">
用戶名：<input type="text" name="">
加密：  <keygen name="security"></keygen>
       <input type="submit">
</form>

8、<output> 標(biāo)簽作為計算結(jié)果輸出顯示。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

9、HTML音頻/視頻/多媒體

<audio controls>
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpeg">
</audio>
<!-- 音頻 -->
<video width="320" height="240" controls>
    <source src="a.mp4" type="video/mp4">
    <source src="a.ogg" type="video/ogg">
</video>
<!-- 視頻 -->
<embed src="helloworld.swf">
<!-- 定義嵌入的內(nèi)容 -->
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
<!-- 用于規(guī)定字幕文件或其他包含文本的文件，當(dāng)媒體播放時，這些文件是可見的。 -->

10、 contenteditable 屬性指定元素內(nèi)容是否可編輯。當(dāng)元素中沒有設(shè)置 contenteditable 屬性時，元素將從父元素繼承。

<p contenteditable="true">這是一個段落。是可編輯的。嘗試修改文本。</p>

11、data-* 屬性：用于存儲私有頁面后應(yīng)用的自定義數(shù)據(jù)： 1、屬性名不要包含大寫字母，在 data- 后必須至少有一個字符。 2、該屬性可以是任何字符串。

<h1>物種</h1>
<p>點(diǎn)擊一個物種，看看它是什么類型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
<script>
function showDetails(animal)
{
    var animalType = animal.getAttribute("data-animal-type");
    alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>

12、hidden 屬性規(guī)定對元素進(jìn)行隱藏。隱藏的元素不會被顯示。如果使用該屬性，則會隱藏元素?？梢詫?hidden 屬性進(jìn)行設(shè)置，使用戶在滿足某些條件時才能看到某個元素（比如選中復(fù)選框，等等）。然后，可使用 JavaScript 來刪除 hidden 屬性，使該元素變得可見。

<p>這是可見的段落</p>
<p hidden>這是隱藏的段落</p>