html製作表單時如何輸入單選（HTML表單3下拉列表多行文字輸入）

2023-09-17 15:33:28 1

題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。

開始學習吧！

前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁製作》和《HTML表單元素初識2——零基礎自學網頁製作》中基本上把標籤的type屬性裡不同的值進行了講解與實踐，今天我們來學習其他包含在之間的元素。

帶有下拉列表的表單

我們在一些網站填寫註冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在於不會出現拼寫錯誤。例如：

寫這個功能我們需要介紹一組新標籤。"select"（選擇）。在這個標籤中再添加。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：

這段代碼我們繼續在昨天的"表單.HTML"文件中添加即可，在這段代碼之前即可！與這個圖片提交按鈕共用一個標籤！

下面我們為多選表單添加名稱，示例代碼如下：

請選擇省份

下面我們添加不同選項，示例代碼如下：

請選擇省份 河北 山東 河南 海南 江蘇 安徽

為了規範起見，我們為表單信息添加name和value屬性，示例代碼如下：

請選擇省份 河北 山東 河南 海南 江蘇 安徽

大家要注意的是，在下拉列表表單中，name寫在中，value寫在中。

頁面效果如下：

這裡告訴大家一個規律，下拉列表表單默認顯示第一個中的文字內容。

如果您想改變這個默認顯示，請在需要顯示的中添加selected屬性，並賦值為"selected"。

示例代碼如下：

請選擇省份 河北 山東 河南 海南江蘇安徽

頁面效果如圖：

多行文字輸入表單

我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這麼短的單行輸入框。

而是多行輸入框，如圖：

使用標籤即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：

請簡要描述您的劇本的情節

這段代碼添加到之後，與其共同使用一個標籤。

下面我們為這個多行輸入框添加一些提示和限制。

首先，添加提示文字，和type="text"的標籤一樣，都是使用placeholder屬性。

第二，我們限制一下字數，使用maxlength（最大長度）屬性。

第三，在頁面加載完成後，直接讓光標停留在輸入框中，使用autofocus屬性。

下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性！）

請簡要描述您的劇本的情節

頁面效果如圖：

如果刷新頁面不能正確顯示，請嘗試關閉後重新打開！

數據集表單

數據集表單實際上就是一個將不同選項或信息打包上傳的設置。

當一組表單元素放到 標籤內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）

這個數據集有三個部分組成，首先是,這個標籤不會顯示，只是告訴瀏覽器這裡的數據要打包。

第二是,"legend"(說明)，這裡添加數據集名稱。

第三就是我們之前學到的那些標籤了。

示例代碼如下：

信息打包

下面我們使用這段代碼把form2打包一下吧。示例代碼如下：

信息打包 興趣愛好： 讀書 電影 繪畫 音樂 最高學歷： 高中 本科 碩士 博士 請選擇省份 河北 山東 河南 海南 江蘇 安徽 請簡要描述您的劇本的情節

頁面效果如下：

今天的內容結束了！

如果您喜歡我的教程請關注我，點讚也能讓我充滿動力！

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁製作

HTML是什麼？——零基礎自學網頁製作

第一個HTML頁面如何寫？——零基礎自學網頁製作

HTML頁面中head標籤有啥用？——零基礎自學網頁製作

初識meta標籤與SEO——零基礎自學網頁製作

HTML中的元素使用方法1——零基礎自學網頁製作

HTML中的元素使用方法2——零基礎自學網頁製作

HTML元素中的屬性1——零基礎自學網頁製作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁製作

使用HTML添加表格1（基本元素）——零基礎自學網頁製作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁製作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁製作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁製作

16進位顏色表示與RGB色彩模型——零基礎自學網頁製作

HTML中的塊級元素與內聯元素——零基礎自學網頁製作

初識HTML中的塊元素——零基礎自學網頁製作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁製作

封閉在家學網頁製作！為頁面嵌入PDF文件——零基礎自學網頁製作

HTML表單元素初識1——零基礎自學網頁製作

HTML表單元素初識2——零基礎自學網頁製作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁製作

HTML表單4（form的action、method屬性）——零基礎自學網頁製作

HTML列表製作講解——零基礎自學網頁製作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁製作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁製作

HTML中使用標籤實現文本內連結——零基礎自學網頁製作