App下載

HTML下拉框如何實(shí)現(xiàn)？

猿友 2021-03-12 17:49:49 瀏覽數(shù) (11033)
反饋

我們?cè)跒g覽網(wǎng)頁(yè)頁(yè)面時(shí)，經(jīng)常可以看到下拉菜單的使用。比如用在地區(qū)的選擇上。那么HTML的下拉框如何實(shí)現(xiàn)呢？這篇文章告訴你。

我們需要新建一個(gè)form表單，然后在form引入select標(biāo)簽。

<body>
<form action="">
<select name="city">
<option value="fuzhou">福州</option>
<option value="xiamen">廈門市</option>
<option value="quanzhou">泉州</option>
<option value="zhangzhou">漳州</option>
</select>
</form>
</body>

最終效果如下：

city

這是最簡(jiǎn)單的下拉框用法。更為復(fù)雜的就是加上樣式，使它更為美觀。比如常見(jiàn)的web前端框架中，有各類樣式的框架，其中包含許多下拉框的樣式。如下是element前端框架中的一個(gè)下拉框樣式。

select

如何引用此類前端框架，也在文章：HTML 中如何引入 CSS 中提到，此處便不再敘述。

以上就是HTML下拉框如何實(shí)現(xiàn)的全部?jī)?nèi)容。更多表單的學(xué)習(xí)請(qǐng)前往 HTML 表單。


HTML

0 人點(diǎn)贊