前端入門-html 表單控件使用

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數據

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區別，不能包含特殊字符，也不可使用html 標簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時自動對電子郵件地址進行驗證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。

如下實例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內容，是一種特殊按鈕。

如剛才的登錄表單，提交后會返回結果：

重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。

輸入數據

點擊重置按鈕后，表單數據清空

重置清空數據

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網頁中使用窗口框架

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式
行為	JavaScript	網頁交互

1 HTML概念

HTML，超文本標記語言（Hyper Text Markup Language），是一門描述性語言。標記，標簽，元素，叫法不同，意思相同。HTML超文本標記語言主要通過標簽的方式，對網頁頁面的文本、圖片、音頻、視頻等內容進行描述。學習HTML，就是學習各種標簽，來搭建網頁的結構。

2 HTML結構

結構：!DOCTYPE

說明：作用是告訴瀏覽器用哪個文檔規范來解析文檔

標簽：html

說明：用于搭建HTML網頁文檔結構和網頁布局

?標簽：head

說明：用于定義HTML網頁文檔的頭部,它是所有頭部元素的容器?

?標簽：body

說明：用來定義HTML網頁文檔的主體區域?

?標簽：meta

說明：用來描述HTML網頁文檔的屬性?

?標簽：title

說明：用來放到HTML網頁文檔的頭部，是搜索引擎首要抓取的目標代碼?

?2.1 標簽

標簽，也叫作標記，是由一對尖括號<>，里面包含單詞組成

2.1.1 雙標簽

<html></html>

2.1.2 單標簽

<br>

2.1.3 標簽關系

嵌套關系

<html>
    <head>
    </head>
</html>

并列關系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來幫助程序員記錄程序設計方法，輔助程序閱讀

4 head標簽

4.1 title標簽

雙標簽，定義網頁的標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標簽

是單標簽，用來描述HTML網頁文檔的屬性

4.2.1 name屬性

屬性值	說明
keywords	網頁關鍵字，多個逗號隔開
description	網頁描述
author	作者
copyright	版權信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網頁關鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網頁描述 -->
    <meta name="description" content="基礎前端知識">
    <!-- 網頁作者 -->
    <meta name="author" content="buddha">
    <!-- 網頁版權信息 -->
    <meta name="copyright" content="版權所有，翻版必究">
</head>
<body>

</body>
</html>

標簽屬性：

1、標簽的屬性寫在開始標簽內部

2、標簽名與屬性之間要有空格隔開

3、一個標簽可以同時存在多個屬性

4、屬性之間以空格隔開

5、屬性沒有先后順序之分

4.2.2 http-equiv屬性

屬性值	說明
Content-Type	定義網頁所使用編碼
refresh	定義網頁自動刷新跳轉

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設置網頁編碼完整寫法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設置網頁編碼簡寫寫法 -->
    <meta charset="UTF-8">
    <!-- 網頁打開3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標簽

是雙標簽，用來定義標簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內聯樣式寫這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標簽

是單標簽，是用來引入外部css樣式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script標簽

是雙標簽，是用來寫JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標簽

是單標簽，是用來設置整個網頁的基礎路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開發中很少用到，有人使用知道就行

上面所述標簽是放在head標簽里的，接下來接觸的標簽都是放在body標簽內的

5 文本標簽

5.1 標題標簽

是雙標簽，h是header的縮寫

<h1>h1標簽：一級標題</h1>
<h2>h2標簽：二級標題</h2>
<h3>h3標簽：三級標題</h3>
<h4>h4標簽：四級標題</h4>
<h5>h5標簽：五級標題</h5>
<h6>h6標簽：六級標題</h6>

特點：

1、字體加粗

2、獨占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標簽的主要意義是告訴搜索引擎這是一段文字的標題

5、<h1>在一個頁面最多只能有一個，不要用多個

5.2 段落標簽

是雙標簽，p是paragraph的縮寫

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點：

1、獨占一行

2、段落與段落之間，存在間隙

5.3 換行標簽

是單標簽，br是break的縮寫

<p>這是一段<br>文字</p>

特點：

1、強制換行

2、單標簽

5.4 水平線標簽

是單標簽，hr是horizon地平線的縮寫

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點：

1、在頁面中顯示一條水平線

2、單標簽

6 文本格式化標簽

標簽1	標簽2	說明
b	strong	加粗
u	ins	下劃線
i	em	傾斜
s	del	刪除線

<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>

特點：

1、不會獨占一行

2、推薦使用標簽2所在列標簽

6.1 上標標簽

sup是superscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標標簽

sub是subscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實體

在網頁中展示特殊符號效果時，需要使用字符實體替代

顯示結果	描述	實體名稱
	空格
<	小于號	<
>	大于號	>
&	與	&
"	雙引號	"
x	乘號	×
÷	除號	÷
-	長破折號	—
\|	豎線	\|
‘	左單引號	‘
‘	右單引號	’
?	版權符	©
?	注冊商標	®
?	商標	™
°	度	°

7 媒體標簽

7.1 圖片標簽

<img src="./001.jpg" alt="">

img標簽常見屬性：

屬性名	說明
src	圖片路徑（絕對路徑、相對路徑）
alt	圖片加載失敗時，顯示的文字
title	鼠標懸停時，顯示的文字
width	圖片寬度
height	圖片高度

只設置寬或高，會自動等比縮放，寬高只需要數字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對路徑：指目錄下的絕對位置，比如從根目錄開始的路徑，或完整的網絡地址
相對路徑：從當前文件開始出發找目標文件的過程

7.2 音頻標簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標簽常見屬性：

屬性名	說明
src	音頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

支持mp3、wav、ogg三種音頻格式

7.3 視頻標簽

<video src="video.mp4" controls loop autoplay></video>

屬性名	說明
src	視頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標簽

超鏈接，是雙標簽，實現各個獨立頁面之間進行跳轉，可以跳去站外也可以在站內之間跳轉

<a href="鏈接地址">文本或圖片</a>

站外跳轉，采用絕對路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內跳轉，采用相對路徑

<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>

<!-- b頁面 -->
<p>b頁面</p>

頁面內跳轉

<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標簽 -->
<br>
<h3 id="jd">推薦景點</h3>

屬性名	說明
href	跳轉鏈接
target	鏈接打開方式

target屬性值

屬性值	說明
_self	默認，原窗口打開鏈接
_blank	在新窗口打開鏈接
_parent	在父窗口打開鏈接
_top	在頂層窗口打開超鏈接

target屬性值一般使用_self（默認）和_blank

8 列表標簽

8.1 無序列表

<ul type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

解釋：

1、ul，unordered lists，無序列表，li，list item，列表項

2、ul標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
disc	默認，實心圓
circle	空心圓
square	實心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項

2、ol標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
1	默認，阿拉伯數字，1,2,3......
a	小寫英文字母，a,b,c......
A	大寫英文字母，A,B,C......
i	小寫羅馬數字,i,ii,iii......
I	大寫羅馬數字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定義列表

<dl>
    <dt>名詞</dt>
    <dd>描述</dd>
    ……
</dl>

解釋：

1、dl，definition lists，自定義列表；dt，definition term，自定義列表組；dd，definition description，自定義列表描述

<dl>
    <dt>稱呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格標簽

9.1 表格基本結構

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

解釋：

1、tr，table row，表格行；td，table data cell，表行單元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格標簽屬性

屬性名	屬性值	描述
border	數字	邊框寬度
width	數字	表格寬度
height	數字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標題標簽

<caption>標題內容</caption>，位于表格內第一行

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <th>序號</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語義化結構標簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

屬性名	屬性值	說明
rowspan	合并單元格個數	合并行，單元格垂直合并
colspan	合并單元格個數	合并列，單元格水平合并

<td rowspan="跨越的行數"></td>

<td colspan="跨越的列數"></td>

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
            <th>金額</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表單標簽

10.1 form標簽

雙標簽，包裹其它表單標簽

<form>
    // 表單
</form>

form標簽的常用屬性

屬性	說明
name	表單名稱
method	提交方式
action	提交地址
target	打開方式
enctype	編碼方式

name屬性

一個頁面中，表單可能不止一個。name屬性，用來區分不同的表單

<form name="myForm"></form>

method屬性

用來指定表單數據使用哪種提交方式給后端

屬性值	說明
get	get方式
post	post方式

<form method="get"></form>

action屬性

用來指定表單數據提交到哪個地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標簽的target屬性一樣，其屬性值也是四個，一般情況只用到_blank屬性值，默認也是這個值

<form target="_blank"></form>

enctype屬性

屬性值	說明
application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
multipart/form-data	不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值
text/plain	空格轉換為 "+" 加號，但不對特殊字符編碼

<form enctype="multipart/form-data"></form>

10.2 input標簽

input是單標簽

<input type="表單類型">

屬性值	說明
text	單行文本框
password	密碼文本框
radio	單選框
checkbox	多選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
file	文件上傳

單行文本框常用屬性

屬性	說明
value	設置文本框的默認值
size	設置文本框的長度
maxlength	設置最多可輸入字符

<form>
    <input type="text" value="默認值" size="長度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認值" size="長度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

屬性	說明
name	組名，同組單選框，組名要相同，必要屬性
value	單選框選項取值，必要屬性
checked	默認選中項，同組單選框，可以有一個默認選中項

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復選框

復選框和單選框的屬性都相同，區別復選框可以多選

<form>
    愛好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺球">臺球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區別：

1、input是單標簽，button是雙標簽

2、button標簽的信息除了文本，還可以是圖像、其它標簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對應表單數據提交給后端服務器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點擊重置后，所在form表單里所有內容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名稱" cols="列數" rows="行數"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>選項內容</option>
    <option>選項內容</option>
</select>

下拉列表標簽是為了節省頁面空間

select標簽屬性

屬性名	說明
name	數據提交后端所需字段
size	下拉選項顯示個數
multiple	默認只允許選一個，選多個得加這個屬性
disabled	所有下拉選項禁止選中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18歲以下</option>
        <option>18-28歲</option>
        <option>28-38歲</option>
        <option>38歲以上</option>
    </select>
</form>

option標簽屬性

屬性名	說明
selected	默認選中
value	被選中，數據提交后端的值
disabled	該下拉選項禁止選中

<form>
    <select name="age" size="5">
        <option value="1">18歲以下</option>
        <option value="2" disabled="disabled">18-28歲</option>
        <option value="3" selected="selected">28-38歲</option>
        <option value="4">38歲以上</option>
    </select>
</form>

11 框架標簽

<iframe src="URL" width="數值" height="數值"></iframe>

框架標簽常用屬性

屬性名	說明
src	嵌入的文檔地址
width	標簽寬度
height	標簽高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標簽類型

HTML標簽分為三種，行內標簽、塊級標簽和行內塊級標簽。

12.1 行內標簽

特點：

1、在頁面內只占據剛好能包裹自己內容的空間

2、沒有寬高，內容多大就多大，行內標簽不能嵌套塊級標簽（a標簽除外）

3、行內標簽設置寬高無效，可以對行高line-height進行設置

4、可以設置外邊距margin和內邊距padding，但只對左右邊距有效果，上下無效

5、常見行內標簽span、a、strong、ins、del、br等

span標簽

雙標簽，行內標簽，本身沒有固定樣式

<p>我是<span>中國人</span></p>

12.2 塊級標簽

特點：

1、獨占一行

2、高度、寬度、外邊距、內邊距都可以設置生效

3、寬度默認是父級寬度的100%

4、是一個容器盒子，可以嵌套多層子級行內標簽、塊級標簽，文本類塊級標簽除外

5、常見塊級標簽div、p、h1~h6、ol、ul、li等

div標簽

雙標簽，塊級標簽，本身沒有固定樣式

<!-- 頭部區域 -->
<div></div>
<!-- 內容區域 -->
<div></div>

12.3 行內塊級標簽

特點

1、在頁面內只占據剛好能包裹自己內容的空間

2、高度、寬度、外邊距、內邊距都可以設置生效

3、常見塊級標簽img、input、td

12.4 標簽類型轉換

通過css樣式display屬性轉換，這是css的內容

上網的時候，經常需要輸入一些信息，如用戶注冊資料、用戶意見等。填寫完信息后，單

擊提交按鈕，就可以將有關信息提交給網站。這里要填寫的文本框、下拉列表框等元素組合

在一起就稱為表單（form)。就ASP來說，表單設計非常重要，因為在大部分情況下,客戶端

都是通過表單將信息提交給服務器端。只有這樣，才能實現客戶端和服務器端的互動與交流

，也才能實現“真正”的動態網頁程序設計。

現在介紹如何編輯一個表單，至于向服務器端提交表單信息，將在后面詳細講解。下面先來

看一個典型的表單例子：

<html>

<head>

<title>用戶注冊表單示例</mie>

</head>

<p><font color="red">以下內容請如實填寫，其中帶有*號的欄目是必須填寫的 <fonn

name="frmUserReg" methods="POST" action="mailto:jjshang@263.net" >

<p>請選擇用戶名:

<input type="text" name="txtUserld" size="15">*

<P>請輸入你的密碼：

<input type="password" name="txtPwd" size="8" maxlength="8">*(密碼不能超過8位

）

<P>請再次輸入密碼：

<input type="password" name="txtPwd2" size="8" maxlength="8">*

<p>請輸入你的姓名：

<input typc="text" name="txtUserName" size="15">*

<p>請選擇你的性別：

<input type="Radio" name="rdoSex" value="male" checked >男

<input type="Radio" name="rdoSex" value="femail">女*

<p>請輸入你的生日：

<input type="text" name"txtYear" size=”4"> 年

<input type="text" name="txtMonth" size="2">月

<input type="text" name="txtDay" size="2">日

<P>請選擇你的最髙學歷：

</select>

<p>請選擇你的愛好：

<input type="checkbox" name="chkLove" value="book">讀書

<input type="checkbox" name="chkLove" value="movie">看電影

<input type="checkbox" name="chkLove" value="travel">旅游

<input type="checkbox" name="chkLove" value="other">其他

<P>你有什么意見嗎？

</form>

</body>

</html>

下面來詳細介紹構成表單的各個標記及屬性。

<form>與</form>標記:該標記用于定義一個表單，任何一個表單都是以<form>開始，以</form>結束。在其中包含了一些表單元素，如文本框，按鈕，下拉列表框等。其屬性名稱有name，methed，action。
<input>與</input>標記：該標記用于在表單中定義單行文本框，密碼框，單選框，復選框，按鈕等表單元素。不同的元素有不同的屬性，詳細的屬性名稱有type,name,size,maxlengh,value,checked。
<select>與</select>標記：該標記用于定義一個列表框，其中的一個<option>標記就是列表框中的一項。其中有name,size,multiple等屬性。
<textarea>與</textarea>:該標記用于定義一個多行文本框（也叫文本區域），常用于需要輸入大量文字內容的網頁中，如留言板，BBS等。

在線咨詢

上一篇：html5+canvas-轉盤抽獎
下一篇：HTML5游戲怎么做？

您的項目需求

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

整合營銷服務商

前端入門-html 表單控件使用

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

1 HTML概念

2 HTML結構

?2.1 標簽

2.1.1 雙標簽

2.1.2 單標簽

2.1.3 標簽關系

3 注釋

4 head標簽

4.1 title標簽

4.2 meta標簽

4.2.1 name屬性

4.2.2 http-equiv屬性

4.3 style標簽

4.4 link標簽

4.5 script標簽

4.6 base標簽

5 文本標簽

5.1 標題標簽

5.2 段落標簽

5.3 換行標簽

5.4 水平線標簽

6 文本格式化標簽

6.1 上標標簽

6.2 下標標簽

6.3 字符實體

7 媒體標簽

7.1 圖片標簽

7.2 音頻標簽

7.3 視頻標簽

7.4 超鏈接標簽

8 列表標簽

8.1 無序列表

8.2 有序列表

8.3 自定義列表

9 表格標簽

9.1 表格基本結構

9.2 表格標簽屬性

9.3 表格標題標簽

9.4 表格表頭單元格標簽

9.5 表格語義化結構標簽

9.6 合并單元格

10 表單標簽

10.1 form標簽

10.2 input標簽

10.3 多行文本框

10.4 下拉列表

11 框架標簽

12 標簽類型

12.1 行內標簽

12.2 塊級標簽

12.3 行內塊級標簽

12.4 標簽類型轉換

您的項目需求