HTML表單(下)

datalist標(biāo)簽與list屬性

<datalist>標(biāo)簽是用來給list屬性提供列表數(shù)據(jù)的，<datalist>類似于一個(gè)數(shù)據(jù)組，option標(biāo)簽用于給這個(gè)數(shù)據(jù)組填充數(shù)據(jù)。然后在組件的list屬性里指定<datalist>標(biāo)簽的id屬性值即可實(shí)現(xiàn)下拉框的效果，示例：

運(yùn)行結(jié)果：

將表單提交到服務(wù)器頁面

在html5中表單提交頁面可以在submit中指定，要注意的是：html5之前的版本不支持這么寫，這是html5才有的寫法。在submit中指定表單的提交頁面的話，就可以實(shí)現(xiàn)不同的submit設(shè)置不同的表單提交頁面。

除了可以在submit中指定表單提交頁面外，還可以使用formmethod屬性來指定提交的方式，同樣的有formtarget屬性用來指定表單提交后顯示的窗口。所以submit中支持<form>標(biāo)簽的全部屬性，只不過是在屬性名稱的前面多了個(gè)form而已。

接下來我們使用w3c的服務(wù)器接收頁面來看看<input />中name屬性的作用：

運(yùn)行結(jié)果：

服務(wù)器接收頁面就會把name的值指向你頁面輸入的數(shù)據(jù)：

所以name屬性是用來給服務(wù)器識別你輸入的數(shù)據(jù)的

如果把formmethod的值設(shè)置為post的話，提交的數(shù)據(jù)就不會顯示出來，示例：

運(yùn)行結(jié)果：

formmethod設(shè)置為post后，服務(wù)器接收頁面就不會顯示數(shù)據(jù)，數(shù)據(jù)被隱藏了：

value屬性在單選框中的應(yīng)用示例：

運(yùn)行結(jié)果：

服務(wù)器就會把name值指向value值：

在復(fù)選框應(yīng)用也是一樣的：

運(yùn)行結(jié)果：

服務(wù)器接收頁面：

表單組件之<select>< /select>列表框和下拉框

select主要是用來實(shí)現(xiàn)下拉框和列表框效果的，也是使用option來填充數(shù)據(jù)，我們先來實(shí)現(xiàn)一個(gè)下拉框，示例：

這個(gè)下拉框和在input中使用datalist標(biāo)簽和list屬性實(shí)現(xiàn)的下拉框不太一樣，運(yùn)行結(jié)果：

在option中可以使用selected屬性來默認(rèn)選擇一個(gè)數(shù)據(jù)，示例：

運(yùn)行結(jié)果：

使用size屬性來實(shí)現(xiàn)列表框，size的值是一個(gè)數(shù)量，表示顯示多少個(gè)option的數(shù)據(jù)，示例：

運(yùn)行結(jié)果：

聲明multiple屬性可以實(shí)現(xiàn)多選，在頁面里按住Ctrl鍵然后用鼠標(biāo)進(jìn)行點(diǎn)擊就能多選，示例：

運(yùn)行結(jié)果：

服務(wù)器接收頁面：

表單組件之<textarea>< /textarea>多行文本框

textarea就只是用來做一個(gè)多行文本框，這個(gè)標(biāo)簽常用的屬性就是rows和cols，前者用來控制行數(shù)后者用來控制列數(shù)，cols是按字符為單位的。不過除了IE內(nèi)核的瀏覽器不能用鼠標(biāo)拉動大小外，其他的瀏覽器是可以支持用鼠標(biāo)拉動文本框的大小的。

示例：

運(yùn)行結(jié)果：

可以拉動：

服務(wù)器接收頁面：

表單組件之<button>< /button>按鈕

可能有些人會疑問，為什么input已經(jīng)有button了，還要額外再弄一個(gè)button標(biāo)簽?zāi)兀窟@是因?yàn)閎utton作為標(biāo)簽的話，就能嵌套其他標(biāo)簽，例如<font>、<p>、<pre>等等，能夠?qū)崿F(xiàn)更多的效果，例如我可以在button標(biāo)簽嵌套一個(gè)img放上一張圖片。

在input里則只能用type屬性來引入button組件，所以有很多的限制，頂多只能在文字上做一些效果，并且在爬取數(shù)據(jù)的時(shí)候還得需要判斷一下type里面的值是否是button，如果是使用button標(biāo)簽的話直接找標(biāo)簽就可以了。

button標(biāo)簽類型默認(rèn)是submit按鈕，如果要指定其他類型的按鈕就使用type屬性來指定，示例：

運(yùn)行結(jié)果：

同樣的button標(biāo)簽也支持formaction、formmethod、formtarget等屬性，示例：

運(yùn)行結(jié)果：

服務(wù)器接收頁面：

給按鈕添加圖片示例：

運(yùn)行結(jié)果：