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

單元素屬性2

為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。

昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。

建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。

示例代碼如下：

<form>
  最高學歷：<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>
  <input type = "submit" value = "submit"/>
</form>

因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。

向服務器提交時，name叫做"education"（教育），value對應不同層次。

頁面效果如下：

大家可以點點試試，每次只能有一個被選中。如圖：

綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表單 </title>
  </head> 
  <body>
  <form>
  會員名稱：
  <input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
  會員密碼：
  <input type = "text" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
  確認密碼：
  <input type = "text" name="confirmPassWord"/><br>
  <input type = "submit" value = "提交"/><br>
  </form>
  <hr>
  <form>
  興趣愛好：
  <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>
  <input type = "submit" value = "submit"/>
  </form>
  </body>
  </html>

頁面效果如下：

密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：

如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：

會員密碼：
<input type = "password" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "password" name="confirmPassWord"/><br>

頁面效果如下：

上傳文件：使用type="file"可以上傳文件！

示例代碼如下：寫在"submit"的上面即可。

<input type = "file"/><br><input type = "submit" value = "submit"/>

頁面效果如下：

點擊"瀏覽"看下效果：

神奇！

使用圖片制作按鈕：將type="image"即可，代碼如下：

<input type = "image" src = "img/示例圖片/submit.jpg"/><br>

頁面效果如下：用一個src導入圖片即可。

示例圖片：路徑自行設置即可！

為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：

<input type="reset" /><br>

頁面如圖所示：

大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！

舉個例子，如圖：

下面我們點擊"重置"后效果如下：

form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！

type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。

button值以后在JavaScript部分還會細說，這里也先略過。

除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！

今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。

碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！

喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！

喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

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

.槪念

用來收集用戶輸入的信息，定義采集數據的范圍，并且完成與用戶的基本交互的作用。

表單就是輸入框、單選框、復選框、按鈕、選項菜單等網頁元素，也稱表單元素。

2.語法

form標簽，所有表單元素都要放在form標簽中。

<form action = "#" method = "get">xx</form>   <!-- # 是沒有數據時的占位-->

from標簽屬性：

① action：設置發送數據的位置；

② method：用什么方式發送數據。

屬性值分為get和post：get，發送數據時直接顯示在url欄中，發

送數據量小，且不安全；post，直接通過服務器發送數據，用戶看不到過

程，且數據量較大。

3.表單元素

一般使用 input標簽：

<form action = "#" method>
 			<input type  = "text" name = "age"/>
  </form>

input標簽屬性：

type屬性：設置當前輸入框的不同形態。值分別為：

password 密碼框，text輸入文字、字母、數字等

submit 提交按鈕，reset 重置按鈕

button 普通按鈕，checkbox 表單復選框

radio表單單選框。

name 屬性：給當前的表單元素數據起個名字，不能是中文和特殊符號。（除了按鈕標簽外需要輸入數據的都要加name屬性）

value 屬性：當前表單元素的默認值，在按鈕標簽中會顯示在按鈕上，在選項框里必須有，否則后端看到為on。

例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數據為sex=男，如果不寫value，則顯示sex=on。

placeholder屬性：輸入框的提示信息。

maxlength屬性：設置輸入text和password輸入框的最大字符數。

size屬性：當type = "text"或"password"時，設置元素的寬度。

checked屬性：當type為radio或checkbox時，設置單選框或復選框的默認選中項。

4.擴展表單元素

如圖，select 標簽表示聲明下拉列表；option 標簽用于聲明列表項；selected 改變下拉列表默認選中項。

多文本域（textarea）：

單介紹：

表單在 Web 網頁中用來給訪問者填寫信息，從而能采集客戶端信息，使網頁具有交互的功能。一般是將表單設計在一個Html 文檔中，當用戶填寫完信息后做提交(submit)操作，于是表單的內容就從客戶端的瀏覽器傳送到服務器上，經過服務器上的 ASP 或 PHP 等處理程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網頁就具有了交互性。這里我們只講怎樣使用Html 標志來設計表單。

web前端基礎學習-from表單的使用

北京尚學堂的視頻

· 63 播放

【form表單】

主要內容

Form表單
表單元素
表單元素的屬性
HTML5新增type類型
HTML新增屬性

學習目標

節數	知識點	要求
第一節（form）	表單概念	了解
Form	掌握
Get和post的區別	掌握
第二節（表單元素）	表單元素1	掌握
表單元素2	了解
第三節（表單元素的屬性）	表單元素的屬性	掌握
第四節（HTML5新增）	HTML5新增type類型	了解
第五節（HTML5新增）	HTML5新增屬性	掌握

Form表單

所有的用戶輸入內容的地方都用表單來寫，如登錄注冊、搜索框。

表單是由窗體和控件組成的,一個表單一般應該包含用戶填寫信息的輸入框,提交按鈕等，這些輸入框,按鈕叫做控件,表單很像容器,它能夠容納各種各樣的控件。

<form action＝"url" method=get|post name="myform" ></form>-name：表單提交時的名稱-action：提交到的地址-method：提交方式，有get和post兩種，默認為get

post和get區別：

1、數據提交方式，get把提交的數據url可以看到，post看不到

2、get一般用于提交少量數據，post用來提交大量數據

表單元素

一個完整的表單包含三個基本組成部分：表單標簽、表單域、表單按鈕。

1.表單標簽

是指<form>標簽本身，它是一個包含表單元素的區域，使用<form></form>定義

2.表單域

是<form>標簽中用來收集用戶輸入的每一項，通常用input標簽來定義，input標簽有不同的類型，對應用戶不同的數據。（比如：文本域、下拉列表、單選框、復選框等等）

3.表單按鈕

用來提交<form>表單中的所有信息到服務器

表單域和表單按鈕都屬于表單元素

2.1文本框

文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

<form>
First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

瀏覽器顯示如下：

2.2密碼框

密碼字段通過標簽<input type="password"> 來定義:

<form>
Password: <input type="password" name="pwd"></form>

瀏覽器顯示效果如下:

注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。

2.3單選按鈕

<input type="radio"> 標簽定義了表單單選框選項

<form>
<input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>

瀏覽器顯示效果如下:

2.4復選框

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

瀏覽器顯示效果如下:

2.5文件

定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳：

選擇一個文件: <input type="file" name="img">

2.6隱藏域

定義隱藏字段，隱藏字段對于用戶是不可見的。隱藏字段常常存儲默認值，或者由 JavaScript 改變它們的值：

2.7提交按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user"><input type="submit" value="Submit"></form>

瀏覽器顯示效果如下:

2.8重置按鈕

定義重置按鈕（重置所有表單值為默認值）：

提示：請謹慎使用重置按鈕！對于用戶來說，不慎點擊了重置按鈕是件很惱火的事情。

2.9按鈕

沒有任何功能的按鈕

2.10圖像圖片按鈕

定義圖像作為提交按鈕：

2.11按鈕

<button> 標簽定義一個按鈕。

在 <button> 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 <input> 元素創建的按鈕之間的不同之處。

提示：請始終為 <button> 元素規定 type 屬性。不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值。

2.12下拉列表

<select> 元素用來創建下拉列表。

<option> 標簽定義下拉列表中的一個選項（一個條目）。

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select>

<optgroup> 標簽經常用于把相關的選項組合在一起。

如果你有很多的選項組合, 你可以使用<optgroup> 標簽能夠很簡單的將相關選項組合在一起。

2.13多行文本框

<textarea> 標簽定義一個多行的文本輸入控件。文本區域中可容納無限數量的文本。

可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

<textarea rows="10" cols="30">
我是一個文本框。 </textarea>

2.14labe

<label> 標簽為 input 元素定義標注（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

提示:"for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 id 屬性的值。

<form action="demo_form.php"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><input type="submit" value="提交"> </form>

HTML5新增type類型

3.1email

定義用于 e-mail 地址的字段（當提交表單時會自動對 email 字段的值進行驗證）

E-mail: <input type="email" name="usremail">

3.2url

定義用于輸入 URL 的字段：

添加你的主頁: <input type="url" name="homepage">

3.3search

定義搜索字段（比如站內搜索或谷歌搜索等）：

Search Google: <input type="search" name="googlesearch">

3.4tel

定義用于輸入電話號碼的字段：

電話號碼: <input type="tel" name="usrtel">

3.5color

從拾色器中選取顏色：

選擇你喜歡的顏色: <input type="color" name="favcolor">

3.6number

定義用于輸入數字的字段（您可以設置可接受數字的限制）：

數量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5">

請使用下面的屬性來規定限制：

max - 規定允許的最大值。

min - 規定允許的最小值。

step - 規定合法數字間隔。

value - 規定默認值。

3.7range

定義用于精確值不重要的輸入數字的控件（比如 slider 控件）。您也可以設置可接受數字的限制：

請使用下面的屬性來規定限制：

max - 規定允許的最大值。

min - 規定允許的最小值。

step - 規定合法數字間隔。

value - 規定默認值。

3.8date

定義 date 控件：

生日: <input type="date" name="bday">

3.9month

定義 month 和 year 控件（不帶時區）：

生日 ( 月和年 ): <input type="month" name="bdaymonth">

3.10week

定義 week 和 year 控件（不帶時區）：

選擇周: <input type="week" name="week_year">

HTML5新增屬性

4.1autofocus 屬性

autofocus 屬性規定在頁面加載時，域自動地獲得焦點。

注釋：autofocus 屬性適用于所有 <input> 標簽的類型。

User name: <input type="text" name="user_name" autofocus />

4.2multiple 屬性

multiple 屬性規定輸入域中可選擇多個值。

注釋：multiple 屬性適用于以下類型的 <input> 標簽：email 和 file。

Email: <input type="email" multiple />

4.3placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。

4.4required 屬性

required 屬性規定必須在提交之前填寫輸入域（不能為空）。

Name: <input type="text" name="usr_name" required />

視頻介紹：

前端零基礎入門學習之表單的使用

在線咨詢

上一篇：JavaScript學習筆記：掌握了獲取元素和事件綁定，可以做輪播圖片
下一篇：實戰PyQt5: 013-文本編輯控件QTextEdit

您的項目需求

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

整合營銷服務商

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

單元素屬性2

HTML完整學習目錄

單介紹：

【form表單】

主要內容

學習目標

post和get區別：

表單元素

HTML5新增屬性

您的項目需求