【譯】原生表單組件

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

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

系列文章說明

原文

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

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

文本輸入框

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

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

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

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

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

它們都受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>屬性（移動端）</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>也是個默認(rèn)屬性）。此外，如果你指定給<b>type</b>屬性的值不被瀏覽器支持，也會使用<b>text</b>作為回退值。</p> <pre><input type="text"></pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000005367766");</script></p> <p>單行文本框只有一個約束：若你輸入的文本中有換行，瀏覽器會在發(fā)送數(shù)據(jù)前將這個換行給移除。</p> <p>但是，我們也可以給單行文本框“按需”添加一些約束。這得用到<b>pattern</b>屬性；該屬性會告訴瀏覽器根據(jù)你選擇的一個正則表達(dá)式來驗(yàn)證值的有效性。</p> <pre><input type="text" pattern="^cherry|banana$"></pre> <p>HTML5添加了幾個<b>type</b>屬性的值來增強(qiáng)基本的單行文本框。雖然這些值仍會把<b><input></b>元素呈現(xiàn)為一個單行文本框，但實(shí)際上它們還給文本框添加了幾個額外的約束和特性。</p> <b>E-mail輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>email</b>：</p> <pre><input type="email" multiple></pre> <p>它給輸入框添加了這樣的驗(yàn)證約束：用戶需要輸入一個有效的e-mail地址；其他任何輸入都會導(dǎo)致輸入框報(bào)錯。而通過設(shè)置<b>multiple</b>屬性，這種輸入框也可以讓用戶輸入多個e-mail地址。</p> <b>密碼輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>password</b>：</p> <pre><input type="password"></pre> <p>它并未給輸入文本添加任何特殊的約束，只是把輸入框的里值做了隱藏以防止被讀取。</p> <pre><p>注：注意這只是個用戶界面的特性；瀏覽器還是會發(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)上（通常，搜索框會以圓角呈現(xiàn)）。但其實(shí)搜索框還增加了一個特性：輸入的值可被自動保存，以實(shí)現(xiàn)在同一站點(diǎn)的不同頁面中給出自動補(bǔ)全。</p> <b>電話號碼輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>tel</b>：</p> <pre><input type="tel"></pre> <p>由于世界上有多種電話號碼制式，所以此類型的的文本框不會給用戶輸入的值強(qiáng)制使用任何約束，主要是一個語義上的區(qū)別而已。雖然在某些設(shè)備上（尤其是手機(jī)）點(diǎn)擊該輸入框，會出現(xiàn)一個不同的虛擬鍵盤。</p> <b>URL輸入框</b> <p>該類型的輸入框設(shè)置了<b>type</b>值為<b>url</b>：</p> <pre><input type="url"></pre> <p>為確保只輸入有效的URL，它為輸入框添加了些特殊的驗(yàn)證約束；若輸入的值不是個符合格式的URL，表單將會呈現(xiàn)錯誤狀態(tài)。</p> <pre><p>注：URL符合格式并不意味著它指向確切存在的地址。</p></pre> <p>有特殊約束并處于錯誤狀態(tài)的輸入框會阻止表單提交；此外，為讓錯誤提示更明顯，也可以為它們加些樣式，我們將在[表單數(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>屬性（移動端）</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>屬性（移動端）</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有兩種下拉組件：選擇框和自動補(bǔ)全組件。這兩者的交互方式是一樣的，一旦控件被激活，瀏覽器會展示一列表的值讓用戶從中選擇，這個值列表會覆蓋在頁面內(nèi)容之上。</p> <b>選擇框</b> <p>選擇框是通過<b><select></b>元素創(chuàng)建的，并使用一或多個<b><option></b>元素作為其子元素，每個<b><option></b>都指定了一個可能的值。</p> <pre><select> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select></pre> <p>若有需要，選擇框的默認(rèn)值可通過為相應(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>屬性（移動端）</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)的，選擇框只允許用戶選擇一個值。要讓用戶能選擇多個值，可通過給<b><select></b>元素添加<b>multiple</b>屬性實(shí)現(xiàn)。但此時，選擇框就不再呈現(xiàn)為一個下拉組件了，反而呈現(xiàn)為一個普通的列表框。</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>自動補(bǔ)全組件</b> <p>通過使用<b><datalist></b>元素，你可以給表單組件提供說明、自動補(bǔ)全的值，并通過子元素<b><option></b>來指定要呈現(xiàn)的值。設(shè)置好后，這份數(shù)據(jù)列表就能綁定到其他使用了<b>list</b>屬性的組件上了。</p> <p>一旦數(shù)據(jù)列表附加到一個表單組件上，它的選項(xiàng)就能被用于自動補(bǔ)全用戶輸入的文本；典型的情況是，選項(xiàng)被呈現(xiàn)為一個帶有可能匹配的值的下拉框。</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í)現(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>屬性（移動端）</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>可勾選組件指的是可以通過點(diǎn)擊改變其狀態(tài)的組件。有兩種可勾選組件：復(fù)選框和單選框，它們都可以通過<b>checked</b>屬性來指示該組件是否默認(rèn)被勾選。</p> <p>值得注意的是，這些組件的行為和其他表單組件不太一樣。對大多數(shù)表單組件而言，表單提交后所有具有<b>name</b>屬性的組件都會被提交，即使它們沒有獲值。但對于可勾選組件，它們的值卻只有在它們被勾選之后才會提交，如果沒有勾選，則不會提交東西，包括其<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>屬性（移動端）</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>幾個單選框可以被綁定在一起，只要它們使用相同的<b>name</b>屬性值，它們就被視為同一組選框。而在同一組中，只有一個選框能被勾選；這意味著其中一個勾選之后，其他所有選框會自動不勾選。</p> <p>到了表單提交時，也只有被勾選的值會被提交；如果沒有勾選，整組單選框會被認(rèn)為處于未知狀態(tài)且不會隨表單提交。</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>屬性（移動端）</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>這種按鈕不自帶特效，但也可以通過Javascript代碼進(jìn)行自定義。</p> <p>按鈕可以由<b><button></b>元素或<b><input></b>元素創(chuàng)建。<b>type</b>屬性的值會指定將呈現(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>屬性（移動端）</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>高級表單組件</b> <p>這一系列的組件能讓用戶輸入一些復(fù)雜或高度結(jié)構(gòu)化的數(shù)據(jù)，包括精確或近似數(shù)字、日期和時間、顏色。</p> <b>數(shù)字</b> <p>數(shù)字組件是通過<b>type</b>設(shè)置為<b>number</b>的<b><input></b>元素創(chuàng)建的。該控件看起來像文本框，但卻只允許輸入浮點(diǎn)數(shù)，而且通常還會帶有幾個按鈕來增加或減少組件的值。</p> <p>我們可以通過設(shè)置<b>min</b>和<b>max</b>屬性來約束該組件的值。也可以通過<b>step</b>屬性來指定該組件的增加和減少按鈕的改變量。</p> <pre><input type="number" min="1" max="10" step="2"></pre> <p>上述代碼創(chuàng)建了一個取值被限制在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>屬性（移動端）</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ù)字的方法是使用滑塊。由于操作滑塊看起來不及文本框輸入數(shù)字精確，所以滑塊常用于選取對值的要求不是很精確的數(shù)字。</p> <p>滑塊組件是通過<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)建了一個取值被限制在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>屬性（移動端）</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>日期和時間選擇器</b> <p>收集日期和時間的值在之前往往是web開發(fā)者的噩夢。現(xiàn)在HTML5通過引入一個特殊的控件用于處理這類特定的數(shù)據(jù)，帶來了一些新改進(jìn)。</p> <p>日期和時間控件是通過<b>type</b>設(shè)置為特定值的<b><input></b>元素創(chuàng)建的。因?yàn)槟憧赡芟Ｍ苁占掌?、時間或者兩者兼有，所以它提供了幾個不同的<b>type</b>屬性值：</p> <b>date</b> <p>創(chuàng)建展示和選取日期、但不含具體時間的組件。</p> <pre><input type="date"></pre> <b>datetime</b> <p>創(chuàng)建展示和選取日期、并帶有UTC時區(qū)時間的組件。</p> <pre><input type="datetime"></pre> <b>datetime-local</b> <p>創(chuàng)建展示和選取日期、并帶有任何指定時區(qū)時間的組件。</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)建展示和選取一個時間值的組件。</p> <pre><input type="time"></pre> <b>week</b> <p>創(chuàng)建展示和選取周數(shù)、并帶其年份的組件。</p> <pre><input type="week"></pre> <p>所有的日期與時間控件都可以使用<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>屬性（移動端）</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>警告：日期和時間組件都是很新的組件，甚至那些聲稱支持它們的瀏覽器也常有重大的用戶界面問題，這讓這些組件很難被使用。所以在發(fā)布你的內(nèi)容之前，請先徹底地在不同的瀏覽器上測試一遍！</p></pre> <b>顏色選擇器</b> <p>通常顏色都有點(diǎn)難于處理，因?yàn)橛性S多種方式來表示它們：RGB值（十進(jìn)制或十六進(jìn)制）、HSL值、關(guān)鍵字等等。而顏色選擇器能方便用戶以文本或圖形的形式選擇顏色。</p> <p>顏色組件是通過<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>屬性（移動端）</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ì)的討論。文件選擇器組件是讓用戶選擇一或多個文件進(jìn)行發(fā)送的一種方式。</p> <p>文件選擇器組件是通過<b>type</b>設(shè)置為<b>file</b>的<b><input></b>元素創(chuàng)建的。被接收的文件類型可通過使用<b>accept</b>屬性進(jìn)行指定；此外，若你想讓用戶選擇不止一個文件，可以添加<b>multiple</b>屬性。</p> <p>在下面的例子中，我們創(chuàng)建了一個接收圖像圖形文件的文件選擇器，它也允許用戶選擇多個文件。</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>屬性（移動端）</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>有時因?yàn)榧夹g(shù)原因，我們得讓一些隨表單發(fā)送的數(shù)據(jù)對用戶不可見。要這樣做，你可以在你的表單中添加一個隱藏元素，只需使用<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>屬性（移動端）</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>圖像按鈕控件表面看起來就像是<b></pre> <p>若圖像按鈕被用于提交表單，它不會提交它的值，而是提交在圖片上點(diǎn)擊的X和Y坐標(biāo)（坐標(biāo)是相對圖像而言的，取左上角為(0, 0)坐標(biāo)）。坐標(biāo)以兩個鍵/值對的形式發(fā)送，X值的鍵名是<b>name</b>屬性的值加上字符串".x"，Y值的鍵名是<b>name</b>屬性的值加上字符串".y"。這樣就提供了一種便于創(chuàng)建“熱點(diǎn)地圖”的方式。</p> <p>舉個例子：</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)擊這個表單的圖像時，你會發(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)擊了圖片上哪個地方。這些數(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>屬性（移動端）</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)度條代表一個隨時間變化、直至達(dá)到由<b>max</b>屬性指定的最大值的值。進(jìn)度條使用<b><progress></b>元素進(jìn)行創(chuàng)建，<b><progress></b>元素的內(nèi)容用于讓不支持該元素的瀏覽器作降級處理、也讓無障礙設(shè)備能讀出來。</p> <pre><progress max="100" value="75">75/100</progress></pre> <p>度量條表示一個處于由<b>min</b>和<b>max</b>值劃分的范圍的固定值。該值被渲染為一個長條，長條使用<b><meter></b>元素進(jìn)行創(chuàng)建，<b><meter></b>元素的內(nèi)容用于讓不支持該元素的瀏覽器作降級處理、也讓無障礙設(shè)備能讀出來。</p> <pre><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> <p>而要知道該長條長什么樣子，我們還得比較它的<b>value</b>值與另外幾個值：</p> <p> <p><b>low</b>和<b>high</b>值將一個長條的范圍劃分了三個部分：</p> <p><p>范圍較低的那部分位于<b>min</b>和<b>low</b>之間（含這兩個值）。</p></p> <p><p>范圍的中間部分位于<b>low</b>和<b>high</b>之間（不含這兩個值）。</p></p> <p><p>范圍較高的那部分位于<b>high</b>和<b>max</b>之間（含這兩個值）。</p></p> </p> <p> <p><b>optimum</b>值定義了<b><meter></b>元素的最佳值。結(jié)合<b>low</b>和<b>high</b>值，就能確定一個長條范圍的哪個部分是最佳的：</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>元素的瀏覽器都會使用上述的值來改變度量長條的顏色：</p> <p><p>若現(xiàn)在的值位于范圍最佳的部分，則長條顯示為綠色。</p></p> <p><p>若現(xiàn)在的值位于范圍平均的部分，則長條顯示為黃色。</p></p> <p><p>若現(xiàn)在的值位于范圍最差的部分，則長條顯示為紅色。</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>屬性（移動端）</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 (也可用于移動端瀏覽器)</p></p> </div> <div id="dnkpnhlp" class="mt-64 tags-seach" > <div id="dnkpnhlp" class="tags-info"> <a style="width:120px;" title="GPU云服務(wù)器" href="http://www.ezyhdfw.cn/site/product/gpu.html">GPU云服務(wù)器</a> <a style="width:120px;" title="云服務(wù)器" href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a> <a style="width:120px;" title="表單組件" href="http://www.ezyhdfw.cn/yun/tag/biaodanzujian/">表單組件</a> <a style="width:120px;" title="java表單框的組件" href="http://www.ezyhdfw.cn/yun/tag/javabiaodankuangdezujian/">java表單框的組件</a> <a style="width:120px;" title="linux下編譯阿里" href="http://www.ezyhdfw.cn/yun/tag/linuxxiabianyiali/">linux下編譯阿里</a> <a style="width:120px;" title="linux下編譯運(yùn)行" href="http://www.ezyhdfw.cn/yun/tag/linuxxiabianyiyunxing/">linux下編譯運(yùn)行</a> </div> </div> <div id="dnkpnhlp" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p> <p>轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54365.html</p> </div> <ul class="pre-next-page"> <li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/54364.html">上一篇：IOS中彈出鍵盤后出現(xiàn)fixed失效現(xiàn)象的解決方案</a></li> <li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/54366.html">下一篇：【譯】怎么樣構(gòu)建HTML表單</a></li> </ul> </div> <div id="dnkpnhlp" 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="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/111442.html"><b>【<em>譯</em>】<em>表單</em><em>組件</em>的屬性兼容性表</b></a></h2> <p class="ellipsis2 good">摘要：系列文章說明原文下面的兼容性表將總結(jié)出表單對的支持程度，由于和表單的復(fù)雜性，這幾個表不能認(rèn)為是最佳的參考對象。該屬性不能生效，或者表現(xiàn)很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。系列文章說明原文下面的兼容性表將總結(jié)出HTML表單對CSS的支持程度，由于CSS和HTML表單的復(fù)雜性，這幾個表不能認(rèn)為是最佳的參考對象。盡管如此，它們...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-20.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/00/small_000000020.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">李文鵬</span></a> <time datetime="">2019-08-29 11:07</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/49988.html"><b>【<em>譯</em>】<em>表單</em><em>組件</em>的屬性兼容性表</b></a></h2> <p class="ellipsis2 good">摘要：系列文章說明原文下面的兼容性表將總結(jié)出表單對的支持程度，由于和表單的復(fù)雜性，這幾個表不能認(rèn)為是最佳的參考對象。該屬性不能生效，或者表現(xiàn)很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。系列文章說明原文下面的兼容性表將總結(jié)出HTML表單對CSS的支持程度，由于CSS和HTML表單的復(fù)雜性，這幾個表不能認(rèn)為是最佳的參考對象。盡管如此，它們...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-1315.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/13/small_000001315.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">XanaHopper</span></a> <time datetime="">2019-08-01 15:35</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/111351.html"><b>【<em>譯</em>】HTML<em>表單</em>高級樣式</b></a></h2> <p class="ellipsis2 good">摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來探索HTML表單樣式的那...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-609.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/06/small_000000609.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">caikeal</span></a> <time datetime="">2019-08-29 10:59</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/49937.html"><b>【<em>譯</em>】HTML<em>表單</em>高級樣式</b></a></h2> <p class="ellipsis2 good">摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來探索HTML表單樣式的那...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-351.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/03/small_000000351.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">Jacendfeng</span></a> <time datetime="">2019-08-01 15:29</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/54367.html"><b>【<em>譯</em>】HTML<em>表單</em>指南---第一個HTML<em>表單</em></b></a></h2> <p class="ellipsis2 good">摘要：一個表單由一或多個部件組成，這些部件可以是文本框單行或多行選擇框按鈕復(fù)選框或單選按鈕。在我們的示例里，一個文本框中用了該屬性的默認(rèn)值，該值表示一個基本的單行文本框，用于接收無控制或驗(yàn)證的任何文本。前言這個系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關(guān)的基礎(chǔ)知識。而表單作為一個經(jīng)典的頁面交互方式，是每個前端工程師繞不開的話題，通過翻譯這個系列的文章既是有助于掃清自己的知識盲區(qū)...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-1200.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/12/small_000001200.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">yearsj</span></a> <time datetime="">2019-08-02 15:55</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/93895.html"><b>[<em>譯</em>] 別再對 Angular <em>表單</em>的 ControlValueAccessor 感到迷惑</b></a></h2> <p class="ellipsis2 good">摘要：在里我們簡單保存了對回調(diào)函數(shù)的引用，回調(diào)函數(shù)是由指令傳入的譯者注參考，只要每次組件值發(fā)生改變，就會觸發(fā)這個回調(diào)函數(shù)。原文鏈接：Never again be confused when implementing ControlValueAccessor in Angular?forms showImg(https://segmentfault.com/img/bV7rR7?w=400...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-1061.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/10/small_000001061.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">blastz</span></a> <time datetime="">2019-08-22 15:57</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div id="dnkpnhlp" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發(fā)表評論</span></h3> <div id="dnkpnhlp" class="xcp-publish-main flex_box_zd"> <div id="dnkpnhlp" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評論</a> </div> </div> </div> <div id="dnkpnhlp" class="site-box-content"> <div id="dnkpnhlp" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評論</span></h3> </div> <div id="dnkpnhlp" class="pages"></ul></div> </div> </div> <div id="dnkpnhlp" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="dnkpnhlp" class=""> <div id="dnkpnhlp" class="com_layuiright-box user-msgbox"> <a href="http://www.ezyhdfw.cn/yun/u-757.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/07/small_000000757.jpg" alt=""></a> <h3><a href="http://www.ezyhdfw.cn/yun/u-757.html" rel="nofollow">sunnyxd</a></h3> <h6>男<span>|</span>高級講師</h6> <div id="dnkpnhlp" 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="dnkpnhlp" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://www.ezyhdfw.cn/yun/ut-757.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/116774.html">文本溢出顯示省略號</a></h3> <p>閱讀 3552<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/113971.html">曾經(jīng)面試踩過的坑，都在這里了～</a></h3> <p>閱讀 3463<span>·</span>2019-08-29 16:54</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/113916.html">自制簡單的range（Vue）</a></h3> <p>閱讀 2252<span>·</span>2019-08-29 16:41</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/102749.html">uni-app項(xiàng)目展示屏幕文字滾動效果</a></h3> <p>閱讀 2527<span>·</span>2019-08-23 16:10</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/101470.html">淺談JavaScript代碼預(yù)解析 + 示例詳解</a></h3> <p>閱讀 3432<span>·</span>2019-08-23 15:04</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/99867.html">使用 Solid 私有化存儲 IPFS 文件哈希值</a></h3> <p>閱讀 1429<span>·</span>2019-08-23 13:58</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/97293.html">JavaScript六種非常經(jīng)典的對象繼承方式</a></h3> <p>閱讀 415<span>·</span>2019-08-23 11:40</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/96336.html">HTML5 新特性</a></h3> <p>閱讀 2509<span>·</span>2019-08-23 10:26</p></li> </ul> </div>  <div id="dnkpnhlp" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動</span></h6> <div id="dnkpnhlp" class="com_adbox"> <div id="dnkpnhlp" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://www.ezyhdfw.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器"> </a> </div> <div> <a href="http://www.ezyhdfw.cn/site/product/gpu.html" rel="nofollow"> <img src="http://www.ezyhdfw.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器"> </a> </div> </div> </div> </div>  <div id="dnkpnhlp" class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"http://www.ezyhdfw.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section>  <div id="dnkpnhlp" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div>  <div id="dnkpnhlp" class="site-mobile-shade"></div>  <div class="dnkpnhlp" id="payread"> <div id="dnkpnhlp" class="layui-form-item">閱讀需要支付1元查看</div> <div id="dnkpnhlp" 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://www.ezyhdfw.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="http://www.ezyhdfw.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="http://www.ezyhdfw.cn/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; //加載評論 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("評論內(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://www.ezyhdfw.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "http://www.ezyhdfw.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人贊"); } }); }else{ alert("您已經(jīng)贊過"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交數(shù)據(jù)的類型 POST GET type:"POST", //提交的網(wǎng)址 url:"http://www.ezyhdfw.cn/yun/favorite/topicadd.html", //提交的數(shù)據(jù) data:{tid:_tid,rs:_rs}, //返回?cái)?shù)據(jù)的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前調(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)用出錯執(zhí)行的函數(shù) error: function(){ //請求出錯處理 postadopt=false; } }); } </script> <footer> <div id="dnkpnhlp" class="layui-container"> <div id="dnkpnhlp" class="flex_box_zd"> <div id="dnkpnhlp" class="left-footer"> <h6><a href="http://www.ezyhdfw.cn/"><img src="http://www.ezyhdfw.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6> <p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計(jì)算服務(wù)平臺，堅(jiān)持中立，不涉足客戶業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺、AI服務(wù)平臺等一系列云計(jì)算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p> </div> <div id="dnkpnhlp" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務(wù)</h6> <p><a href="http://www.ezyhdfw.cn/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://www.ezyhdfw.cn/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://www.ezyhdfw.cn/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://www.ezyhdfw.cn/site/pro-notice/">產(chǎn)品動態(tài)</a></p> </li> <li> <h6>友情鏈接</h6> <p><a >GPU算力平臺</a></p> <p><a >UCloud私有云</a></p> <p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >AI繪畫</a></p> <p><a >Wavespeed AI</a></p> </li> <li> <h6>社區(qū)欄目</h6> <p><a href="http://www.ezyhdfw.cn/yun/column/index.html">專欄文章</a></p> <p><a href="http://www.ezyhdfw.cn/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問題</h6> <p><a href="http://www.ezyhdfw.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://www.ezyhdfw.cn/site/about/news/recent/" >新聞動態(tài)</a></p> <p><a href="http://www.ezyhdfw.cn/site/about/news/report/">媒體動態(tài)</a></p> <p><a href="http://www.ezyhdfw.cn/site/cases.html">客戶案例</a></p> <p><a href="http://www.ezyhdfw.cn/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="dnkpnhlp" class="copyright">Copyright ? 2012-2025 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號-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.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://www.ezyhdfw.cn/" title="亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站 ">亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站 </a> <div class="friend-links"> </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="hwjs5" class="pl_css_ganrao" style="display: none;"><tbody id="hwjs5"></tbody><tfoot id="hwjs5"><em id="hwjs5"><th id="hwjs5"></th></em></tfoot><sup id="hwjs5"></sup><fieldset id="hwjs5"></fieldset><form id="hwjs5"><optgroup id="hwjs5"><li id="hwjs5"><option id="hwjs5"></option></li></optgroup></form><sup id="hwjs5"></sup><u id="hwjs5"><center id="hwjs5"><tbody id="hwjs5"></tbody></center></u><legend id="hwjs5"></legend><tfoot id="hwjs5"></tfoot><thead id="hwjs5"><samp id="hwjs5"><ins id="hwjs5"></ins></samp></thead><label id="hwjs5"></label><ruby id="hwjs5"><th id="hwjs5"></th></ruby><abbr id="hwjs5"></abbr><center id="hwjs5"></center><noscript id="hwjs5"><em id="hwjs5"><sup id="hwjs5"><tfoot id="hwjs5"></tfoot></sup></em></noscript><menuitem id="hwjs5"><nobr id="hwjs5"><rp id="hwjs5"></rp></nobr></menuitem><center id="hwjs5"><tbody id="hwjs5"><thead id="hwjs5"></thead></tbody></center><input id="hwjs5"><object id="hwjs5"><s id="hwjs5"></s></object></input><div id="hwjs5"></div><noscript id="hwjs5"></noscript><dd id="hwjs5"><progress id="hwjs5"><pre id="hwjs5"></pre></progress></dd><tfoot id="hwjs5"><strong id="hwjs5"></strong></tfoot><tr id="hwjs5"><video id="hwjs5"><li id="hwjs5"></li></video></tr><abbr id="hwjs5"><li id="hwjs5"><menu id="hwjs5"></menu></li></abbr><dd id="hwjs5"></dd><dfn id="hwjs5"><kbd id="hwjs5"><samp id="hwjs5"><wbr id="hwjs5"></wbr></samp></kbd></dfn><option id="hwjs5"></option><xmp id="hwjs5"></xmp><pre id="hwjs5"><abbr id="hwjs5"><button id="hwjs5"></button></abbr></pre><tr id="hwjs5"></tr><progress id="hwjs5"><meter id="hwjs5"></meter></progress><blockquote id="hwjs5"><b id="hwjs5"><small id="hwjs5"><s id="hwjs5"></s></small></b></blockquote><address id="hwjs5"><ul id="hwjs5"><tr id="hwjs5"><optgroup id="hwjs5"></optgroup></tr></ul></address><noframes id="hwjs5"></noframes><acronym id="hwjs5"></acronym><span id="hwjs5"><small id="hwjs5"></small></span><small id="hwjs5"></small><li id="hwjs5"><noscript id="hwjs5"><nobr id="hwjs5"><optgroup id="hwjs5"></optgroup></nobr></noscript></li><del id="hwjs5"><center id="hwjs5"></center></del><mark id="hwjs5"></mark><tt id="hwjs5"></tt><strong id="hwjs5"><strong id="hwjs5"></strong></strong><li id="hwjs5"></li><em id="hwjs5"></em><tr id="hwjs5"></tr><ol id="hwjs5"><progress id="hwjs5"><wbr id="hwjs5"><sup id="hwjs5"></sup></wbr></progress></ol><ol id="hwjs5"><object id="hwjs5"><optgroup id="hwjs5"><nav id="hwjs5"></nav></optgroup></object></ol><small id="hwjs5"><dfn id="hwjs5"><pre id="hwjs5"><option id="hwjs5"></option></pre></dfn></small><option id="hwjs5"></option><output id="hwjs5"></output><thead id="hwjs5"></thead><em id="hwjs5"></em><rt id="hwjs5"><listing id="hwjs5"></listing></rt><tbody id="hwjs5"><legend id="hwjs5"><nav id="hwjs5"></nav></legend></tbody><sup id="hwjs5"><rt id="hwjs5"><span id="hwjs5"></span></rt></sup><del id="hwjs5"></del><nav id="hwjs5"><option id="hwjs5"><ins id="hwjs5"></ins></option></nav><td id="hwjs5"><tfoot id="hwjs5"></tfoot></td><option id="hwjs5"><small id="hwjs5"></small></option><optgroup id="hwjs5"><small id="hwjs5"><b id="hwjs5"></b></small></optgroup><xmp id="hwjs5"></xmp><optgroup id="hwjs5"></optgroup><tr id="hwjs5"></tr><acronym id="hwjs5"></acronym><em id="hwjs5"></em><u id="hwjs5"><rp id="hwjs5"><pre id="hwjs5"></pre></rp></u><strong id="hwjs5"></strong><pre id="hwjs5"></pre><acronym id="hwjs5"><button id="hwjs5"><menuitem id="hwjs5"></menuitem></button></acronym><tt id="hwjs5"><delect id="hwjs5"></delect></tt><small id="hwjs5"></small><fieldset id="hwjs5"><dl id="hwjs5"></dl></fieldset><center id="hwjs5"></center><meter id="hwjs5"></meter><noframes id="hwjs5"><kbd id="hwjs5"><tr id="hwjs5"></tr></kbd></noframes><span id="hwjs5"></span><progress id="hwjs5"></progress><i id="hwjs5"></i><source id="hwjs5"></source><blockquote id="hwjs5"></blockquote><p id="hwjs5"></p><i id="hwjs5"><optgroup id="hwjs5"><pre id="hwjs5"><span id="hwjs5"></span></pre></optgroup></i><ul id="hwjs5"><ruby id="hwjs5"><rp id="hwjs5"></rp></ruby></ul><noscript id="hwjs5"><delect id="hwjs5"><dd id="hwjs5"><acronym id="hwjs5"></acronym></dd></delect></noscript><listing id="hwjs5"><acronym id="hwjs5"><pre id="hwjs5"><cite id="hwjs5"></cite></pre></acronym></listing><source id="hwjs5"><nav id="hwjs5"><dfn id="hwjs5"></dfn></nav></source><small id="hwjs5"><kbd id="hwjs5"></kbd></small><dl id="hwjs5"><object id="hwjs5"><acronym id="hwjs5"></acronym></object></dl><abbr id="hwjs5"></abbr><sub id="hwjs5"><big id="hwjs5"></big></sub><abbr id="hwjs5"><button id="hwjs5"><menuitem id="hwjs5"></menuitem></button></abbr><pre id="hwjs5"></pre><address id="hwjs5"></address><label id="hwjs5"></label><button id="hwjs5"><noscript id="hwjs5"><small id="hwjs5"></small></noscript></button><tfoot id="hwjs5"></tfoot><dfn id="hwjs5"></dfn><ul id="hwjs5"></ul><center id="hwjs5"><tfoot id="hwjs5"><source id="hwjs5"></source></tfoot></center><dfn id="hwjs5"><strong id="hwjs5"><th id="hwjs5"><ins id="hwjs5"></ins></th></strong></dfn></div> <script src="http://www.ezyhdfw.cn/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>

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

【譯】原生表單組件

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【譯】原生表單組件

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