HTML表單(下)

datalist標簽與list屬性

<datalist>標簽是用來給list屬性提供列表數據的，<datalist>類似于一個數據組，option標簽用于給這個數據組填充數據。然后在組件的list屬性里指定<datalist>標簽的id屬性值即可實現下拉框的效果，示例：

運行結果：

將表單提交到服務器頁面

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

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

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

運行結果：

服務器接收頁面就會把name的值指向你頁面輸入的數據：

所以name屬性是用來給服務器識別你輸入的數據的

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

運行結果：

formmethod設置為post后，服務器接收頁面就不會顯示數據，數據被隱藏了：

value屬性在單選框中的應用示例：

運行結果：

服務器就會把name值指向value值：

在復選框應用也是一樣的：

運行結果：

服務器接收頁面：

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

select主要是用來實現下拉框和列表框效果的，也是使用option來填充數據，我們先來實現一個下拉框，示例：

這個下拉框和在input中使用datalist標簽和list屬性實現的下拉框不太一樣，運行結果：

在option中可以使用selected屬性來默認選擇一個數據，示例：

運行結果：

使用size屬性來實現列表框，size的值是一個數量，表示顯示多少個option的數據，示例：

運行結果：

聲明multiple屬性可以實現多選，在頁面里按住Ctrl鍵然后用鼠標進行點擊就能多選，示例：

運行結果：

服務器接收頁面：

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

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

示例：

運行結果：

可以拉動：

服務器接收頁面：

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

可能有些人會疑問，為什么input已經有button了，還要額外再弄一個button標簽呢？這是因為button作為標簽的話，就能嵌套其他標簽，例如<font>、<p>、<pre>等等，能夠實現更多的效果，例如我可以在button標簽嵌套一個img放上一張圖片。

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

button標簽類型默認是submit按鈕，如果要指定其他類型的按鈕就使用type屬性來指定，示例：

運行結果：

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

運行結果：

服務器接收頁面：

給按鈕添加圖片示例：

運行結果：