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>標簽實現文本內鏈接——零基礎自學網頁制作

tml概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

html基本結構

一個html的基本結構如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>網頁標題</title>
 </head>
 <body>
 網頁顯示內容
 </body>
</html>

第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。

HTML文檔類型

目前常用的兩種文檔類型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。

此版本文檔用sublime text創建方法： html:xt + tab

文檔示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文檔類型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab

文檔示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文檔類型 </title>
</head>
<body>
</body>
</html>

兩種文檔的區別

1、文檔聲明和編碼聲明

2、html5新增了標簽元素以及元素屬性

html注釋：

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：

<!-- 這是一段注釋 -->

html標題標簽

通過

、

,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：

用作主標題，其后是

，再其次是

，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

html段落標簽、換行標簽與字符實體

html段落標簽

標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的
 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
 </p>
 <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方
 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網
 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
</body>
</html>

html換行標簽

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入

來強制換行，代碼如下：

<p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
</p>

html字符實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：

<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： -->
<p>
 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：

<!-- “<” 和 “>” 的字符實體為 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html塊標簽、含樣式的標簽

html塊標簽

1、

標簽塊元素，表示一塊內容，沒有具體的語義。

2、標簽行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標簽

1、 標簽行內元素，表示語氣中的強調詞

2、標簽行內元素，表示專業詞匯

3、 標簽行內元素，表示文檔中的關鍵字或者產品名

4、標簽行內元素，表示非常重要的內容

語義化的標簽

語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。

html圖像標簽、絕對路徑和相對路徑

html圖像標簽

標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：

src屬性定義圖片的引用地址

alt屬性定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

絕對地址：相對于磁盤的位置去定位文件的地址

相對地址：相對于引用文件本身去定位被引用的文件地址

絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：

“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。

“ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

html鏈接標簽

標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：

href屬性定義跳轉的地址

title屬性定義鼠標懸停時彈出的提示文字框

target屬性定義鏈接窗口打開的位置

target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開

target="_blank" 新頁面會在新開的一個瀏覽器窗口打開

TML（超文本標記語言）中的元素可以分為兩類：塊級元素和內聯元素。塊級元素會自動占據一行，并且可以設置寬度和高度。內聯元素不會自動占據一行，而是根據文本內容的長度自動調整寬度。塊級元素可以包含其他元素，包括文本、圖像、鏈接等。內聯元素通常不包含其他元素。

1. 塊級元素具有以下特點：

塊級元素會自動占據一行，并且可以設置寬度和高度。
塊級元素可以包含其他元素，包括文本、圖像、鏈接等。
塊級元素可以設置背景顏色、邊框、字體等樣式屬性。

以下是一些常見的塊級元素：

<div>：用于定義一個塊級容器，可以包含其他元素。
<p>：用于定義段落，通常包含文本內容。
<h1>到<h6>：用于定義標題，從h1到h6分別表示從大到小的標題級別。
<table>：用于定義表格，包含多個行和列。
<form>：用于定義表單，包含輸入框、按鈕等元素。
<ul>和<ol>：用于定義無序列表和有序列表，包含多個列表項。
<img>：用于定義圖像，用于在網頁中顯示圖片。

這些塊級元素可以通過設置 CSS 樣式屬性來實現不同的布局和樣式效果，例如設置背景顏色、邊框、字體、大小、顏色等。同時，塊級元素還可以通過設置 CSS 定位屬性來實現定位和浮動效果，例如設置position: relative;、float: left;

2. 內聯元素具有以下特點：

內聯元素不會自動占據一行，而是根據文本內容的長度自動調整寬度。
內聯元素可以設置字體、顏色、大小等樣式屬性。
內聯元素通常不包含其他元素，而是直接嵌入文本內容中。

以下是一些常見的內聯元素：

<a>：用于定義超鏈接，通常用于鏈接到其他網頁或文件。
<em>：用于定義強調文本，通常呈現為斜體效果。
<strong>：用于定義加粗文本，通常呈現為粗體效果。
<span>：用于定義自定義樣式的文本，通常用于應用特定的 CSS 樣式。
<img>：用于定義圖像，通常用于在網頁中顯示圖片。

這些內聯元素可以通過設置 CSS 樣式屬性來實現不同的樣式效果，例如設置字體、顏色、大小等。同時，內聯元素還可以通過設置 CSS 定位屬性來實現定位和浮動效果，例如設置position: relative;、float: left。

<img> 元素在 HTML 中既可以是塊元素，也可以是內聯元素，這取決于它的 display 屬性的值。

默認情況下，<img> 元素是內聯元素，它會根據文本的流動方式進行布局。這意味著如果在一行中放置了多個 <img> 元素，它們會在一行中排列，并且不會自動換行。

但是，如果將 <img> 元素的 display 屬性設置為 block，那么它就會成為塊元素。塊元素會占據一行，并且可以設置寬度和高度。在這種情況下，多個 <img> 元素會自動換行，并且可以通過設置 margin 屬性來調整它們之間的間距。

html

<img src="image.jpg" alt="圖片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 屬性被設置為 block，這會使它成為一個塊元素。你可以根據需要調整圖片的寬度和高度，以及 margin 屬性來控制圖片之間的間距。

在線咨詢

上一篇：CSS3 漸變（Gradients）大全-第一章
下一篇：用HTML制作一個簡單頁面（代碼閱讀練習）-零基礎自學網頁制作

您的項目需求

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

整合營銷服務商