【譯】原生表單組件

sunnyxd 發(fā)布于2019-08-02 15:55 / 2753人閱讀

摘要：文本輸入框文本輸入框是最基本的表單組件，它便于用戶輸入各種數(shù)據(jù)。對(duì)大多數(shù)表單組件而言，表單提交后所有具有屬性的組件都會(huì)被提交，即使它們沒有獲值。重置按鈕用于重置所有表單組件為默認(rèn)值。


系列文章說(shuō)明

原文

HTML表單是由組件構(gòu)成的，這些組件是各種瀏覽器都支持的內(nèi)置控件。本文中我們將深入探討它們、了解它們的作用、學(xué)習(xí)如何讓各種瀏覽器更好地支持它們。

雖然這里我們只探討內(nèi)建表單組件，但由于HTML表單有諸多限制、以及不同瀏覽器間的實(shí)現(xiàn)有很多的不同，故web開發(fā)者有時(shí)也得構(gòu)建自定義的表單組件。這部分內(nèi)容將會(huì)在[怎樣創(chuàng)建定制表單組件]()一文中詳細(xì)討論。

文本輸入框

文本輸入框是最基本的表單組件，它便于用戶輸入各種數(shù)據(jù)。然而一些文本框也可以專門用來(lái)實(shí)現(xiàn)一些特定需求。

值得注意的是，HTML文本框只是個(gè)純文本輸入控件。這就意味著你不能用它來(lái)進(jìn)行富文本編輯（如加粗、斜體等）。所謂的富文本編輯器其實(shí)都是自定義的組件。

所有文本框都共享一些公共行為：

它們可以被標(biāo)記為只讀（用戶不可修改輸入的值）或者禁用（輸入的值不會(huì)隨著表單的其他部分一起提交）。

它們可擁有一個(gè)占位符；這是一小段在文本輸入框內(nèi)的、用于簡(jiǎn)明描述文本框作用的文本。

它們都受size（輸入框的物理尺寸）和length（文本框能輸入的最大字符數(shù)）的約束。

它們可以有拼寫檢查，如果瀏覽器支持的話。

兼容性表

屬性（桌面端）

Chrome

Firefox (Gecko)

Opera

Safari

.readonly

1.0

1.0 (1.7 or earlier)

1.0

.disabled

1.0

1.0 (1.7 or earlier)

1.0

.placeholder

10.0

Unknown (4.0)

11.10

4.0

</b>.placeholder</td> <td>10.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>11.50</td> <td>5.0</td> </tr> <tr> <td> <b><input></b>.size</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.maxlength</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.spellcheck</td> <td>10.0</td> <td>Unknown (3.6)</td> <td>10</td> <td>11.0</td> <td>4.0</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.readonly</td> <td>(Yes)</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.disabled</td> <td>(Yes)</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.placeholder</td> <td>2.3</td> <td>4.0 (4.0)</td> <td>?</td> <td>11.10</td> <td>4</td> </tr> <tr> <td> <b><textarea></b>.placeholder</td> <td>?</td> <td>4.0 (4.0)</td> <td>?</td> <td>11.50</td> <td>4</td> </tr> <tr> <td> <b><input></b>.size</td> <td>(Yes)</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.maxlength</td> <td>(Yes)</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.spellcheck</td> <td>?</td> <td>4.0 (4.0)</td> <td>?</td> <td>11.0</td> <td>?</td> </tr> </tbody> </table> <b>單行文本框</b> <p>單行文本框是用<b>type</b>屬性值為<b>text</b>的<b><input></b>元素創(chuàng)建的（若未提供<b>type</b>屬性值，<b>text</b>也是個(gè)默認(rèn)屬性）。此外，如果你指定給<b>type</b>屬性的值不被瀏覽器支持，也會(huì)使用<b>text</b>作為回退值。</p> <pre><input type="text"></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367766");</script></p> <p>單行文本框只有一個(gè)約束：若你輸入的文本中有換行，瀏覽器會(huì)在發(fā)送數(shù)據(jù)前將這個(gè)換行給移除。</p> <p>但是，我們也可以給單行文本框“按需”添加一些約束。這得用到<b>pattern</b>屬性；該屬性會(huì)告訴瀏覽器根據(jù)你選擇的一個(gè)正則表達(dá)式來(lái)驗(yàn)證值的有效性。</p> <pre><input type="text" pattern="^cherry|banana$"></pre> <p>HTML5添加了幾個(gè)<b>type</b>屬性的值來(lái)增強(qiáng)基本的單行文本框。雖然這些值仍會(huì)把<b><input></b>元素呈現(xiàn)為一個(gè)單行文本框，但實(shí)際上它們還給文本框添加了幾個(gè)額外的約束和特性。</p> <b>E-mail輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>email</b>：</p> <pre><input type="email" multiple></pre> <p>它給輸入框添加了這樣的驗(yàn)證約束：用戶需要輸入一個(gè)有效的e-mail地址；其他任何輸入都會(huì)導(dǎo)致輸入框報(bào)錯(cuò)。而通過(guò)設(shè)置<b>multiple</b>屬性，這種輸入框也可以讓用戶輸入多個(gè)e-mail地址。</p> <b>密碼輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>password</b>：</p> <pre><input type="password"></pre> <p>它并未給輸入文本添加任何特殊的約束，只是把輸入框的里值做了隱藏以防止被讀取。</p> <pre><p>注：注意這只是個(gè)用戶界面的特性；瀏覽器還是會(huì)發(fā)送純文本，除非你用Javascript給文本進(jìn)行編碼。</p></pre> <b>搜索框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>search</b>：</p> <pre><input type="search" autosave></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367769");</script></p> <p>文本框和搜索框的主要區(qū)別在于外觀和體驗(yàn)上（通常，搜索框會(huì)以圓角呈現(xiàn)）。但其實(shí)搜索框還增加了一個(gè)特性：輸入的值可被自動(dòng)保存，以實(shí)現(xiàn)在同一站點(diǎn)的不同頁(yè)面中給出自動(dòng)補(bǔ)全。</p> <b>電話號(hào)碼輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>tel</b>：</p> <pre><input type="tel"></pre> <p>由于世界上有多種電話號(hào)碼制式，所以此類型的的文本框不會(huì)給用戶輸入的值強(qiáng)制使用任何約束，主要是一個(gè)語(yǔ)義上的區(qū)別而已。雖然在某些設(shè)備上（尤其是手機(jī)）點(diǎn)擊該輸入框，會(huì)出現(xiàn)一個(gè)不同的虛擬鍵盤。</p> <b>URL輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>url</b>：</p> <pre><input type="url"></pre> <p>為確保只輸入有效的URL，它為輸入框添加了些特殊的驗(yàn)證約束；若輸入的值不是個(gè)符合格式的URL，表單將會(huì)呈現(xiàn)錯(cuò)誤狀態(tài)。</p> <pre><p>注：URL符合格式并不意味著它指向確切存在的地址。</p></pre> <p>有特殊約束并處于錯(cuò)誤狀態(tài)的輸入框會(huì)阻止表單提交；此外，為讓錯(cuò)誤提示更明顯，也可以為它們加些樣式，我們將在[表單數(shù)據(jù)驗(yàn)證]()一文中詳細(xì)討論這點(diǎn)。</p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.type="text"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.type="email"</td> <td>10.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>10.62</td> <td>?</td> </tr> <tr> <td> <b><input></b>.type="password"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.type="search"</td> <td>5.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>11.01</td> <td>5.0</td> </tr> <tr> <td> <b><input></b>.type="tel"</td> <td>5.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>11.01</td> <td>5.0</td> </tr> <tr> <td> <b><input></b>.type="url"</td> <td>10.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>10.62</td> <td>?</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.type="text"</td> <td>(Yes)</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.type="email"</td> <td>Not supported</td> <td>4.0 (4.0)</td> <td>Not supported</td> <td>(Yes)</td> <td>?</td> </tr> <tr> <td> <b><input></b>.type="password"</td> <td>?</td> <td>4.0 (4.0)</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td> <b><input></b>.type="search"</td> <td>Not supported</td> <td>4.0 (4.0)</td> <td>?</td> <td>(Yes)</td> <td>4.0</td> </tr> <tr> <td> <b><input></b>.type="tel"</td> <td>2.3</td> <td>4.0 (4.0)</td> <td>?</td> <td>(Yes)</td> <td>3.1</td> </tr> <tr> <td> <b><input></b>.type="url"</td> <td>Not supported</td> <td>4.0 (4.0)</td> <td>?</td> <td>(Yes)</td> <td>3.1</td> </tr> </tbody> </table> <b>多行文本框</b> <p>多行文本框使用了<b><textarea></b>元素而非<b><input></b>元素。</p> <pre><textarea cols="20" rows="10">
多行文本框與普通的單行文本框間的主要不同在于，用戶可以輸入帶有顯式換行（即支持回車[CR]和換行[LF]字符）的文本。

值得注意的是，使用CSS屬性resize，用戶可以直接改變多行文本框大小，如果你想讓他們這么做的話。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari

</b></td> <td>(Yes)</td> <td>1.0 (1.7 or earlier)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td><b><textarea></b></td> <td>(Yes)</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr></tbody> </table> <b>下拉組件</b> <p>下拉組件能讓用戶很方便地從眾多選項(xiàng)中作選擇。HTML有兩種下拉組件：選擇框和自動(dòng)補(bǔ)全組件。這兩者的交互方式是一樣的，一旦控件被激活，瀏覽器會(huì)展示一列表的值讓用戶從中選擇，這個(gè)值列表會(huì)覆蓋在頁(yè)面內(nèi)容之上。</p> <b>選擇框</b> <p>選擇框是通過(guò)<b><select></b>元素創(chuàng)建的，并使用一或多個(gè)<b><option></b>元素作為其子元素，每個(gè)<b><option></b>都指定了一個(gè)可能的值。</p> <pre><select> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select></pre> <p>若有需要，選擇框的默認(rèn)值可通過(guò)為相應(yīng)的<b><option></b>元素設(shè)置<b>selected</b>屬性進(jìn)行指定。為了給值創(chuàng)建分組，<b><option></b>元素亦可嵌套于<b><optgroup></b>元素中：</p> <pre><select> <optgroup label="fruits"> <option>Banana</option> <option selected>Cherry</option> <option>Lemon</option> </optgroup> <optgroup label="vegetables"> <option>Carrot</option> <option>Eggplant</option> <option>Potatoe</option> </optgroup> </select></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367771");</script></p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td><b><select></b></td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td><b><option></b></td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td><b><optgroup></b></td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td><b><select></b></td> <td>1.0</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td><b><option></b></td> <td>1.0</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td><b><optgroup></b></td> <td>1.0</td> <td>4.0 (4.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> </tbody> </table> <b>多選下拉框</b> <p>默認(rèn)的，選擇框只允許用戶選擇一個(gè)值。要讓用戶能選擇多個(gè)值，可通過(guò)給<b><select></b>元素添加<b>multiple</b>屬性實(shí)現(xiàn)。但此時(shí)，選擇框就不再呈現(xiàn)為一個(gè)下拉組件了，反而呈現(xiàn)為一個(gè)普通的列表框。</p> <pre><select multiple> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367775");</script></p> <pre><p>注：所有支持<b><select></b>元素的瀏覽器也都支持它的<b>multiple</b>屬性。</p></pre> <b>自動(dòng)補(bǔ)全組件</b> <p>通過(guò)使用<b><datalist></b>元素，你可以給表單組件提供說(shuō)明、自動(dòng)補(bǔ)全的值，并通過(guò)子元素<b><option></b>來(lái)指定要呈現(xiàn)的值。設(shè)置好后，這份數(shù)據(jù)列表就能綁定到其他使用了<b>list</b>屬性的組件上了。</p> <p>一旦數(shù)據(jù)列表附加到一個(gè)表單組件上，它的選項(xiàng)就能被用于自動(dòng)補(bǔ)全用戶輸入的文本；典型的情況是，選項(xiàng)被呈現(xiàn)為一個(gè)帶有可能匹配的值的下拉框。</p> <pre><label for="myFruit">What"s your favorite fruit?</label> <input type="text" id="myFruit" list="mySuggestion" /> <datalist id="mySuggestion"> <option>Apple</option> <option>Banana</option> <option>Blackberry</option> <option>Blueberry</option> <option>Lemon</option> <option>Lychee</option> <option>Peach</option> <option>Pear</option> </datalist></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367777");</script></p> <pre><p>注：根據(jù)HTML規(guī)范，<b>list</b>屬性和<b><datalist></b>元素可被用于任何需要用戶輸入的組件上。然而，其并未清楚指明如何在非文本控件上使用，同時(shí)不同瀏覽器的實(shí)現(xiàn)也是各有不同。所以，要在非文本控件使用該特性得多加小心。</p></pre> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td><b><datalist></b></td> <td>20.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>9.6</td> <td>Not supported</td> </tr> <tr> <td> <b><input></b>.list</td> <td>20.0</td> <td>Unknown (4.0)</td> <td>10</td> <td>9.6</td> <td>Not supported</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td><b><datalist></b></td> <td>Not supported</td> <td>4.0 (4.0)</td> <td>Not supported</td> <td>(Yes)</td> <td>Not supported</td> </tr> <tr> <td> <b><input></b>.list</td> <td>Not supported</td> <td>4.0 (4.0)</td> <td>Not supported</td> <td>(Yes)</td> <td>Not supported</td> </tr> </tbody> </table> <b>可勾選組件</b> <p>可勾選組件指的是可以通過(guò)點(diǎn)擊改變其狀態(tài)的組件。有兩種可勾選組件：復(fù)選框和單選框，它們都可以通過(guò)<b>checked</b>屬性來(lái)指示該組件是否默認(rèn)被勾選。</p> <p>值得注意的是，這些組件的行為和其他表單組件不太一樣。對(duì)大多數(shù)表單組件而言，表單提交后所有具有<b>name</b>屬性的組件都會(huì)被提交，即使它們沒有獲值。但對(duì)于可勾選組件，它們的值卻只有在它們被勾選之后才會(huì)提交，如果沒有勾選，則不會(huì)提交東西，包括其<b>name</b>屬性。</p> <b>復(fù)選框</b> <p>復(fù)選框由設(shè)置了<b>type</b>值為<b>checkbox</b>的<b><input></b>元素創(chuàng)建：</p> <pre><input type="checkbox" checked></pre> <p>上面的HTML創(chuàng)建的復(fù)選框是默認(rèn)勾選的。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000006760418");</script></p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="checkbox"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="checkbox"</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr></tbody> </table> <b>單選框</b> <p>單選框由設(shè)置了<b>type</b>值為<b>radio</b>的<b><input></b>元素創(chuàng)建：</p> <pre><input type="radio" checked></pre> <p>幾個(gè)單選框可以被綁定在一起，只要它們使用相同的<b>name</b>屬性值，它們就被視為同一組選框。而在同一組中，只有一個(gè)選框能被勾選；這意味著其中一個(gè)勾選之后，其他所有選框會(huì)自動(dòng)不勾選。</p> <p>到了表單提交時(shí)，也只有被勾選的值會(huì)被提交；如果沒有勾選，整組單選框會(huì)被認(rèn)為處于未知狀態(tài)且不會(huì)隨表單提交。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367779");</script></p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="radio"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="radio"</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr></tbody> </table> <b>按鈕</b> <p>HTML表單中，有三種按鈕：</p> <p><strong>提交按鈕</strong><br>用于發(fā)送表單數(shù)據(jù)給服務(wù)器。<br><strong>重置按鈕</strong><br>用于重置所有表單組件為默認(rèn)值。<br><strong>匿名按鈕</strong><br>這種按鈕不自帶特效，但也可以通過(guò)Javascript代碼進(jìn)行自定義。</p> <p>按鈕可以由<b><button></b>元素或<b><input></b>元素創(chuàng)建。<b>type</b>屬性的值會(huì)指定將呈現(xiàn)何種按鈕。</p> <b>提交按鈕</b> <pre><button type="submit"> This a <br><strong>submit button</strong> </button> <input type="submit" value="This is a submit button"></pre> <b>重置按鈕</b> <pre><button type="reset"> This a <br><strong>reset button</strong> </button> <input type="reset" value="This is a reset button"></pre> <b>匿名按鈕</b> <pre><button type="button"> This a <br><strong>anonymous button</strong> </button> <input type="button" value="This is a anonymous button"></pre> <p>通常使用<b><button></b>或<b><input></b>創(chuàng)建的按鈕行為都是一樣的。然而也存在幾點(diǎn)不同：</p> <p><p>就如先前的例子所示，<b><button></b>元素允許你使用HTML內(nèi)容作為其標(biāo)記內(nèi)容，但<b><input></b>元素只接受純文本內(nèi)容。</p></p> <p><p>使用<b><button></b>元素是，可以采用和按鈕中內(nèi)容不一樣的值。（但在IE8以下的瀏覽器中這是不可行的）</p></p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367837");</script></p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.type="number"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.type="reset"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td> <b><input></b>.type="button"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>3</td> <td>1.0</td> <td>1.0</td> </tr> <tr> <td><b><button></b></td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>(Yes)(Buggy before IE8)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.type="number"</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="reset"</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="button"</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> <tr> <td><b><button></b></td> <td>1.0</td> <td>1.0 (1.0)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr> </tbody> </table> <b>高級(jí)表單組件</b> <p>這一系列的組件能讓用戶輸入一些復(fù)雜或高度結(jié)構(gòu)化的數(shù)據(jù)，包括精確或近似數(shù)字、日期和時(shí)間、顏色。</p> <b>數(shù)字</b> <p>數(shù)字組件是通過(guò)<b>type</b>設(shè)置為<b>number</b>的<b><input></b>元素創(chuàng)建的。該控件看起來(lái)像文本框，但卻只允許輸入浮點(diǎn)數(shù)，而且通常還會(huì)帶有幾個(gè)按鈕來(lái)增加或減少組件的值。</p> <p>我們可以通過(guò)設(shè)置<b>min</b>和<b>max</b>屬性來(lái)約束該組件的值。也可以通過(guò)<b>step</b>屬性來(lái)指定該組件的增加和減少按鈕的改變量。</p> <pre><input type="number" min="1" max="10" step="2"></pre> <p>上述代碼創(chuàng)建了一個(gè)取值被限制在1到10之間的數(shù)字組件，其增加和減少按鈕的改變量為2。</p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="number"</td> <td>11.0</td> <td>Not supported</td> <td>10(recognized but no UI)</td> <td>(Yes)</td> <td>5.2</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="number"</td> <td>2.3</td> <td>Not supported</td> <td>Not supported</td> <td>(Yes)</td> <td>4.0</td> </tr></tbody> </table> <b>滑塊</b> <p>另一種選取數(shù)字的方法是使用滑塊。由于操作滑塊看起來(lái)不及文本框輸入數(shù)字精確，所以滑塊常用于選取對(duì)值的要求不是很精確的數(shù)字。</p> <p>滑塊組件是通過(guò)<b>type</b>設(shè)置為<b>range</b>的<b><input></b>元素創(chuàng)建的。適當(dāng)配置滑塊是很重要的，強(qiáng)烈推薦你設(shè)置其<b>min</b>, <b>max</b>, <b>step</b>屬性。</p> <pre><input type="range" min="1" max="5" step="1"></pre> <p>示例中創(chuàng)建了一個(gè)取值被限制在1到5之間的滑塊組件，其增加和減少按鈕的改變量分別為+1和-1。</p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="range"</td> <td>5.0</td> <td>23.0</td> <td>10</td> <td>10.62</td> <td>4.0</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="range"</td> <td>Not supported</td> <td>23.0</td> <td>Not supported</td> <td>10.62</td> <td>5.0</td> </tr></tbody> </table> <b>日期和時(shí)間選擇器</b> <p>收集日期和時(shí)間的值在之前往往是web開發(fā)者的噩夢(mèng)。現(xiàn)在HTML5通過(guò)引入一個(gè)特殊的控件用于處理這類特定的數(shù)據(jù)，帶來(lái)了一些新改進(jìn)。</p> <p>日期和時(shí)間控件是通過(guò)<b>type</b>設(shè)置為特定值的<b><input></b>元素創(chuàng)建的。因?yàn)槟憧赡芟Ｍ苁占掌凇r(shí)間或者兩者兼有，所以它提供了幾個(gè)不同的<b>type</b>屬性值：</p> <b>date</b> <p>創(chuàng)建展示和選取日期、但不含具體時(shí)間的組件。</p> <pre><input type="date"></pre> <b>datetime</b> <p>創(chuàng)建展示和選取日期、并帶有UTC時(shí)區(qū)時(shí)間的組件。</p> <pre><input type="datetime"></pre> <b>datetime-local</b> <p>創(chuàng)建展示和選取日期、并帶有任何指定時(shí)區(qū)時(shí)間的組件。</p> <pre><input type="datetime-local"></pre> <b>month</b> <p>創(chuàng)建展示和選取月份、并帶有年份的組件。</p> <pre><input type="month"></pre> <b>time</b> <p>創(chuàng)建展示和選取一個(gè)時(shí)間值的組件。</p> <pre><input type="time"></pre> <b>week</b> <p>創(chuàng)建展示和選取周數(shù)、并帶其年份的組件。</p> <pre><input type="week"></pre> <p>所有的日期與時(shí)間控件都可以使用<b>max</b>和<b>min</b>屬性進(jìn)行約束：</p> <pre><label for="myDate">When are you available this summer?</label> <input type="date" min="2013-06-01" max="2013-08-31" id="myDate"></pre> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.type="date"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="datetime"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="datetime-local"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="month"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="time"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="week"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td> <b><input></b>.type="date"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>5.0</td> </tr> <tr> <td> <b><input></b>.type="datetime"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="datetime-local"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="month"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="time"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> <tr> <td> <b><input></b>.type="week"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>10.62</td> <td>(Yes)</td> </tr> </tbody> </table> <pre><p>警告：日期和時(shí)間組件都是很新的組件，甚至那些聲稱支持它們的瀏覽器也常有重大的用戶界面問(wèn)題，這讓這些組件很難被使用。所以在發(fā)布你的內(nèi)容之前，請(qǐng)先徹底地在不同的瀏覽器上測(cè)試一遍！</p></pre> <b>顏色選擇器</b> <p>通常顏色都有點(diǎn)難于處理，因?yàn)橛性S多種方式來(lái)表示它們：RGB值（十進(jìn)制或十六進(jìn)制）、HSL值、關(guān)鍵字等等。而顏色選擇器能方便用戶以文本或圖形的形式選擇顏色。</p> <p>顏色組件是通過(guò)<b>type</b>設(shè)置為<b>color</b>的<b><input></b>元素創(chuàng)建的。</p> <pre><input type="color"></pre> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="color"</td> <td>21.0</td> <td>Not supported</td> <td>Not supported</td> <td>11.01</td> <td>Not supported</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="color"</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> <td>?</td> <td>Not supported</td> </tr></tbody> </table> <b>其他組件</b> <p>還有一些組件難以被歸類，因?yàn)樗鼈儞碛幸恍┓浅Ｌ厥獾男袨椋坏鋵?shí)它們也是很有用的。</p> <b>文件選擇器</b> <p>HTML表單可以向服務(wù)器發(fā)送文件，關(guān)于這點(diǎn)，在[發(fā)送表單數(shù)據(jù)]()一文中有詳細(xì)的討論。文件選擇器組件是讓用戶選擇一或多個(gè)文件進(jìn)行發(fā)送的一種方式。</p> <p>文件選擇器組件是通過(guò)<b>type</b>設(shè)置為<b>file</b>的<b><input></b>元素創(chuàng)建的。被接收的文件類型可通過(guò)使用<b>accept</b>屬性進(jìn)行指定；此外，若你想讓用戶選擇不止一個(gè)文件，可以添加<b>multiple</b>屬性。</p> <p>在下面的例子中，我們創(chuàng)建了一個(gè)接收?qǐng)D像圖形文件的文件選擇器，它也允許用戶選擇多個(gè)文件。</p> <pre><input type="file" accept="image/*" multiple></pre> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="file"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>3.02</td> <td>1.0</td> <td>1.0</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="file"</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr></tbody> </table> <b>隱藏內(nèi)容</b> <p>有時(shí)因?yàn)榧夹g(shù)原因，我們得讓一些隨表單發(fā)送的數(shù)據(jù)對(duì)用戶不可見。要這樣做，你可以在你的表單中添加一個(gè)隱藏元素，只需使用<b>type</b>設(shè)置為<b>hidden</b>的<b><input></b>元素。</p> <p>若你創(chuàng)建了這種元素，還必須設(shè)置其<b>name</b>和<b>value</b>屬性：</p> <pre><input type="hidden" name="timestamp" value="1286705410"></pre> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="hidden"</td> <td>1.0</td> <td>1.0 (1.7 or earlier)</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="hidden"</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr></tbody> </table> <b>圖像按鈕</b> <p>圖像按鈕控件表面看起來(lái)就像是<b></pre> <p>若圖像按鈕被用于提交表單，它不會(huì)提交它的值，而是提交在圖片上點(diǎn)擊的X和Y坐標(biāo)（坐標(biāo)是相對(duì)圖像而言的，取左上角為(0, 0)坐標(biāo)）。坐標(biāo)以兩個(gè)鍵/值對(duì)的形式發(fā)送，X值的鍵名是<b>name</b>屬性的值加上字符串".x"，Y值的鍵名是<b>name</b>屬性的值加上字符串".y"。這樣就提供了一種便于創(chuàng)建“熱點(diǎn)地圖”的方式。</p> <p>舉個(gè)例子：</p> <pre><form action="http://foo.com" method="get">  <input type="image" name="pos" alt="" src="map.png" /> </form></pre> <p>當(dāng)你點(diǎn)擊這個(gè)表單的圖像時(shí)，你會(huì)發(fā)送出如下URL：</p> <pre>http://foo.com?pos.x=123&pos.y=456</pre> <p><b>pos.x</b>和<b>pos.y</b>參數(shù)的值取決于你點(diǎn)擊了圖片上哪個(gè)地方。這些數(shù)據(jù)的發(fā)送和檢索將在[發(fā)送表單數(shù)據(jù)]()一文中討論。</p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="image"</td> <td>1.0</td> <td>1.0</td> <td>2</td> <td>1.0</td> <td>1.0</td> </tr></tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody><tr> <td> <b><input></b>.type="image"</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> <td>(Yes)</td> </tr></tbody> </table> <b>度量和進(jìn)度條</b> <p>度量和進(jìn)度條是數(shù)字值的可視化表示。</p> <p>進(jìn)度條代表一個(gè)隨時(shí)間變化、直至達(dá)到由<b>max</b>屬性指定的最大值的值。進(jìn)度條使用<b><progress></b>元素進(jìn)行創(chuàng)建，<b><progress></b>元素的內(nèi)容用于讓不支持該元素的瀏覽器作降級(jí)處理、也讓無(wú)障礙設(shè)備能讀出來(lái)。</p> <pre><progress max="100" value="75">75/100</progress></pre> <p>度量條表示一個(gè)處于由<b>min</b>和<b>max</b>值劃分的范圍的固定值。該值被渲染為一個(gè)長(zhǎng)條，長(zhǎng)條使用<b><meter></b>元素進(jìn)行創(chuàng)建，<b><meter></b>元素的內(nèi)容用于讓不支持該元素的瀏覽器作降級(jí)處理、也讓無(wú)障礙設(shè)備能讀出來(lái)。</p> <pre><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> <p>而要知道該長(zhǎng)條長(zhǎng)什么樣子，我們還得比較它的<b>value</b>值與另外幾個(gè)值：</p> <p> <p><b>low</b>和<b>high</b>值將一個(gè)長(zhǎng)條的范圍劃分了三個(gè)部分：</p> <p><p>范圍較低的那部分位于<b>min</b>和<b>low</b>之間（含這兩個(gè)值）。</p></p> <p><p>范圍的中間部分位于<b>low</b>和<b>high</b>之間（不含這兩個(gè)值）。</p></p> <p><p>范圍較高的那部分位于<b>high</b>和<b>max</b>之間（含這兩個(gè)值）。</p></p> </p> <p> <p><b>optimum</b>值定義了<b><meter></b>元素的最佳值。結(jié)合<b>low</b>和<b>high</b>值，就能確定一個(gè)長(zhǎng)條范圍的哪個(gè)部分是最佳的：</p> <p><p>若<b>optimum</b>值位于范圍較低的那部分，則較低的那部分是最佳的部分，中間部分是平均的部分，較高的那部分則是最差的部分。</p></p> <p><p>若<b>optimum</b>值位于范圍的中間部分，則較低的那部分是平均的部分，中間部分是最佳的部分，較高的那部分也還是平均的部分。</p></p> <p><p>若<b>optimum</b>值位于范圍較高的那部分，則較低的那部分是最差的部分，中間部分是平均的部分，較高的那部分是最佳的部分。</p></p> </p> <p>所有實(shí)現(xiàn)了<b><meter></b>元素的瀏覽器都會(huì)使用上述的值來(lái)改變度量長(zhǎng)條的顏色：</p> <p><p>若現(xiàn)在的值位于范圍最佳的部分，則長(zhǎng)條顯示為綠色。</p></p> <p><p>若現(xiàn)在的值位于范圍平均的部分，則長(zhǎng)條顯示為黃色。</p></p> <p><p>若現(xiàn)在的值位于范圍最差的部分，則長(zhǎng)條顯示為紅色。</p></p> <p><strong>兼容性表</strong></p> <table> <thead><tr> <th>屬性（桌面端）</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td><b><progress></b></td> <td>6.0</td> <td>6.0(6.0)</td> <td>10</td> <td>10.6</td> <td>5.2</td> </tr> <tr> <td><b><meter></b></td> <td>6.0</td> <td>16.0(16.0)</td> <td>Not supported</td> <td>11.0</td> <td>5.2</td> </tr> </tbody> </table> <table> <thead><tr> <th>屬性（移動(dòng)端）</th> <th>Android</th> <th>Firefox (Gecko)</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr></thead> <tbody> <tr> <td><b><progress></b></td> <td>Not supported</td> <td>6.0(6.0)</td> <td>Not supported</td> <td>11.0</td> <td>?</td> </tr> <tr> <td><b><meter></b></td> <td>Not supported</td> <td>16.0(16.0)</td> <td>Not supported</td> <td>11.0</td> <td>?</td> </tr> </tbody> </table> <b>參見</b> <p>若要深入了解表單組件的不同，這里還提供了一些你應(yīng)該看看的有用資源：</p> <p><p>The Current State of HTML5 Forms by Wufoo</p></p> <p><p>HTML5 Tests - inputs on Quirksmode (也可用于移動(dòng)端瀏覽器)</p></p> </div> <div id="pbfzr1d" class="mt-64 tags-seach" > <div id="5dlrvzt" class="tags-info"> <a style="width:120px;" title="云服務(wù)器" href="http://specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a> <a style="width:120px;" title="GPU云服務(wù)器" href="http://specialneedsforspecialkids.com/site/product/gpu.html">GPU云服務(wù)器</a> <a style="width:120px;" title="表單組件" href="http://specialneedsforspecialkids.com/yun/tag/biaodanzujian/">表單組件</a> <a style="width:120px;" title="java表單框的組件" href="http://specialneedsforspecialkids.com/yun/tag/javabiaodankuangdezujian/">java表單框的組件</a> <a style="width:120px;" title="linux下編譯阿里" href="http://specialneedsforspecialkids.com/yun/tag/linuxxiabianyiali/">linux下編譯阿里</a> <a style="width:120px;" title="linux下編譯運(yùn)行" href="http://specialneedsforspecialkids.com/yun/tag/linuxxiabianyiyunxing/">linux下編譯運(yùn)行</a> </div> </div> <div id="vpfvndf" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p> <p>轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54365.html</p> </div> <ul class="pre-next-page"> <li id="vdx5zlb" class="ellipsis"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/54364.html">上一篇：IOS中彈出鍵盤后出現(xiàn)fixed失效現(xiàn)象的解決方案</a></li> <li id="ldhb5xj" class="ellipsis"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/54366.html">下一篇：【譯】怎么樣構(gòu)建HTML表單</a></li> </ul> </div> <div id="nldxpnl" class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div id="pv5dx77" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/111442.html"><b>【<em>譯</em>】<em>表單</em><em>組件</em>的屬性兼容性表</b></a></h2> <p class="ellipsis2 good">摘要：系列文章說(shuō)明原文下面的兼容性表將總結(jié)出表單對(duì)的支持程度，由于和表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。該屬性不能生效，或者表現(xiàn)很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會(huì)在上的瀏覽器上生效。系列文章說(shuō)明原文下面的兼容性表將總結(jié)出HTML表單對(duì)CSS的支持程度，由于CSS和HTML表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。盡管如此，它們...</p> <div id="xfpbvht" class="com_white-left-info"> <div id="h7jlrdh" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-20.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/00/small_000000020.jpg" alt=""><span id="dlbh5xl" class="layui-hide64">李文鵬</span></a> <time datetime="">2019-08-29 11:07</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="pz77x7x" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/49988.html"><b>【<em>譯</em>】<em>表單</em><em>組件</em>的屬性兼容性表</b></a></h2> <p class="ellipsis2 good">摘要：系列文章說(shuō)明原文下面的兼容性表將總結(jié)出表單對(duì)的支持程度，由于和表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。該屬性不能生效，或者表現(xiàn)很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會(huì)在上的瀏覽器上生效。系列文章說(shuō)明原文下面的兼容性表將總結(jié)出HTML表單對(duì)CSS的支持程度，由于CSS和HTML表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。盡管如此，它們...</p> <div id="777tzp5" class="com_white-left-info"> <div id="ldhzp5h" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-1315.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/13/small_000001315.jpg" alt=""><span id="fztvllh" class="layui-hide64">XanaHopper</span></a> <time datetime="">2019-08-01 15:35</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="7dzrjvl" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/111351.html"><b>【<em>譯</em>】HTML<em>表單</em>高級(jí)樣式</b></a></h2> <p class="ellipsis2 good">摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫(kù)和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無(wú)期。其表單部分挺有用的。系列文章說(shuō)明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來(lái)探索HTML表單樣式的那...</p> <div id="13xhxvz" class="com_white-left-info"> <div id="nplppdb" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-609.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/06/small_000000609.jpg" alt=""><span id="bn39j3p" class="layui-hide64">caikeal</span></a> <time datetime="">2019-08-29 10:59</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="5dlj1nd" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/49937.html"><b>【<em>譯</em>】HTML<em>表單</em>高級(jí)樣式</b></a></h2> <p class="ellipsis2 good">摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫(kù)和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無(wú)期。其表單部分挺有用的。系列文章說(shuō)明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來(lái)探索HTML表單樣式的那...</p> <div id="vrl915h" class="com_white-left-info"> <div id="pf57tbp" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-351.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/03/small_000000351.jpg" alt=""><span id="7zvnvxn" class="layui-hide64">Jacendfeng</span></a> <time datetime="">2019-08-01 15:29</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="zpv55fp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/54367.html"><b>【<em>譯</em>】HTML<em>表單</em>指南---第一個(gè)HTML<em>表單</em></b></a></h2> <p class="ellipsis2 good">摘要：一個(gè)表單由一或多個(gè)部件組成，這些部件可以是文本框單行或多行選擇框按鈕復(fù)選框或單選按鈕。在我們的示例里，一個(gè)文本框中用了該屬性的默認(rèn)值，該值表示一個(gè)基本的單行文本框，用于接收無(wú)控制或驗(yàn)證的任何文本。前言這個(gè)系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關(guān)的基礎(chǔ)知識(shí)。而表單作為一個(gè)經(jīng)典的頁(yè)面交互方式，是每個(gè)前端工程師繞不開的話題，通過(guò)翻譯這個(gè)系列的文章既是有助于掃清自己的知識(shí)盲區(qū)...</p> <div id="tbdjpdf" class="com_white-left-info"> <div id="rdfldff" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-1200.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/12/small_000001200.jpg" alt=""><span id="b7nfjln" class="layui-hide64">yearsj</span></a> <time datetime="">2019-08-02 15:55</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="n7dvpzr" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/93895.html"><b>[<em>譯</em>] 別再對(duì) Angular <em>表單</em>的 ControlValueAccessor 感到迷惑</b></a></h2> <p class="ellipsis2 good">摘要：在里我們簡(jiǎn)單保存了對(duì)回調(diào)函數(shù)的引用，回調(diào)函數(shù)是由指令傳入的譯者注參考，只要每次組件值發(fā)生改變，就會(huì)觸發(fā)這個(gè)回調(diào)函數(shù)。原文鏈接：Never again be confused when implementing ControlValueAccessor in Angular?forms showImg(https://segmentfault.com/img/bV7rR7?w=400...</p> <div id="nnbhvnz" class="com_white-left-info"> <div id="pbr7lnb" class="com_white-left-infol"> <a href="http://specialneedsforspecialkids.com/yun/u-1061.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/10/small_000001061.jpg" alt=""><span id="fx7z5lp" class="layui-hide64">blastz</span></a> <time datetime="">2019-08-22 15:57</time> <span><i class="fa fa-commenting"></i>評(píng)論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div id="r5v3fbx" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發(fā)表評(píng)論</span></h3> <div id="nz557df" class="xcp-publish-main flex_box_zd"> <div id="zd5dr13" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評(píng)論</a> </div> </div> </div> <div id="d7n7r7x" class="site-box-content"> <div id="r7vp5rd" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評(píng)論</span></h3> </div> <div id="jn557nb" class="pages"></ul></div> </div> </div> <div id="tfnf55l" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="xxlfj5j" class=""> <div id="h5bfx7z" class="com_layuiright-box user-msgbox"> <a href="http://specialneedsforspecialkids.com/yun/u-757.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/07/small_000000757.jpg" alt=""></a> <h3><a href="http://specialneedsforspecialkids.com/yun/u-757.html" rel="nofollow">sunnyxd</a></h3> <h6>男<span>|</span>高級(jí)講師</h6> <div id="9r5dtvx" class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(757)" id="attenttouser_757" class="grad follow-btn notfollow attention">我要關(guān)注</a> <a href="javascript:login()" title="發(fā)私信" >我要私信</a> </div> <div id="nztv57x" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://specialneedsforspecialkids.com/yun/ut-757.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/116774.html">文本溢出顯示省略號(hào)</a></h3> <p>閱讀 3490<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/113971.html">曾經(jīng)面試踩過(guò)的坑，都在這里了～</a></h3> <p>閱讀 3406<span>·</span>2019-08-29 16:54</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/113916.html">自制簡(jiǎn)單的range（Vue）</a></h3> <p>閱讀 2190<span>·</span>2019-08-29 16:41</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/102749.html">uni-app項(xiàng)目展示屏幕文字滾動(dòng)效果</a></h3> <p>閱讀 2397<span>·</span>2019-08-23 16:10</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/101470.html">淺談JavaScript代碼預(yù)解析 + 示例詳解</a></h3> <p>閱讀 3377<span>·</span>2019-08-23 15:04</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/99867.html">使用 Solid 私有化存儲(chǔ) IPFS 文件哈希值</a></h3> <p>閱讀 1342<span>·</span>2019-08-23 13:58</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/97293.html">JavaScript六種非常經(jīng)典的對(duì)象繼承方式</a></h3> <p>閱讀 347<span>·</span>2019-08-23 11:40</p></li> <li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/96336.html">HTML5 新特性</a></h3> <p>閱讀 2452<span>·</span>2019-08-23 10:26</p></li> </ul> </div>  <div id="bztzrrf" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動(dòng)</span></h6> <div id="xxzpvjl" class="com_adbox"> <div id="xv7ln5v" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://specialneedsforspecialkids.com/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器"> </a> </div> <div> <a href="http://specialneedsforspecialkids.com/site/product/gpu.html" rel="nofollow"> <img src="http://specialneedsforspecialkids.com/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器"> </a> </div> </div> </div> </div>  <div id="j7hxt5j" class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"http://specialneedsforspecialkids.com/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section>  <div id="ntj3htt" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div>  <div id="hfldxpp" class="site-mobile-shade"></div>  <div class="lvbfbpd" id="payread"> <div id="xlnp5vj" class="layui-form-item">閱讀需要支付1元查看</div> <div id="tfjbf5b" class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("復(fù)制代碼 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("復(fù)制成功") }); clipboard.on('error', function(e) { alert("復(fù)制失敗") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="http://specialneedsforspecialkids.com/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="http://specialneedsforspecialkids.com/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="http://specialneedsforspecialkids.com/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付費(fèi)閱讀", shadeClose: true, content: $('#payread') }); } // 舉報(bào) function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加載評(píng)論 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("評(píng)論內(nèi)容不能為空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"http://specialneedsforspecialkids.com/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "http://specialneedsforspecialkids.com/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人贊"); } }); }else{ alert("您已經(jīng)贊過(guò)"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交數(shù)據(jù)的類型 POST GET type:"POST", //提交的網(wǎng)址 url:"http://specialneedsforspecialkids.com/yun/favorite/topicadd.html", //提交的數(shù)據(jù) data:{tid:_tid,rs:_rs}, //返回?cái)?shù)據(jù)的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請(qǐng)求之前調(diào)用的函數(shù) beforeSend:function(){}, //成功返回之后調(diào)用的函數(shù) success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //調(diào)用執(zhí)行后調(diào)用的函數(shù) complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //調(diào)用出錯(cuò)執(zhí)行的函數(shù) error: function(){ //請(qǐng)求出錯(cuò)處理 postadopt=false; } }); } </script> <footer> <div id="xvxbjjx" class="layui-container"> <div id="xrvvznd" class="flex_box_zd"> <div id="xhlr5vh" class="left-footer"> <h6><a href="http://specialneedsforspecialkids.com/"><img src="http://specialneedsforspecialkids.com/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6> <p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計(jì)算服務(wù)平臺(tái)，堅(jiān)持中立，不涉足客戶業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺(tái)、AI服務(wù)平臺(tái)等一系列云計(jì)算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場(chǎng)景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p> </div> <div id="hdlnt5p" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務(wù)</h6> <p><a href="http://specialneedsforspecialkids.com/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://specialneedsforspecialkids.com/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://specialneedsforspecialkids.com/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://specialneedsforspecialkids.com/site/pro-notice/">產(chǎn)品動(dòng)態(tài)</a></p> </li> <li> <h6>友情鏈接</h6> <p><a >GPU算力平臺(tái)</a></p> <p><a >UCloud私有云</a></p> <p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >Pinex</a></p> <p><a >AI繪畫</a></p> </li> <li> <h6>社區(qū)欄目</h6> <p><a href="http://specialneedsforspecialkids.com/yun/column/index.html">專欄文章</a></p> <p><a href="http://specialneedsforspecialkids.com/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問(wèn)題</h6> <p><a href="http://specialneedsforspecialkids.com/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://specialneedsforspecialkids.com/site/about/news/recent/" >新聞動(dòng)態(tài)</a></p> <p><a href="http://specialneedsforspecialkids.com/site/about/news/report/">媒體動(dòng)態(tài)</a></p> <p><a href="http://specialneedsforspecialkids.com/site/cases.html">客戶案例</a></p> <p><a href="http://specialneedsforspecialkids.com/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span> <p>掃掃了解更多</p></div> </div> <div id="t7zdjjj" class="copyright">Copyright ? 2012-2023 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號(hào)</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號(hào)-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://specialneedsforspecialkids.com/" title="国产xxxx99真实实拍">国产xxxx99真实实拍</a> <div class="friend-links"> <a href="http://belistarlp.com/">国产黄色在线</a> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="17tjv" class="pl_css_ganrao" style="display: none;"><label id="17tjv"></label><b id="17tjv"><dl id="17tjv"></dl></b><strike id="17tjv"></strike><legend id="17tjv"><thead id="17tjv"></thead></legend><em id="17tjv"></em><font id="17tjv"><th id="17tjv"></th></font><label id="17tjv"><div id="17tjv"><pre id="17tjv"><nobr id="17tjv"></nobr></pre></div></label><dfn id="17tjv"></dfn><ruby id="17tjv"><b id="17tjv"><mark id="17tjv"><optgroup id="17tjv"></optgroup></mark></b></ruby><dl id="17tjv"><meter id="17tjv"><b id="17tjv"><label id="17tjv"></label></b></meter></dl><tt id="17tjv"><video id="17tjv"><div id="17tjv"><tt id="17tjv"></tt></div></video></tt><dl id="17tjv"><output id="17tjv"></output></dl><thead id="17tjv"><video id="17tjv"><p id="17tjv"><b id="17tjv"></b></p></video></thead><label id="17tjv"></label><legend id="17tjv"></legend><legend id="17tjv"><thead id="17tjv"><listing id="17tjv"><div id="17tjv"></div></listing></thead></legend><track id="17tjv"></track><u id="17tjv"><strong id="17tjv"></strong></u><big id="17tjv"></big><u id="17tjv"></u><legend id="17tjv"><sub id="17tjv"><video id="17tjv"><legend id="17tjv"></legend></video></sub></legend><form id="17tjv"><meter id="17tjv"><u id="17tjv"><acronym id="17tjv"></acronym></u></meter></form><p id="17tjv"></p><var id="17tjv"><progress id="17tjv"><optgroup id="17tjv"><ol id="17tjv"></ol></optgroup></progress></var><var id="17tjv"><big id="17tjv"></big></var><menuitem id="17tjv"><form id="17tjv"><label id="17tjv"><meter id="17tjv"></meter></label></form></menuitem><b id="17tjv"><strong id="17tjv"><div id="17tjv"><form id="17tjv"></form></div></strong></b><progress id="17tjv"><small id="17tjv"><th id="17tjv"><thead id="17tjv"></thead></th></small></progress><pre id="17tjv"><mark id="17tjv"></mark></pre><nobr id="17tjv"></nobr><sup id="17tjv"><big id="17tjv"></big></sup><thead id="17tjv"><font id="17tjv"><dfn id="17tjv"><thead id="17tjv"></thead></dfn></font></thead><rp id="17tjv"><p id="17tjv"><tt id="17tjv"><strong id="17tjv"></strong></tt></p></rp><rp id="17tjv"><strong id="17tjv"><pre id="17tjv"><ins id="17tjv"></ins></pre></strong></rp><form id="17tjv"><optgroup id="17tjv"><var id="17tjv"><mark id="17tjv"></mark></var></optgroup></form><em id="17tjv"><track id="17tjv"><strike id="17tjv"><font id="17tjv"></font></strike></track></em><font id="17tjv"><ruby id="17tjv"></ruby></font><meter id="17tjv"></meter><meter id="17tjv"><u id="17tjv"><dl id="17tjv"><output id="17tjv"></output></dl></u></meter><address id="17tjv"><meter id="17tjv"><form id="17tjv"><acronym id="17tjv"></acronym></form></meter></address><sub id="17tjv"></sub><i id="17tjv"><font id="17tjv"></font></i><optgroup id="17tjv"></optgroup><pre id="17tjv"></pre><small id="17tjv"></small><sup id="17tjv"></sup><mark id="17tjv"><dfn id="17tjv"><pre id="17tjv"><ins id="17tjv"></ins></pre></dfn></mark><b id="17tjv"><strong id="17tjv"><div id="17tjv"><u id="17tjv"></u></div></strong></b><u id="17tjv"><listing id="17tjv"></listing></u><tt id="17tjv"><dl id="17tjv"><div id="17tjv"><tt id="17tjv"></tt></div></dl></tt><em id="17tjv"></em><dl id="17tjv"></dl><mark id="17tjv"><dfn id="17tjv"><sup id="17tjv"><mark id="17tjv"></mark></sup></dfn></mark><font id="17tjv"><track id="17tjv"><strike id="17tjv"><font id="17tjv"></font></strike></track></font><big id="17tjv"><em id="17tjv"></em></big><address id="17tjv"><dfn id="17tjv"><thead id="17tjv"><small id="17tjv"></small></thead></dfn></address><em id="17tjv"></em><video id="17tjv"></video><meter id="17tjv"><u id="17tjv"></u></meter><output id="17tjv"></output><b id="17tjv"><nobr id="17tjv"><legend id="17tjv"><thead id="17tjv"></thead></legend></nobr></b><acronym id="17tjv"><ruby id="17tjv"><label id="17tjv"><acronym id="17tjv"></acronym></label></ruby></acronym><font id="17tjv"><ruby id="17tjv"><style id="17tjv"><acronym id="17tjv"></acronym></style></ruby></font><rp id="17tjv"><pre id="17tjv"></pre></rp><th id="17tjv"></th><th id="17tjv"></th><ins id="17tjv"><pre id="17tjv"><span id="17tjv"><nobr id="17tjv"></nobr></span></pre></ins><ol id="17tjv"></ol><ol id="17tjv"><mark id="17tjv"></mark></ol><style id="17tjv"></style><dl id="17tjv"></dl><menuitem id="17tjv"></menuitem><p id="17tjv"><thead id="17tjv"></thead></p><font id="17tjv"><dfn id="17tjv"><big id="17tjv"><font id="17tjv"></font></big></dfn></font><video id="17tjv"><legend id="17tjv"><span id="17tjv"><ins id="17tjv"></ins></span></legend></video><video id="17tjv"></video><small id="17tjv"></small><form id="17tjv"><ruby id="17tjv"></ruby></form><rp id="17tjv"><p id="17tjv"></p></rp><strong id="17tjv"></strong><var id="17tjv"></var><rp id="17tjv"><pre id="17tjv"></pre></rp><track id="17tjv"></track><var id="17tjv"><thead id="17tjv"><address id="17tjv"><ruby id="17tjv"></ruby></address></thead></var><i id="17tjv"><font id="17tjv"><th id="17tjv"><i id="17tjv"></i></th></font></i><font id="17tjv"></font><dfn id="17tjv"><thead id="17tjv"><small id="17tjv"><dfn id="17tjv"></dfn></small></thead></dfn><u id="17tjv"><acronym id="17tjv"><meter id="17tjv"><form id="17tjv"></form></meter></acronym></u><label id="17tjv"><meter id="17tjv"><b id="17tjv"><dl id="17tjv"></dl></b></meter></label><address id="17tjv"><th id="17tjv"></th></address><big id="17tjv"></big><strong id="17tjv"><span id="17tjv"><rp id="17tjv"><legend id="17tjv"></legend></rp></span></strong><legend id="17tjv"><b id="17tjv"></b></legend><legend id="17tjv"><span id="17tjv"><ins id="17tjv"><strong id="17tjv"></strong></ins></span></legend><form id="17tjv"></form><var id="17tjv"><big id="17tjv"><dfn id="17tjv"><dfn id="17tjv"></dfn></dfn></big></var><meter id="17tjv"></meter><optgroup id="17tjv"><ol id="17tjv"><ins id="17tjv"><pre id="17tjv"></pre></ins></ol></optgroup><strong id="17tjv"><span id="17tjv"></span></strong><strike id="17tjv"><em id="17tjv"></em></strike><u id="17tjv"></u><nobr id="17tjv"></nobr><label id="17tjv"></label><ruby id="17tjv"><label id="17tjv"><acronym id="17tjv"><output id="17tjv"></output></acronym></label></ruby><dfn id="17tjv"><ol id="17tjv"><mark id="17tjv"><optgroup id="17tjv"></optgroup></mark></ol></dfn><pre id="17tjv"><rp id="17tjv"></rp></pre><optgroup id="17tjv"></optgroup><pre id="17tjv"></pre><b id="17tjv"><strong id="17tjv"></strong></b><label id="17tjv"><menuitem id="17tjv"><style id="17tjv"><acronym id="17tjv"></acronym></style></menuitem></label><label id="17tjv"><form id="17tjv"></form></label><dfn id="17tjv"><dfn id="17tjv"><big id="17tjv"><em id="17tjv"></em></big></dfn></dfn><ruby id="17tjv"></ruby><dl id="17tjv"></dl><video id="17tjv"><p id="17tjv"><tt id="17tjv"><dl id="17tjv"></dl></tt></p></video><b id="17tjv"><listing id="17tjv"><div id="17tjv"><form id="17tjv"></form></div></listing></b><rp id="17tjv"></rp><listing id="17tjv"></listing><pre id="17tjv"><span id="17tjv"><video id="17tjv"><pre id="17tjv"></pre></video></span></pre><label id="17tjv"><output id="17tjv"><style id="17tjv"><font id="17tjv"></font></style></output></label><ol id="17tjv"></ol><pre id="17tjv"><mark id="17tjv"><optgroup id="17tjv"><thead id="17tjv"></thead></optgroup></mark></pre><strike id="17tjv"><font id="17tjv"><th id="17tjv"><strike id="17tjv"></strike></th></font></strike><rp id="17tjv"><optgroup id="17tjv"><ol id="17tjv"><ins id="17tjv"></ins></ol></optgroup></rp><sup id="17tjv"></sup><meter id="17tjv"><tt id="17tjv"><listing id="17tjv"><div id="17tjv"></div></listing></tt></meter><th id="17tjv"><thead id="17tjv"></thead></th><dl id="17tjv"></dl><output id="17tjv"><label id="17tjv"><dl id="17tjv"><menuitem id="17tjv"></menuitem></dl></label></output><optgroup id="17tjv"><sub id="17tjv"><video id="17tjv"><legend id="17tjv"></legend></video></sub></optgroup><pre id="17tjv"><sup id="17tjv"><progress id="17tjv"><address id="17tjv"></address></progress></sup></pre><strong id="17tjv"><pre id="17tjv"></pre></strong><strong id="17tjv"></strong><big id="17tjv"><optgroup id="17tjv"></optgroup></big><acronym id="17tjv"><output id="17tjv"></output></acronym><acronym id="17tjv"></acronym><mark id="17tjv"><dfn id="17tjv"></dfn></mark><thead id="17tjv"><font id="17tjv"></font></thead><sup id="17tjv"><ins id="17tjv"></ins></sup><form id="17tjv"><th id="17tjv"><progress id="17tjv"><strong id="17tjv"></strong></progress></th></form><tt id="17tjv"><nobr id="17tjv"></nobr></tt><optgroup id="17tjv"></optgroup><ruby id="17tjv"><style id="17tjv"></style></ruby><progress id="17tjv"><dfn id="17tjv"></dfn></progress><legend id="17tjv"><sub id="17tjv"></sub></legend><optgroup id="17tjv"></optgroup><form id="17tjv"></form><b id="17tjv"><dl id="17tjv"><menuitem id="17tjv"><form id="17tjv"></form></menuitem></dl></b><ruby id="17tjv"><style id="17tjv"></style></ruby><big id="17tjv"><font id="17tjv"></font></big></div> <script src="http://specialneedsforspecialkids.com/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【譯】原生表單組件