HTML5+CSS3網(wǎng)頁設計基礎-第九章-表單

1、第1頁第九章 表單本章概述 本章的學習目標主要內(nèi)容第2頁本章概述表單是HTML網(wǎng)頁中的重要元素，是允許用戶輸入信息的區(qū)域。用戶輸入信息后，將信息發(fā)送給服務端程序處理，從而實現(xiàn)網(wǎng)上注冊、登錄、交易等多種功能。本章將對表單控件和屬性及其用法進行詳細講解。第3頁本章的學習目標了解表單功能，能夠快速創(chuàng)建表單。掌握表單相關元素，能夠準確定義不同的表單控件。掌握表單樣式的控制，能夠美化表單界面。第4頁主要內(nèi)容9.1 表單標簽9.2 表單元素9.3 用CSS控制表單樣式9.4 實訓9.5 本章小結(jié) 第5頁9.1 表單標簽在HTML中標簽用來定義表單，即創(chuàng)建一個表單。表單中可以包含多個表單元素，用來實現(xiàn)用戶信

2、息的收集和傳遞。創(chuàng)建表單的基本語法格式如下。各種表單元素控件標簽中常用屬性的含義如下。第6頁9.1 表單標簽name屬性：給定表單名稱，表單命名之后就可以用腳本語言(如 JavaScript或 VBScript)對它進行控制。action屬性：指定處理表單信息的服務器端應用程序。method屬性：指定表單數(shù)據(jù)的提交方式， method的值可以為get或pos，默認值是get。采用get方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制。第7頁9.1 表單標簽autocomplete：指定表單是否有自動完成功能。取值為on時，表單有自

3、動完成功能，即將表單控件輸入的內(nèi)容記錄下來，當再次輸入時，會將輸入的歷史記錄顯示在一個下拉列表中，以實現(xiàn)自動完成輸入。取值為of時表單無自動完成功能。參考示例：9-1-1.html第8頁9.2 表單元素本節(jié)主要內(nèi)容：案例分析input元素及其屬性其他表單元素案例制作第9頁9.2.1 案例分析【案例展示】用戶注冊頁面設計。使用表單標簽和表單元素設計用戶注冊頁面?！局R要點】表單、表單元素、表單元素常用屬性的功能?！緦W習目標】掌握掌握用表單和表單元素以及各種屬性設計表單的技術(shù)。9.2.2 input元素及其屬性元素是表單中最常見的元素，它必須嵌套在表單標簽中使用，用于定義一個用戶的輸入項。網(wǎng)頁中常

4、見的單行文本框、單選按鈕、復選框等都是通過它定義的元素的基本語法格式如下。type屬性：指定 input元素的輸入類型。name屬性：屬性的值是相應程序中的變量名。value屬性：屬性的值是默認輸入值。第10頁9.2.2 input元素及其屬性在HTML5中，標簽擁有多種輸入類型及相關屬性，其常用屬性如表9-1所示。第11頁表9-1 input元素的相關屬性9.2.2 input元素及其屬性第12頁表9-1 input元素的相關屬性9.2.2 input元素及其屬性第13頁表9-1 input元素的相關屬性9.2.2 input元素及其屬性第14頁表9-1 input元素的相關屬性9.2.3

5、其他表單元素除了input元素外，HTML5表單元素還包括textarea，et、 datalist、 keygen、 output等，本節(jié)將對它們進行詳細講解。1. textarea元素Textare元素用于定義高度超過一行的多行文本域，多行文本域主要用于輸入用戶的意見、評論和一些反饋信息，用戶可以在里面書寫文字，字數(shù)沒有限制。多行文本域的格式為：初始文本內(nèi)容第15頁9.2.3 其他表單元素2. select元素select元素用于創(chuàng)建單選或多選列表，當提交表單時，瀏覽器會提交選定的項目。網(wǎng)頁上經(jīng)?？吹降某鞘?、出生年月等下拉列表框就是用select定義的。下拉列表框需要使用 select標簽

6、和option標簽定義，格式如下。 顯示文本1顯示文本2第16頁9.2.3 其他表單元素3. datalist元素datalist是HTML 5 中的新標簽，用于定義input輸入框的輸入選項列表，實現(xiàn)自動匹配表單的可能的輸入值，在input輸入框的值時可以從列表中選擇，也可以自行輸入，輸入選項列表用datalist內(nèi)的option元素創(chuàng)建。在使用時，為id屬性指定一個唯一的標識 ，然后在 input元素內(nèi)指定list屬性的屬性值為標簽中id的屬性值，綁定 datalist即可。第17頁9.2.4 案例制作制作完成演示案例:用戶注冊。參考代碼 9-2.html第18頁第19頁9.3 用CSS控制表單樣式在設計表單時，為了頁面美觀，可以用CSS樣式對表單進行美化。參考代碼 9-3-1.html9.4 實訓練習創(chuàng)建會員注冊頁面，用CSS控制注冊表的樣式。參考代碼 9-4.html第20頁第21頁9.5 本章小結(jié) 本章講述了網(wǎng)頁的表單元素及其屬性、表單控件及其屬性、CSS樣式對表單的美化等。重點講解了表單控件中的input控件和它的常用屬性text、passwprd、radio、che