HTML表單3（下拉列表、多行文字輸入）-零基礎自學

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

有下拉列表的表單

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

開始學習吧！

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

帶有下拉列表的表單

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

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

<select><option></option></select>

這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type="image" src="img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！

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

請選擇省份<select><option></option></select>

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

請選擇省份
  <select >
  <option >河北</option>
  <option >山東</option>
  <option >河南</option>
  <option >海南</option>
  <option >江蘇</option>
  <option >安徽</option>
  </select>
  <br><br>

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

請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

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

頁面效果如下：

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

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

示例代碼如下：

請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option>
 <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>

頁面效果如圖：

多行文字輸入表單

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

而是多行輸入框，如圖：

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

<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>

這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。

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

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

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

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

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

<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>

頁面效果如圖：

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

數據集表單

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

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

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

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

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

示例代碼如下：

<fliedset> <legend>信息打包</legend> </fliedset>

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

<form>
  <fieldset><!--開始-->
  <legend>信息打包</legend><br>
  <!--標題-->興趣愛好：<br>
  <input type="checkbox" name="hobby" value="reading"/>讀書
  <input type="checkbox" name="hobby" value="film"/>電影
  <input type="checkbox" name="hobby" value="painting"/>繪畫
  <input type="checkbox" name="hobby" value="music"/>音樂
  <br>
  最高學歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  請簡要描述您的劇本的情節<br>
  <textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--結尾-->
  <input type="image" src="img/示例圖片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type="submit" value="submit"/>
  </form>

頁面效果如下：

今天的內容結束了！

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

HTML完整學習目錄

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中的<div>塊元素——零基礎自學網頁制作

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

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

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

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

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

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

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

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

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

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

序列表

經過之前關于表格、表單的學習后，再來學習列表，就顯得非常的簡單和容易理解了。

學習是構建知識體系的過程，沒有形成體系的知識學習再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎的初學者，第一次看我的教程，如果時間允許的話，請務必從目錄中找尋第一篇，循序漸進的學習。

列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標簽，在這個標簽中添加內容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁面效果如下：

通過修改<ol>標簽中的type屬性我們可以改變序號顯示的樣式，默認的是數字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

頁面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。

step1.點擊"輸入方式"

step2.點擊"特殊符號"后選擇數字序號，找到羅馬數字即可

除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標簽中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語中的片假名表示序號)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

頁面效果如圖所示：

是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。

如圖：

資料來自w3school

無序列表

無序列表與有序列表的區別在于最外層的標簽，它的寫法是這樣的：<ul></ul>。

有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。

無序為unorder，無序列表為unorder list，縮寫為ul。

無序列表<ul>標簽的type屬性用來控制列表前的標記顯示演示。

示例代碼如下：

<h>無序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>

頁面效果如下：

通過圖片我們可知，無序列表默認的列表標識就是type="disc"。

style屬性的話大家自己試試吧，這里就不啰嗦了。

定義列表

這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。

首先要寫入<dl></dl>標簽。這是告訴瀏覽器這里是個定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫是dl。

下面在<dl></dl>標簽中間寫入定義的名稱<dt></dt>,即definition title（標題）。

與定義名稱標簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計算機</dt> 
  <dd>用來計算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

頁面效果如下：

今天的內容結束了！

列表嵌套列表的測試大家自己試試吧，學到現在，相信你們都可以完成了！

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

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

HTML完整學習目錄

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中的<div>塊元素——零基礎自學網頁制作

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

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

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

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

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

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

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

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

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

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

、常用html標簽

4.1 常用的 html 標簽

<!-- 1、成對出現的標簽：-->

<h1>h1標題</h1>
<div>這是一個div標簽</div>
<p>這個一個段落標簽</p>


<!-- 2、單個出現的標簽：-->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>

<!-- 3、帶屬性的標簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網</a>

<!-- 4、標簽的嵌套 -->
<div>
   <img src="images/pic.jpg" alt="圖片">
   <a href="http://www.baidu.com">百度網</a>
</div>

提示:

標簽不區分大小寫，但是推薦使用小寫。
根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽)2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

4.2 小結

學習 html 語言就是學習標簽的用法，常用的標簽有20多個。
編寫 html 標簽建議使用小寫
根據書寫形式，html 標簽分為雙標簽和單標簽
單標簽沒有標簽內容，雙標簽可以嵌套其它標簽和承載文本內容

五、資源路徑

當我們使用img標簽顯示圖片的時候，需要指定圖片的資源路徑，比如:

<img src="images/logo.png">

這里的src屬性就是設置圖片的資源路徑的，資源路徑可以分為相對路徑和絕對路徑。

5.1 相對路徑

從當前操作 html 的文檔所在目錄算起的路徑叫做相對路徑

示例代碼:

<!-- 相對路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對路徑方式2 -->
<img src="images/logo.png">

5.2 絕對路徑

從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/

示例代碼:

<!-- 絕對路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現資源文件找不到的問題

5.3 小結

相對路徑和絕對路徑是 html 標簽使用資源文件的兩種方式，一般使用相對路徑。
相對路徑是從當前操作的 html 文檔所在目錄算起的路徑
絕對路徑是從根目錄算起的路徑

六、列表標簽

6.1 列表標簽的種類

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

6.2 無序列表

<!-- ul標簽定義無序列表 -->
<ul>
   <!-- li標簽定義列表項目 -->
   <li>列表標題一</li>
   <li>列表標題二</li>
   <li>列表標題三</li>
</ul>

6.3 有序列表

<!-- ol標簽定義有序列表 -->
<ol>
   <!-- li標簽定義列表項目 -->
   <li><a href="#">列表標題一</a></li>
   <li><a href="#">列表標題二</a></li>
   <li><a href="#">列表標題三</a></li>
</ol>

6.4 小結

列表標簽有無序列表標簽(ul標簽)和有序列表標簽(ol標簽)
列表項目對順序有要求的時候使用ol標簽
列表項目對順序無要求的時候使用ul標簽

七、表格標簽

7.1 表格的結構

表格是由行和列組成，好比一個excel文件

7.2 表格標簽

<table>標簽：表示一個表格
     <tr>標簽：表示表格中的一行
         <td>標簽：表示表格中的列
         <th>標簽：表示表格中的表頭

示例代碼:

<table>
   <tr>
       <th>姓名</th>
       <th>年齡</th>
   </tr>
   <tr>
       <td>張三</td>
       <td>18</td>
   </tr>
</table>

表格邊線合并:

border-collapse 設置表格的邊線合并，如：border-collapse:collapse;

在線咨詢

上一篇：Web產品設計的適配方法
下一篇：HTML5性能跑分數據證實Moto G6系列采用全面

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML表單3（下拉列表、多行文字輸入）-零基礎自學

有下拉列表的表單

HTML完整學習目錄

HTML完整學習目錄

、常用html標簽

4.1 常用的 html 標簽

4.2 小結

五、資源路徑

5.1 相對路徑

5.2 絕對路徑

5.3 小結

六、列表標簽

6.1 列表標簽的種類

6.2 無序列表

6.3 有序列表

6.4 小結

七、表格標簽

7.1 表格的結構

7.2 表格標簽

您的項目需求