任務(wù)一-認(rèn)識表單

信息工程系教師：宇虹儒項目六

DIV+CSS結(jié)構(gòu)的主頁制作相關(guān)知識認(rèn)識表單表單屬性input元素及屬性123其他表單元素4CSS控制表單樣式57.1.17.1.2表單的構(gòu)成創(chuàng)建表單

認(rèn)識表單表單的應(yīng)用表單是HTML網(wǎng)頁中的重要元素，利用表單可以使網(wǎng)頁從單向的信息傳遞發(fā)展到與用戶進行交互對話，并且能夠?qū)崿F(xiàn)網(wǎng)上注冊、網(wǎng)上登錄、網(wǎng)上交易等多種功能。本章將對表單控件和屬性以及如何使用CSS控制表單樣式進行詳細(xì)講解。7.1認(rèn)識表單“表單”是網(wǎng)頁上用于輸入信息的區(qū)域，用來實現(xiàn)網(wǎng)頁與用戶的交互、溝通。例如注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單相關(guān)的標(biāo)記定義的。表單的構(gòu)成7.1.1以電商注冊頁面為例，分析表單的構(gòu)成。提示信息表單域表單控件7.1認(rèn)識表單表單的構(gòu)成7.1.1一個表單中通常需要包含一些說明性的文字，提示用戶進行填寫和操作。相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。提示信息表單控件表單域7.1認(rèn)識表單創(chuàng)建表單7.1.2在HTML5中，<form></form>標(biāo)記被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞，<form></form>中的所有內(nèi)容都會被提交給服務(wù)器。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>【結(jié)論】<form>與</form>之間的表單控件是由用戶自定義的，action、method為表單標(biāo)記<form>的常用屬性。7.1認(rèn)識表單7.2表單屬性在HTML5中，表單擁有多個屬性，通過設(shè)置表單屬性可以實現(xiàn)提交方式、自動完成、表單驗證等不同的表單功能。action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。action屬性method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。method屬性name屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。name屬性autocomplete屬性用于指定

表單是否有自動完成功能autocomplete屬性novalidate屬性指定在提交表單

時取消對表單進行有效的檢查。novalidate屬性7.3.17.3.2input元素的type屬性input元素的其他屬性

input元素及屬性7.3

input元素及屬性屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emaile-mail地址的輸入域urlURL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域Datepickers(date,month,week,time,datetime,datetime-local)日期和時間的輸入類型search搜索域color顏色輸入類型

tel電話號碼輸入類型<input/>元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復(fù)選框等都是通過它定義的。<input/>元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復(fù)選框等都是通過它定義的。name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)autocompleteon/off設(shè)定是否自動完成表單字段內(nèi)容autofocusautofocus指定頁面加載后是否自動獲取焦點form

form元素的id設(shè)定字段隸屬于哪一個或多個表單listdatalist元素的id指定字段的候選數(shù)據(jù)值列表multiplemultiple指定輸入框是否可以選擇多個值min、max和step數(shù)值規(guī)定輸入框所允許的最大值、最小值及間隔pattern字符串驗證輸入的內(nèi)容是否與定義的正則表達式匹配placeholder字符串為input類型的輸入框提供一種提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。單行文本輸入框<inputtype="text"/>單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有name、value、maxlength。<inputtype="text"value="張三"maxlength="6"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。密碼輸入框<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以圓點的形式顯示。<inputtype="password"size="40"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。單選按鈕<inputtype="radio"/>單選按鈕用于單項選擇，如選擇性別、是否操作等。<inputtype="radio"name="sex"checked="checked"/>男7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。復(fù)選框<inputtype="checkbox"/>復(fù)選框常用于多項選擇，如選擇興趣、愛好等，可對其應(yīng)用checked屬性，指定默認(rèn)選中項。<inputtype="checkbox"/>唱歌7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。普通按鈕<inputtype="button"/>普通按鈕常常配合javascript腳本語言使用，讀者了解即可。<inputtype="button"value="普通按鈕"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。提交按鈕<inputtype="submit"/>提交按鈕是表單中的核心控件，用戶完成信息的輸入后，一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交。<inputtype="submit"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。重置按鈕<inputtype="reset"/>當(dāng)用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息。可以對其應(yīng)用value屬性，改變重置按鈕上的默認(rèn)文本。<inputtype="reset"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。圖像形式的提交按鈕<inputtype="image"/>圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。<inputtype="image"src="images/login.gif"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。隱藏域<inputtype="hidden"/>隱藏域?qū)τ谟脩羰遣豢梢姷?，通常用于后臺的程序，讀者了解即可。<inputtype="hidden"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。文件域<inputtype="file"/>當(dāng)定義文件域時，頁面中將出現(xiàn)一個文本框和一個“瀏覽...”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺服務(wù)器。<inputtype="file"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。email類型<inputtype="email"/>email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，用來驗證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯誤信息。請輸入您的郵箱：<inputtype="email"name="formmail"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。url類型<inputtype="url"/>url類型的input元素是一種用于輸入URL地址的文本框。請輸入個人網(wǎng)址：<inputtype="url"name="user_url"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。tel類型<inputtype="tel"/>tel類型用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實現(xiàn)一個通用的格式。因此，tel類型通常會和pattern屬性配合使用。請輸入電話號碼：<inputtype="tel"name="telphone"pattern="^\d{11}$"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。search類型<inputtype="search"/>search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動記錄一些字符。在用戶輸入內(nèi)容后，其右側(cè)會附帶一個刪除圖標(biāo)，單擊這個圖標(biāo)按鈕可以快速清除內(nèi)容。輸入搜索關(guān)鍵詞：<inputtype="search"name="searchinfo"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。color類型<inputtype="color"/>color類型用于提供設(shè)置顏色的文本框，用于實現(xiàn)一個RGB顏色輸入。其基本形式是#RRGGBB，默認(rèn)值為#000000，通過value屬性值可以更改默認(rèn)顏色。請選取一種顏色：<inputtype="color"name="color1"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。number類型<inputtype="number"/>number類型的input元素用于提供輸入數(shù)值的文本框。在提交表單時，會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會出現(xiàn)錯誤提示。請輸入數(shù)值：<inputtype="number"name="number1"value="1"min="1"max="20"step="4"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。range類型<inputtype="range"/>range類型的input元素用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為滑動條。它的常用屬性與number類型一樣。請輸入數(shù)值：<inputtype=“range"name="number1"value="1"min="1"max="20"step="4"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。Datepickers類型<inputtype=date,month,week…"/>Datepickers類型是指時間日期類型，HTML5中提供了多個可供選取日期和時間的輸入類型，用于驗證輸入的日期<inputtype="date"/>7.3

input元素及屬性input元素的type屬性7.3.1在HTML5中，<input>元素?fù)碛卸鄠€type屬性值，用于定義不同的控件類型。Datepickers類型—時間和日期類型時間和日期類型說明date選取日、月、年month選取月、年week選取周和年time選取時間（小時和分鐘）datetime選取時間、日、月、年（UTC時間）datetime-local選取時間、日、月、年（本地時間）7.3

input元素及屬性input元素的其他屬性7.3.2除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，以實現(xiàn)不同的功能。autofocus屬性用于指定頁面加載后是否自動獲取焦點，將標(biāo)記的屬性值指定為true時，表示頁面加載完畢后會自動獲取該焦點。autofocus屬性17.3

input元素及屬性input元素的其他屬性7.3.2除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，以實現(xiàn)不同的功能。HTML5中的form屬性，可以把表單內(nèi)的子元素寫在頁面中的任一位置，只需為這個元素指定form屬性并設(shè)置屬性值為該表單的id即可。form屬性27.3

input元素及屬性input元素的其他屬性7.3.2除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，以實現(xiàn)不同的功能。list屬性用于指定輸入框所綁定的datalist元素，其值是某個datalist元素的id。list屬性37.3

input元素及屬性input元素的其他屬性7.3.2除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，以實現(xiàn)不同的功能。multiple屬性指定輸入框可以選擇多個值，該屬性適用于email和file類型的input元素。multiple屬性47.3

input元素及屬性input元素的其他屬性7.3.2除了type屬性之外，<input/>標(biāo)