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

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、達(dá)孜ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的達(dá)孜網(wǎng)站制作公司

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例：

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

可以拉動(dòng)：

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

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

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

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

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

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

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

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

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

給按鈕添加圖片示例：

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

當(dāng)前文章：HTML表單(下)
網(wǎng)站URL：http://chinadenli.net/article0/geodio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、云服務(wù)器、ChatGPT、網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)