【譯】原生表單組件

sunnyxd 發布于2019-08-02 15:55 / 2765人閱讀

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

系列文章說明

原文

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

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

文本輸入框

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

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

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

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

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

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

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

兼容性表

屬性（桌面端）

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>元素創建的（若未提供<b>type</b>屬性值，<b>text</b>也是個默認屬性）。此外，如果你指定給<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>單行文本框只有一個約束：若你輸入的文本中有換行，瀏覽器會在發送數據前將這個換行給移除。</p> <p>但是，我們也可以給單行文本框“按需”添加一些約束。這得用到<b>pattern</b>屬性；該屬性會告訴瀏覽器根據你選擇的一個正則表達式來驗證值的有效性。</p> <pre><input type="text" pattern="^cherry|banana$"></pre> <p>HTML5添加了幾個<b>type</b>屬性的值來增強基本的單行文本框。雖然這些值仍會把<b><input></b>元素呈現為一個單行文本框，但實際上它們還給文本框添加了幾個額外的約束和特性。</p> <b>E-mail輸入框</b> <p>該類型的輸入框設置了<b>type</b>值為<b>email</b>：</p> <pre><input type="email" multiple></pre> <p>它給輸入框添加了這樣的驗證約束：用戶需要輸入一個有效的e-mail地址；其他任何輸入都會導致輸入框報錯。而通過設置<b>multiple</b>屬性，這種輸入框也可以讓用戶輸入多個e-mail地址。</p> <b>密碼輸入框</b> <p>該類型的輸入框設置了<b>type</b>值為<b>password</b>：</p> <pre><input type="password"></pre> <p>它并未給輸入文本添加任何特殊的約束，只是把輸入框的里值做了隱藏以防止被讀取。</p> <pre><p>注：注意這只是個用戶界面的特性；瀏覽器還是會發送純文本，除非你用Javascript給文本進行編碼。</p></pre> <b>搜索框</b> <p>該類型的輸入框設置了<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>文本框和搜索框的主要區別在于外觀和體驗上（通常，搜索框會以圓角呈現）。但其實搜索框還增加了一個特性：輸入的值可被自動保存，以實現在同一站點的不同頁面中給出自動補全。</p> <b>電話號碼輸入框</b> <p>該類型的輸入框設置了<b>type</b>值為<b>tel</b>：</p> <pre><input type="tel"></pre> <p>由于世界上有多種電話號碼制式，所以此類型的的文本框不會給用戶輸入的值強制使用任何約束，主要是一個語義上的區別而已。雖然在某些設備上（尤其是手機）點擊該輸入框，會出現一個不同的虛擬鍵盤。</p> <b>URL輸入框</b> <p>該類型的輸入框設置了<b>type</b>值為<b>url</b>：</p> <pre><input type="url"></pre> <p>為確保只輸入有效的URL，它為輸入框添加了些特殊的驗證約束；若輸入的值不是個符合格式的URL，表單將會呈現錯誤狀態。</p> <pre><p>注：URL符合格式并不意味著它指向確切存在的地址。</p></pre> <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><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>下拉組件能讓用戶很方便地從眾多選項中作選擇。HTML有兩種下拉組件：選擇框和自動補全組件。這兩者的交互方式是一樣的，一旦控件被激活，瀏覽器會展示一列表的值讓用戶從中選擇，這個值列表會覆蓋在頁面內容之上。</p> <b>選擇框</b> <p>選擇框是通過<b><select></b>元素創建的，并使用一或多個<b><option></b>元素作為其子元素，每個<b><option></b>都指定了一個可能的值。</p> <pre><select> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> </select></pre> <p>若有需要，選擇框的默認值可通過為相應的<b><option></b>元素設置<b>selected</b>屬性進行指定。為了給值創建分組，<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>默認的，選擇框只允許用戶選擇一個值。要讓用戶能選擇多個值，可通過給<b><select></b>元素添加<b>multiple</b>屬性實現。但此時，選擇框就不再呈現為一個下拉組件了，反而呈現為一個普通的列表框。</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> <p>通過使用<b><datalist></b>元素，你可以給表單組件提供說明、自動補全的值，并通過子元素<b><option></b>來指定要呈現的值。設置好后，這份數據列表就能綁定到其他使用了<b>list</b>屬性的組件上了。</p> <p>一旦數據列表附加到一個表單組件上，它的選項就能被用于自動補全用戶輸入的文本；典型的情況是，選項被呈現為一個帶有可能匹配的值的下拉框。</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>注：根據HTML規范，<b>list</b>屬性和<b><datalist></b>元素可被用于任何需要用戶輸入的組件上。然而，其并未清楚指明如何在非文本控件上使用，同時不同瀏覽器的實現也是各有不同。所以，要在非文本控件使用該特性得多加小心。</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>可勾選組件指的是可以通過點擊改變其狀態的組件。有兩種可勾選組件：復選框和單選框，它們都可以通過<b>checked</b>屬性來指示該組件是否默認被勾選。</p> <p>值得注意的是，這些組件的行為和其他表單組件不太一樣。對大多數表單組件而言，表單提交后所有具有<b>name</b>屬性的組件都會被提交，即使它們沒有獲值。但對于可勾選組件，它們的值卻只有在它們被勾選之后才會提交，如果沒有勾選，則不會提交東西，包括其<b>name</b>屬性。</p> <b>復選框</b> <p>復選框由設置了<b>type</b>值為<b>checkbox</b>的<b><input></b>元素創建：</p> <pre><input type="checkbox" checked></pre> <p>上面的HTML創建的復選框是默認勾選的。</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>單選框由設置了<b>type</b>值為<b>radio</b>的<b><input></b>元素創建：</p> <pre><input type="radio" checked></pre> <p>幾個單選框可以被綁定在一起，只要它們使用相同的<b>name</b>屬性值，它們就被視為同一組選框。而在同一組中，只有一個選框能被勾選；這意味著其中一個勾選之后，其他所有選框會自動不勾選。</p> <p>到了表單提交時，也只有被勾選的值會被提交；如果沒有勾選，整組單選框會被認為處于未知狀態且不會隨表單提交。</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>用于發送表單數據給服務器。<br><strong>重置按鈕</strong><br>用于重置所有表單組件為默認值。<br><strong>匿名按鈕</strong><br>這種按鈕不自帶特效，但也可以通過Javascript代碼進行自定義。</p> <p>按鈕可以由<b><button></b>元素或<b><input></b>元素創建。<b>type</b>屬性的值會指定將呈現何種按鈕。</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>創建的按鈕行為都是一樣的。然而也存在幾點不同：</p> <p><p>就如先前的例子所示，<b><button></b>元素允許你使用HTML內容作為其標記內容，但<b><input></b>元素只接受純文本內容。</p></p> <p><p>使用<b><button></b>元素是，可以采用和按鈕中內容不一樣的值。（但在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>這一系列的組件能讓用戶輸入一些復雜或高度結構化的數據，包括精確或近似數字、日期和時間、顏色。</p> <b>數字</b> <p>數字組件是通過<b>type</b>設置為<b>number</b>的<b><input></b>元素創建的。該控件看起來像文本框，但卻只允許輸入浮點數，而且通常還會帶有幾個按鈕來增加或減少組件的值。</p> <p>我們可以通過設置<b>min</b>和<b>max</b>屬性來約束該組件的值。也可以通過<b>step</b>屬性來指定該組件的增加和減少按鈕的改變量。</p> <pre><input type="number" min="1" max="10" step="2"></pre> <p>上述代碼創建了一個取值被限制在1到10之間的數字組件，其增加和減少按鈕的改變量為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>另一種選取數字的方法是使用滑塊。由于操作滑塊看起來不及文本框輸入數字精確，所以滑塊常用于選取對值的要求不是很精確的數字。</p> <p>滑塊組件是通過<b>type</b>設置為<b>range</b>的<b><input></b>元素創建的。適當配置滑塊是很重要的，強烈推薦你設置其<b>min</b>, <b>max</b>, <b>step</b>屬性。</p> <pre><input type="range" min="1" max="5" step="1"></pre> <p>示例中創建了一個取值被限制在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開發者的噩夢。現在HTML5通過引入一個特殊的控件用于處理這類特定的數據，帶來了一些新改進。</p> <p>日期和時間控件是通過<b>type</b>設置為特定值的<b><input></b>元素創建的。因為你可能希望能收集日期、時間或者兩者兼有，所以它提供了幾個不同的<b>type</b>屬性值：</p> <b>date</b> <p>創建展示和選取日期、但不含具體時間的組件。</p> <pre><input type="date"></pre> <b>datetime</b> <p>創建展示和選取日期、并帶有UTC時區時間的組件。</p> <pre><input type="datetime"></pre> <b>datetime-local</b> <p>創建展示和選取日期、并帶有任何指定時區時間的組件。</p> <pre><input type="datetime-local"></pre> <b>month</b> <p>創建展示和選取月份、并帶有年份的組件。</p> <pre><input type="month"></pre> <b>time</b> <p>創建展示和選取一個時間值的組件。</p> <pre><input type="time"></pre> <b>week</b> <p>創建展示和選取周數、并帶其年份的組件。</p> <pre><input type="week"></pre> <p>所有的日期與時間控件都可以使用<b>max</b>和<b>min</b>屬性進行約束：</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>警告：日期和時間組件都是很新的組件，甚至那些聲稱支持它們的瀏覽器也常有重大的用戶界面問題，這讓這些組件很難被使用。所以在發布你的內容之前，請先徹底地在不同的瀏覽器上測試一遍！</p></pre> <b>顏色選擇器</b> <p>通常顏色都有點難于處理，因為有許多種方式來表示它們：RGB值（十進制或十六進制）、HSL值、關鍵字等等。而顏色選擇器能方便用戶以文本或圖形的形式選擇顏色。</p> <p>顏色組件是通過<b>type</b>設置為<b>color</b>的<b><input></b>元素創建的。</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>還有一些組件難以被歸類，因為它們擁有一些非常特殊的行為；但其實它們也是很有用的。</p> <b>文件選擇器</b> <p>HTML表單可以向服務器發送文件，關于這點，在[發送表單數據]()一文中有詳細的討論。文件選擇器組件是讓用戶選擇一或多個文件進行發送的一種方式。</p> <p>文件選擇器組件是通過<b>type</b>設置為<b>file</b>的<b><input></b>元素創建的。被接收的文件類型可通過使用<b>accept</b>屬性進行指定；此外，若你想讓用戶選擇不止一個文件，可以添加<b>multiple</b>屬性。</p> <p>在下面的例子中，我們創建了一個接收圖像圖形文件的文件選擇器，它也允許用戶選擇多個文件。</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>隱藏內容</b> <p>有時因為技術原因，我們得讓一些隨表單發送的數據對用戶不可見。要這樣做，你可以在你的表單中添加一個隱藏元素，只需使用<b>type</b>設置為<b>hidden</b>的<b><input></b>元素。</p> <p>若你創建了這種元素，還必須設置其<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>若圖像按鈕被用于提交表單，它不會提交它的值，而是提交在圖片上點擊的X和Y坐標（坐標是相對圖像而言的，取左上角為(0, 0)坐標）。坐標以兩個鍵/值對的形式發送，X值的鍵名是<b>name</b>屬性的值加上字符串".x"，Y值的鍵名是<b>name</b>屬性的值加上字符串".y"。這樣就提供了一種便于創建“熱點地圖”的方式。</p> <p>舉個例子：</p> <pre><form action="http://foo.com" method="get">  <input type="image" name="pos" alt="" src="map.png" /> </form></pre> <p>當你點擊這個表單的圖像時，你會發送出如下URL：</p> <pre>http://foo.com?pos.x=123&pos.y=456</pre> <p><b>pos.x</b>和<b>pos.y</b>參數的值取決于你點擊了圖片上哪個地方。這些數據的發送和檢索將在[發送表單數據]()一文中討論。</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>度量和進度條</b> <p>度量和進度條是數字值的可視化表示。</p> <p>進度條代表一個隨時間變化、直至達到由<b>max</b>屬性指定的最大值的值。進度條使用<b><progress></b>元素進行創建，<b><progress></b>元素的內容用于讓不支持該元素的瀏覽器作降級處理、也讓無障礙設備能讀出來。</p> <pre><progress max="100" value="75">75/100</progress></pre> <p>度量條表示一個處于由<b>min</b>和<b>max</b>值劃分的范圍的固定值。該值被渲染為一個長條，長條使用<b><meter></b>元素進行創建，<b><meter></b>元素的內容用于讓不支持該元素的瀏覽器作降級處理、也讓無障礙設備能讀出來。</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>元素的最佳值。結合<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>所有實現了<b><meter></b>元素的瀏覽器都會使用上述的值來改變度量長條的顏色：</p> <p><p>若現在的值位于范圍最佳的部分，則長條顯示為綠色。</p></p> <p><p>若現在的值位于范圍平均的部分，則長條顯示為黃色。</p></p> <p><p>若現在的值位于范圍最差的部分，則長條顯示為紅色。</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>若要深入了解表單組件的不同，這里還提供了一些你應該看看的有用資源：</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="gsw4ssa" class="mt-64 tags-seach" > <div id="s0wq0gk" class="tags-info"> <a style="width:120px;" title="GPU云服務器" href="http://m.specialneedsforspecialkids.com/site/product/gpu.html">GPU云服務器</a> <a style="width:120px;" title="云服務器" href="http://m.specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo">云服務器</a> <a style="width:120px;" title="表單組件" href="http://m.specialneedsforspecialkids.com/yun/tag/biaodanzujian/">表單組件</a> <a style="width:120px;" title="java表單框的組件" href="http://m.specialneedsforspecialkids.com/yun/tag/javabiaodankuangdezujian/">java表單框的組件</a> <a style="width:120px;" title="linux下編譯阿里" href="http://m.specialneedsforspecialkids.com/yun/tag/linuxxiabianyiali/">linux下編譯阿里</a> <a style="width:120px;" title="linux下編譯運行" href="http://m.specialneedsforspecialkids.com/yun/tag/linuxxiabianyiyunxing/">linux下編譯運行</a> </div> </div> <div id="w2wqiig" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。</p> <p>轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54365.html</p> </div> <ul class="pre-next-page"> <li id="g2qgm0e" class="ellipsis"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/54364.html">上一篇：IOS中彈出鍵盤后出現fixed失效現象的解決方案</a></li> <li id="i2icg0m" class="ellipsis"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/54366.html">下一篇：【譯】怎么樣構建HTML表單</a></li> </ul> </div> <div id="mumiywy" class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相關文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div id="eikew0g" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/111442.html"><b>【<em>譯</em>】<em>表單</em><em>組件</em>的屬性兼容性表</b></a></h2> <p class="ellipsis2 good">摘要：系列文章說明原文下面的兼容性表將總結出表單對的支持程度，由于和表單的復雜性，這幾個表不能認為是最佳的參考對象。該屬性不能生效，或者表現很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。系列文章說明原文下面的兼容性表將總結出HTML表單對CSS的支持程度，由于CSS和HTML表單的復雜性，這幾個表不能認為是最佳的參考對象。盡管如此，它們...</p> <div id="qiqg0wy" class="com_white-left-info"> <div id="wm2mamo" class="com_white-left-infol"> <a href="http://m.specialneedsforspecialkids.com/yun/u-20.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/00/small_000000020.jpg" alt=""><span id="cskoggu" 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="imyye2k" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/49988.html"><b>【<em>譯</em>】<em>表單</em><em>組件</em>的屬性兼容性表</b></a></h2> <p class="ellipsis2 good">摘要：系列文章說明原文下面的兼容性表將總結出表單對的支持程度，由于和表單的復雜性，這幾個表不能認為是最佳的參考對象。該屬性不能生效，或者表現很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。系列文章說明原文下面的兼容性表將總結出HTML表單對CSS的支持程度，由于CSS和HTML表單的復雜性，這幾個表不能認為是最佳的參考對象。盡管如此，它們...</p> <div id="s2cucmm" class="com_white-left-info"> <div id="um0umcg" class="com_white-left-infol"> <a href="http://m.specialneedsforspecialkids.com/yun/u-1315.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/13/small_000001315.jpg" alt=""><span id="egi2wam" 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="ukqu2q0" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/111351.html"><b>【<em>譯</em>】HTML<em>表單</em>高級樣式</b></a></h2> <p class="ellipsis2 good">摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...</p> <div id="coeiycc" class="com_white-left-info"> <div id="myeyukw" class="com_white-left-infol"> <a href="http://m.specialneedsforspecialkids.com/yun/u-609.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/06/small_000000609.jpg" alt=""><span id="wkquoca" 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="2smqkww" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/49937.html"><b>【<em>譯</em>】HTML<em>表單</em>高級樣式</b></a></h2> <p class="ellipsis2 good">摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...</p> <div id="ac2wce2" class="com_white-left-info"> <div id="20scg2s" class="com_white-left-infol"> <a href="http://m.specialneedsforspecialkids.com/yun/u-351.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/03/small_000000351.jpg" alt=""><span id="gekcwya" 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="iuouoqi" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/54367.html"><b>【<em>譯</em>】HTML<em>表單</em>指南---第一個HTML<em>表單</em></b></a></h2> <p class="ellipsis2 good">摘要：一個表單由一或多個部件組成，這些部件可以是文本框單行或多行選擇框按鈕復選框或單選按鈕。在我們的示例里，一個文本框中用了該屬性的默認值，該值表示一個基本的單行文本框，用于接收無控制或驗證的任何文本。前言這個系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關的基礎知識。而表單作為一個經典的頁面交互方式，是每個前端工程師繞不開的話題，通過翻譯這個系列的文章既是有助于掃清自己的知識盲區...</p> <div id="wi2w02a" class="com_white-left-info"> <div id="2icim2o" class="com_white-left-infol"> <a href="http://m.specialneedsforspecialkids.com/yun/u-1200.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/12/small_000001200.jpg" alt=""><span id="iwmcwky" 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="w0a0eue" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://m.specialneedsforspecialkids.com/yun/93895.html"><b>[<em>譯</em>] 別再對 Angular <em>表單</em>的 ControlValueAccessor 感到迷惑</b></a></h2> <p class="ellipsis2 good">摘要：在里我們簡單保存了對回調函數的引用，回調函數是由指令傳入的譯者注參考，只要每次組件值發生改變，就會觸發這個回調函數。原文鏈接：Never again be confused when implementing ControlValueAccessor in Angular?forms showImg(https://segmentfault.com/img/bV7rR7?w=400...</p> <div id="k2u2y00" class="com_white-left-info"> <div id="s2og00c" class="com_white-left-infol"> <a href="http://m.specialneedsforspecialkids.com/yun/u-1061.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/10/small_000001061.jpg" alt=""><span id="mmq0ss0" 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="0qwkswi" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發表評論</span></h3> <div id="uqioika" class="xcp-publish-main flex_box_zd"> <div id="omu2cao" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評論</a> </div> </div> </div> <div id="ko0og0i" class="site-box-content"> <div id="uu22020" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評論</span></h3> </div> <div id="sc2koqs" class="pages"></ul></div> </div> </div> <div id="q0im2yc" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="weyemao" class=""> <div id="wysioc0" class="com_layuiright-box user-msgbox"> <a href="http://m.specialneedsforspecialkids.com/yun/u-757.html"><img src="http://m.specialneedsforspecialkids.com/yun/data/avatar/000/00/07/small_000000757.jpg" alt=""></a> <h3><a href="http://m.specialneedsforspecialkids.com/yun/u-757.html" rel="nofollow">sunnyxd</a></h3> <h6>男<span>|</span>高級講師</h6> <div id="s2ia0se" class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(757)" id="attenttouser_757" class="grad follow-btn notfollow attention">我要關注</a> <a href="javascript:login()" title="發私信" >我要私信</a> </div> <div id="igma00c" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://m.specialneedsforspecialkids.com/yun/ut-757.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/116774.html">文本溢出顯示省略號</a></h3> <p>閱讀 3503<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/113971.html">曾經面試踩過的坑，都在這里了～</a></h3> <p>閱讀 3415<span>·</span>2019-08-29 16:54</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/113916.html">自制簡單的range（Vue）</a></h3> <p>閱讀 2204<span>·</span>2019-08-29 16:41</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/102749.html">uni-app項目展示屏幕文字滾動效果</a></h3> <p>閱讀 2414<span>·</span>2019-08-23 16:10</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/101470.html">淺談JavaScript代碼預解析 + 示例詳解</a></h3> <p>閱讀 3385<span>·</span>2019-08-23 15:04</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/99867.html">使用 Solid 私有化存儲 IPFS 文件哈希值</a></h3> <p>閱讀 1357<span>·</span>2019-08-23 13:58</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/97293.html">JavaScript六種非常經典的對象繼承方式</a></h3> <p>閱讀 357<span>·</span>2019-08-23 11:40</p></li> <li><h3 class="ellipsis"><a href="http://m.specialneedsforspecialkids.com/yun/96336.html">HTML5 新特性</a></h3> <p>閱讀 2461<span>·</span>2019-08-23 10:26</p></li> </ul> </div>  <div id="iikags2" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動</span></h6> <div id="qswagk2" class="com_adbox"> <div id="aaewoce" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://m.specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://m.specialneedsforspecialkids.com/yun/data/attach/240625/2rTjEHmi.png" alt="云服務器"> </a> </div> <div> <a href="http://m.specialneedsforspecialkids.com/site/product/gpu.html" rel="nofollow"> <img src="http://m.specialneedsforspecialkids.com/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務器"> </a> </div> </div> </div> </div>  <div id="qoq2sg0" class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"http://m.specialneedsforspecialkids.com/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section>  <div id="wgmew2c" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div>  <div id="aygkqcc" class="site-mobile-shade"></div>  <div class="ymq0eqs" id="payread"> <div id="2iogyao" class="layui-form-item">閱讀需要支付1元查看</div> <div id="wikqu2m" 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("復制代碼 ").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("復制成功") }); clipboard.on('error', function(e) { alert("復制失敗") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="http://m.specialneedsforspecialkids.com/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="http://m.specialneedsforspecialkids.com/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="http://m.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:"付費閱讀", shadeClose: true, content: $('#payread') }); } // 舉報 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("評論內容不能為空"); 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://m.specialneedsforspecialkids.com/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "http://m.specialneedsforspecialkids.com/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人贊"); } }); }else{ alert("您已經贊過"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交數據的類型 POST GET type:"POST", //提交的網址 url:"http://m.specialneedsforspecialkids.com/yun/favorite/topicadd.html", //提交的數據 data:{tid:_tid,rs:_rs}, //返回數據的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前調用的函數 beforeSend:function(){}, //成功返回之后調用的函數 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) } } , //調用執行后調用的函數 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //調用出錯執行的函數 error: function(){ //請求出錯處理 postadopt=false; } }); } </script> <footer> <div id="0ogmcu0" class="layui-container"> <div id="w2qioqg" class="flex_box_zd"> <div id="kkaua02" class="left-footer"> <h6><a href="http://m.specialneedsforspecialkids.com/"><img src="http://m.specialneedsforspecialkids.com/yun/static/theme/ukd//images/logo.png" alt="UCloud （優刻得科技股份有限公司）"></a></h6> <p>UCloud （優刻得科技股份有限公司）是中立、安全的云計算服務平臺，堅持中立，不涉足客戶業務領域。公司自主研發IaaS、PaaS、大數據流通平臺、AI服務平臺等一系列云計算產品，并深入了解互聯網、傳統企業在不同場景下的業務需求，提供公有云、混合云、私有云、專有云在內的綜合性行業解決方案。</p> </div> <div id="omumssq" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務</h6> <p><a href="http://m.specialneedsforspecialkids.com/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/solutions.html" >行業解決方案</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/pro-notice/">產品動態</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 >Pinex</a></p> <p><a >AI繪畫</a></p> </li> <li> <h6>社區欄目</h6> <p><a href="http://m.specialneedsforspecialkids.com/yun/column/index.html">專欄文章</a></p> <p><a href="http://m.specialneedsforspecialkids.com/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問題</h6> <p><a href="http://m.specialneedsforspecialkids.com/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/about/news/recent/" >新聞動態</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/about/news/report/">媒體動態</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/cases.html">客戶案例</a></p> <p><a href="http://m.specialneedsforspecialkids.com/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優刻得"></span> <p>掃掃了解更多</p></div> </div> <div id="u2acigg" class="copyright">Copyright ? 2012-2023 UCloud 優刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網安備 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.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://m.specialneedsforspecialkids.com/" title="国产xxxx99真实实拍">国产xxxx99真实实拍</a> <div class="friend-links"> <a href="http://m.cp97744.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="kw0mc" class="pl_css_ganrao" style="display: none;"><strike id="kw0mc"><s id="kw0mc"><bdo id="kw0mc"></bdo></s></strike><pre id="kw0mc"><td id="kw0mc"><fieldset id="kw0mc"></fieldset></td></pre><delect id="kw0mc"><tr id="kw0mc"><s id="kw0mc"></s></tr></delect><acronym id="kw0mc"></acronym><blockquote id="kw0mc"></blockquote><em id="kw0mc"><delect id="kw0mc"><strike id="kw0mc"></strike></delect></em><th id="kw0mc"></th><abbr id="kw0mc"><pre id="kw0mc"><blockquote id="kw0mc"></blockquote></pre></abbr><object id="kw0mc"><small id="kw0mc"><button id="kw0mc"></button></small></object><dfn id="kw0mc"></dfn><optgroup id="kw0mc"></optgroup><fieldset id="kw0mc"></fieldset><cite id="kw0mc"><nav id="kw0mc"><kbd id="kw0mc"></kbd></nav></cite><nav id="kw0mc"></nav><strike id="kw0mc"></strike><nav id="kw0mc"></nav><noscript id="kw0mc"></noscript><tbody id="kw0mc"><button id="kw0mc"><samp id="kw0mc"></samp></button></tbody><wbr id="kw0mc"></wbr><kbd id="kw0mc"></kbd><pre id="kw0mc"></pre><th id="kw0mc"><menu id="kw0mc"><noscript id="kw0mc"></noscript></menu></th><dl id="kw0mc"></dl><abbr id="kw0mc"></abbr><wbr id="kw0mc"><strong id="kw0mc"><abbr id="kw0mc"></abbr></strong></wbr><td id="kw0mc"></td><xmp id="kw0mc"></xmp><strong id="kw0mc"><noframes id="kw0mc"><ul id="kw0mc"></ul></noframes></strong><bdo id="kw0mc"></bdo><tr id="kw0mc"></tr><th id="kw0mc"></th><abbr id="kw0mc"><sup id="kw0mc"><td id="kw0mc"></td></sup></abbr><center id="kw0mc"></center><optgroup id="kw0mc"><abbr id="kw0mc"><sup id="kw0mc"></sup></abbr></optgroup><th id="kw0mc"></th><th id="kw0mc"></th><tbody id="kw0mc"><source id="kw0mc"><strong id="kw0mc"></strong></source></tbody><em id="kw0mc"></em><source id="kw0mc"></source><dd id="kw0mc"></dd><code id="kw0mc"><em id="kw0mc"><del id="kw0mc"></del></em></code><dl id="kw0mc"></dl><sup id="kw0mc"><td id="kw0mc"><fieldset id="kw0mc"></fieldset></td></sup><tr id="kw0mc"></tr><acronym id="kw0mc"></acronym><pre id="kw0mc"></pre><optgroup id="kw0mc"></optgroup><object id="kw0mc"></object><cite id="kw0mc"></cite><center id="kw0mc"></center><kbd id="kw0mc"></kbd><kbd id="kw0mc"></kbd><tr id="kw0mc"></tr><ul id="kw0mc"><pre id="kw0mc"><dd id="kw0mc"></dd></pre></ul><td id="kw0mc"><fieldset id="kw0mc"><optgroup id="kw0mc"></optgroup></fieldset></td><small id="kw0mc"></small><dfn id="kw0mc"></dfn><tbody id="kw0mc"></tbody><xmp id="kw0mc"></xmp><del id="kw0mc"><dfn id="kw0mc"><td id="kw0mc"></td></dfn></del><button id="kw0mc"></button><noscript id="kw0mc"></noscript><pre id="kw0mc"><blockquote id="kw0mc"><dl id="kw0mc"></dl></blockquote></pre><center id="kw0mc"><dl id="kw0mc"><optgroup id="kw0mc"></optgroup></dl></center><del id="kw0mc"></del><source id="kw0mc"></source><dl id="kw0mc"></dl><dfn id="kw0mc"></dfn><s id="kw0mc"></s><acronym id="kw0mc"><dd id="kw0mc"><th id="kw0mc"></th></dd></acronym><optgroup id="kw0mc"></optgroup><dfn id="kw0mc"></dfn><option id="kw0mc"></option><sup id="kw0mc"></sup><td id="kw0mc"><fieldset id="kw0mc"><optgroup id="kw0mc"></optgroup></fieldset></td><input id="kw0mc"><tbody id="kw0mc"><button id="kw0mc"></button></tbody></input><tr id="kw0mc"></tr><xmp id="kw0mc"></xmp><xmp id="kw0mc"><strike id="kw0mc"><menu id="kw0mc"></menu></strike></xmp><input id="kw0mc"><tbody id="kw0mc"><button id="kw0mc"></button></tbody></input><optgroup id="kw0mc"></optgroup><abbr id="kw0mc"></abbr><object id="kw0mc"></object><optgroup id="kw0mc"></optgroup><samp id="kw0mc"><tbody id="kw0mc"><source id="kw0mc"></source></tbody></samp><option id="kw0mc"></option><xmp id="kw0mc"></xmp><xmp id="kw0mc"></xmp><optgroup id="kw0mc"></optgroup><blockquote id="kw0mc"></blockquote><option id="kw0mc"></option><kbd id="kw0mc"></kbd><object id="kw0mc"></object><optgroup id="kw0mc"></optgroup><th id="kw0mc"></th><dl id="kw0mc"></dl><noscript id="kw0mc"><option id="kw0mc"><xmp id="kw0mc"></xmp></option></noscript><tfoot id="kw0mc"></tfoot><dfn id="kw0mc"></dfn><acronym id="kw0mc"></acronym><center id="kw0mc"></center><bdo id="kw0mc"></bdo><small id="kw0mc"></small><dfn id="kw0mc"></dfn><del id="kw0mc"></del><center id="kw0mc"></center><pre id="kw0mc"></pre><abbr id="kw0mc"></abbr><optgroup id="kw0mc"></optgroup><cite id="kw0mc"></cite><source id="kw0mc"></source><abbr id="kw0mc"></abbr><tbody id="kw0mc"></tbody><tr id="kw0mc"><sup id="kw0mc"><center id="kw0mc"></center></sup></tr><tr id="kw0mc"></tr><td id="kw0mc"><code id="kw0mc"><em id="kw0mc"></em></code></td><acronym id="kw0mc"><dd id="kw0mc"><th id="kw0mc"></th></dd></acronym><tfoot id="kw0mc"></tfoot><tbody id="kw0mc"><pre id="kw0mc"><blockquote id="kw0mc"></blockquote></pre></tbody><bdo id="kw0mc"></bdo><dd id="kw0mc"></dd><abbr id="kw0mc"><pre id="kw0mc"><blockquote id="kw0mc"></blockquote></pre></abbr><ul id="kw0mc"></ul><fieldset id="kw0mc"></fieldset><strong id="kw0mc"></strong><option id="kw0mc"><xmp id="kw0mc"><tr id="kw0mc"></tr></xmp></option><kbd id="kw0mc"></kbd><tbody id="kw0mc"><source id="kw0mc"><small id="kw0mc"></small></source></tbody><tbody id="kw0mc"></tbody><small id="kw0mc"></small><abbr id="kw0mc"><ul id="kw0mc"><pre id="kw0mc"></pre></ul></abbr><wbr id="kw0mc"><cite id="kw0mc"><nav id="kw0mc"></nav></cite></wbr><noframes id="kw0mc"></noframes><ul id="kw0mc"></ul><pre id="kw0mc"></pre><strike id="kw0mc"><s id="kw0mc"><bdo id="kw0mc"></bdo></s></strike><li id="kw0mc"><center id="kw0mc"><dd id="kw0mc"></dd></center></li><tfoot id="kw0mc"><object id="kw0mc"><small id="kw0mc"></small></object></tfoot><strike id="kw0mc"><s id="kw0mc"><li id="kw0mc"></li></s></strike><source id="kw0mc"></source><tr id="kw0mc"></tr><optgroup id="kw0mc"></optgroup><xmp id="kw0mc"></xmp><kbd id="kw0mc"></kbd><rt id="kw0mc"></rt><center id="kw0mc"><dd id="kw0mc"><th id="kw0mc"></th></dd></center><menu id="kw0mc"></menu><pre id="kw0mc"></pre><table id="kw0mc"></table><fieldset id="kw0mc"><optgroup id="kw0mc"><tr id="kw0mc"></tr></optgroup></fieldset></div> <script src="http://m.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

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

【譯】原生表單組件