資源簡介

(共50張PPT)
03表單標簽的使用任務 1 制作網易郵箱注冊網頁任務 2 制作電子產品調查問卷網頁制作網易郵箱注冊網頁任務 1● 1. 了解表單的組成及作用。● 2. 了解創建表單的基本語法格式?！?3. 掌握表單相關標簽的用法。● 4. 熟練運用表單控件制作網頁。本任務主要利用 form 表單的文本輸入框、密碼框等控件來制作完成網易郵箱注冊網頁，如圖所示。網易郵箱注冊網頁效果步驟一：分析上圖，網易郵箱注冊網頁分為四個板塊，對應為四組表格標簽，其中第三個表格需要嵌套子表格。首先寫第一個表格，表格的寬度為 962 像素，居于瀏覽器中間，表格包含 1 行 2 列，第一列的內容是一張寬 392 像素、高 38 像素的圖片，第二列的內容為文字信息“幫助”。代碼如圖所示。此時網頁效果如圖所示。第一個表格網頁效果第一個表格代碼步驟二：接著寫第二個表格，表格的寬度為 962 像素，居于瀏覽器中間，表格包含 1 行 1 列，唯 一列的內容為一張寬 962 像素、高 53 像素的圖片。第二個表格網頁效果第二個表格代碼此時網頁的效果如圖所示。步驟三：接著寫第三個表格，表格的寬度為 962 像素，居于瀏覽器中間，表格包含 1 行 1 列，唯一列嵌入一個 form 表單，表單中嵌入一個子表格，子表格的寬度也為 962 像素，子表格包含 4 行 1 列，第一行、第三行、第四行的單元格填入相應的文字信息，第二行的單元格保持為空。代碼如圖所示。第三個表格整體框架代碼第三個表格整體框架代碼此時整體框架頁面效果如圖所示。整體框架頁面效果步驟四：找到在步驟三中創建的子表格，分別在第二行、第四行、第六行、第八行的空單元格中編寫對應的標簽代碼。代碼如圖所示。標簽代碼a）第二行代碼 b）第四行代碼 c）第六行代碼 d）第八行代碼標簽代碼a）第二行代碼 b）第四行代碼 c）第六行代碼 d）第八行代碼標簽代碼a）第二行代碼 b）第四行代碼 c）第六行代碼 d）第八行代碼標簽代碼a）第二行代碼 b）第四行代碼 c）第六行代碼 d）第八行代碼此時網頁效果如圖所示。創建賬號代碼步驟五：最后寫第四個表格，表格的寬度為 962 像素，居于瀏覽器中間，單元格內容與單元格邊沿距離為 8，單元格間距為 0。表格包含 1 行 1 列，唯一列居中，代碼如圖所示。第四個表格代碼一、認識表單對于表單，讀者可能比較陌生，其實它們在互聯網上隨處可見。在 html 中，一個完整的表單通常由表單控件（也被稱為表單元素）、提示信息和表單域三個部分構成，通常看到的登錄注冊頁面都是由表單完成的。表單用于搜集不同類型的用戶輸入。為了更好地理解表單的構成，下面來創建一個完整的表單，表單結構代碼如圖所示。表單結構代碼表單結構效果運行圖 中的代碼，此時網頁效果如圖所示。二、創建表單在 html 中，<form></form> 被用于定義表單域，即 <form> 為表單開始，</form> 為表單結束。所有的表單元素都要放置在其中。創建表單的基本語法代碼如圖所示。創建表單的基本語法代碼在上面的語法中，action、method 和 name 為表單標簽 form 的常用屬性，具體見表。form 標簽的屬性及含義三、認識表單控件1. input 控件input 控件是表單元素中用得最多的一種元素，通常網頁中的單行文本輸入框、單選框、復選框、提交按鈕、重置按鈕等都是通過 input 控件定義的，其基本語法格式如下。input 控件的 type 屬性為其最基本的屬性，根據其 type 屬性的取值不同，可輸入不同形式的數據，達到客戶端與服務器之間真正交互、溝通的目的。除了 type 屬性之外，input 控件還可以定義很多其他的屬性，具體見表 。input 控件的屬性、屬性值及描述表中所列出的為 input 控件的常用屬性，下面通過一個案例來演示它們的使用方法和效果，如圖所示。input 控件代碼 1運行圖中的代碼，效果如圖所示。input 控件效果為了使初學者更好地理解不同的 input 控件類型，下面對它們做一個簡單的介紹。（1）單行文本輸入框 <input type="text"/>單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有name、value、maxlength。（2）密碼輸入框 <input type="password"/>密碼輸入框用來輸入密碼，其內容將以“*”的形式顯示。（3）單選框 <input type="radio"/>單選框用于單項選擇，如選擇性別、是否操作等。需要注意的是，在定義單選框時，必須為同一組中的選項指定相同的 name 值，這樣“單選”才會生效。此外，可以對單選框應用 checked 屬性，指定默認選中項。（4）普通按鈕 <input type="button"/>普通按鈕常常配合 JavaScript 腳本語言使用，初學者了解即可。（5）復選框 <input type="checkbox">復選框允許用戶在一定數目的選擇中選取一個或多個選項。復選框能夠進行內容的多項選擇，顯示形式一般為一個方框。（6）提交按鈕 <input type="submit"/>提交按鈕是表單中的核心控件，用戶完成信息的輸入后，一般都需要單擊提交按鈕才能完成表單數據的提交。可以對其應用 value 屬性，改變提交按鈕上的默認文本。（7）重置按鈕 <input type="reset"/>當用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息。可以對其應用value 屬性，改變重置按鈕上的默認文本。（8）圖片按鈕 <input type="image"/>圖片按鈕與普通按鈕在功能上基本相同，只是它用圖像替代了默認的按鈕，外觀上更加美觀。需要注意的是，必須為其定義 src 屬性，以指定圖像的 URL 路徑。（9）隱藏域 <input type="hidden"/>隱藏域對于用戶是不可見的，通常用于后臺的程序，初學者了解即可。（10）文件域 <input type=" le"/>當單擊文件域時，頁面中將出現一個文本框和一個“瀏覽”按鈕，用戶可以通過填寫文件路徑或直接瀏覽選擇文件的方式，將文件提交給后臺服務器。2. textarea 控件當定義 input 控件的 type 屬性值為 text 時，可以創建一個單行文本輸入框。但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，為此 html 語言提供了 textarea 控件。通過 textarea 控件可以輕松地創建多行文本輸入框，其基本語法格式如下。在上面的語法格式中，cols 和 rows 為 textarea 控件必須設置的屬性，其中 cols 用來定義多行文本輸入框中每行的字符數，rows 用來定義多行文本輸入框中顯示的行數，它們的取值均為正整數。下面通過一個案例來學習 textarea 控件的用法，如圖所示。textarea 控件代碼在上圖中，通過 textarea 控件定義了一個多行文本輸入框，并對其應用 cols 和 rows屬性來設置多行文本輸入框每行中的字符數和顯示的行數。在多行文本輸入框下面，通過將input 控件的 type 屬性值設置為“submit”，定義了一個提交按鈕。運行上圖中的代碼，效果如圖所示。textarea 控件效果制作電子產品調查問卷網頁任務2● 1. 熟悉 select 控件的應用?！?2. 熟練使用表單控件制作多項選擇表單網頁。表單控件為表單的核心內容，它允許用戶在表單中輸入內容。不同的表單控件具有不同的功能，如密碼輸入框、文本輸入框、下拉列表、復選框等，只有掌握了這些控件的使用方法，才能正確地創建表單。本任務主要利用表單控件的文本輸入框、下拉列表框、單選框、復選框等控件，將多種控件組合在一起，制作出電子產品調查問卷網頁，如圖所示。電子產品調查問卷網頁步驟一：根據分析，制作電子產品調查問卷網頁分為兩步，首先插入左側的問題信息，然后插入右側的表單控件。在 p 標簽中先放入文字內容，代碼如圖所示。左側問題信息代碼效果如圖所示。左側問題信息效果步驟二：在上圖中，前三個表單輸入框（如姓名、購買日期、電子郵件地址）是用了文本框和下拉列表框表單控件，每年有 12 個月，所以第一個下拉列表框中設置了 12 個 option 選項，每月最多有 31 天，所以第二個下拉列表框中設置了 31 個 option 選項，代碼如圖所示。前三個表單輸入框源碼前三個表單輸入框源碼此時網頁效果如圖所示。前三個表單輸入框網頁效果步驟三：在上圖中，后三個表單輸入框所用的是單選框、復選框、多行文本輸入框表單控件，這里要注意，兩個單選框 radio 的 name 屬性要設置為相同的值，否則單選功能效果會失效。多個復選框 checkbox 的 name 屬性也要設置為相同的值，否則提交到服務器的數據會出現異常，代碼如圖所示。后三個表單輸入框代碼瀏覽網頁時，經常會看到包含多個選項的下拉列表，例如，選擇所在的城市、出生年月、興趣愛好等。圖所示即為一個下拉列表，當單擊下拉箭頭時，會出現一個選擇列表。在 html 中，要想制作出圖 所示的下拉列表，就需要使用 select 下拉列表控件，如圖所示。下列列表下拉列表控件使用 select 控件定義下拉列表的基本語法格式如下。在 html 中，可以為 <select> 和 <option> 應用屬性，以改變下拉列表的外觀顯示效果和選中項，具體見表。select 控件和 option 標簽的常用屬性及描述下面通過一個案例來演示幾種不同的下拉列表效果，如圖所示。select.html運行上圖中的代碼，效果如圖所示。下拉列表效果

展開更多......

收起↑