模塊五網(wǎng)頁表單設(shè)計目錄任務(wù)一任務(wù)二任務(wù)三注冊頁面的設(shè)計讀者留言板的設(shè)計引入知識點任務(wù)1注冊頁面的設(shè)計7.1了解表單7.2輸入元素input任務(wù)1注冊頁面的設(shè)計7.1了解表單一個表單由三部分組成：（1）表單標(biāo)記：包括處理表單數(shù)據(jù)所用的CGI程序（通用網(wǎng)關(guān)接口）的URL和數(shù)據(jù)提交到服務(wù)器的方法。（2）表單域：包括文本框、密碼框、復(fù)選框、單選框、下拉選擇框、文件上傳框、多行文本框和隱藏域等。（3）表單按鈕：包括提交按鈕、重置按鈕和普通按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用來控制其他定義了處理腳本的處理工作。任務(wù)1注冊頁面的設(shè)計7.1了解表單1、表單的作用表單在網(wǎng)頁中的主要作用是采集用戶數(shù)據(jù)，它提供一個頁面，一個入口。表單處理信息的一般過程為：用戶在表單中完成信息的填寫后，單擊表單中的提交按鈕時，用戶所輸入的信息就會提交到服務(wù)器，服務(wù)器中的應(yīng)用程序會對這些信息進行處理和響應(yīng)，完成用戶和服務(wù)器之間的交互。任務(wù)1注冊頁面的設(shè)計7.1了解表單2、表單元素form表單是網(wǎng)頁上一個特定的區(qū)域，這個區(qū)域是由<form>標(biāo)記定義的，它是一對雙標(biāo)記，<form>標(biāo)記代表表單區(qū)域的開始，</form>標(biāo)記代表表單區(qū)域的結(jié)束，在<form>和</form>標(biāo)記之間的所有內(nèi)容都屬于表單內(nèi)容。<form>標(biāo)記的基本語法格式如下：<formname="表單名稱"action="表單提交地址"method="數(shù)據(jù)傳輸方式">…</form>任務(wù)1注冊頁面的設(shè)計7.1了解表單表單常用屬性任務(wù)1注冊頁面的設(shè)計7.2輸入元素input基本語法格式<inputtype="輸入控件類型"name="控件名字">任務(wù)1注冊頁面的設(shè)計7.2輸入元素input根據(jù)type屬性值的不同可以得到不同的控件類型type常用的屬性值任務(wù)1注冊頁面的設(shè)計7.2輸入元素input1、文本框text基本語法格式：<inputtype="text"name="field_name"value="field_value"size="size_value"maxlength="max_value">文本框?qū)傩匀蝿?wù)1注冊頁面的設(shè)計7.2輸入元素input2、密碼框password基本語法格式：<inputtype="password"name="field_name"value="field_value"size="size_value"maxlength="max_value">密碼框?qū)傩匀蝿?wù)1注冊頁面的設(shè)計7.2輸入元素input單選按鈕屬性3、單選按鈕radio基本語法格式：<inputtype="radio"name="field_name"value="value"checked>任務(wù)1注冊頁面的設(shè)計7.2輸入元素input復(fù)選框?qū)傩?、復(fù)選框checkbox基本語法格式：<inputtype="checkbox"name="field_name"value="value"checked>任務(wù)1注冊頁面的設(shè)計7.2輸入元素input普通按鈕屬性5、普通按鈕button基本語法格式：<inputtype="button"name="field_name"value="button_text">任務(wù)1注冊頁面的設(shè)計7.2輸入元素input提交按鈕屬性6、提交按鈕submit基本語法格式：<inputtype="submit"name="field_name"value="submit_text">任務(wù)1注冊頁面的設(shè)計7.2輸入元素input重置按鈕屬性7、重置按鈕reset基本語法格式：<inputtype="reset"name="field_name"value="reset_text">任務(wù)1注冊頁面的設(shè)計7.2輸入元素input圖片按鈕屬性8、圖片按鈕image基本語法格式：<inputtype="image"name="field_name"src="image_url">任務(wù)1注冊頁面的設(shè)計7.2輸入元素input文本域?qū)傩?、文本域file基本語法格式：<inputtype="file"name="field_name">任務(wù)1注冊頁面的設(shè)計7.2輸入元素input隱藏域?qū)傩?0、隱藏域hidden基本語法格式：<inputtype="hidden"name="field_name">任務(wù)1注冊頁面的設(shè)計任務(wù)實現(xiàn)（1）創(chuàng)建一個HTML5頁面，制作注冊頁面；（3）使用表格對注冊頁面的結(jié)構(gòu)進行控制；（2）在頁面中插入一個form元素；（4）在表格相對應(yīng)的位置放入表單輸入元素。任務(wù)1注冊頁面的設(shè)計注冊界面引入知識點任務(wù)2讀者留言板的設(shè)計7.3下拉選擇框元素select7.4多行文本域textarea任務(wù)2讀者留言板的設(shè)計7.3下拉選擇框元素select下拉選擇框也是頁面中常用的表單元素，它由<select>標(biāo)記定義，是一對雙標(biāo)記，<select>標(biāo)記定義了下拉選擇框的開始，</select>標(biāo)記定義了下拉選擇框的結(jié)束。可以通過屬性設(shè)置要顯示的選項數(shù)量，以及是否允許多項選擇等內(nèi)容。任務(wù)2讀者留言板的設(shè)計7.3下拉選擇框元素selectselect元素的常用屬性基本語法格式：<selectname="field_name"size="size_value"multiple>…</select>任務(wù)2讀者留言板的設(shè)計7.3下拉選擇框元素selectselect元素相當(dāng)于一個容器，標(biāo)記當(dāng)前的下拉選擇框是菜單還是列表，而它所包含的菜單或列表中的每一項都是由option元素定義的。option元素定義了下拉選擇框里的選項，它也是一對雙標(biāo)記，選項的內(nèi)容包含在開始標(biāo)記<option>和結(jié)束標(biāo)記</option>之間。option元素要定義在<select>和</select>標(biāo)記里面才能發(fā)揮作用。任務(wù)2讀者留言板的設(shè)計7.3下拉選擇框元素selectoption元素的常用屬性option元素基本語法格式：<selectname="field_name"><optionvalue="string"selected>選項1</option><option>選項2</option><option>選項3</option>…</select>任務(wù)2讀者留言板的設(shè)計7.4多行文本域textarea基本語法格式：<textareaname="field_name"cols="number"rows="number"></textarea>textarea元素也是在頁面中經(jīng)常使用的表單元素，它是一對雙標(biāo)記，<textarea>標(biāo)記為開始標(biāo)記，</textarea>標(biāo)記為結(jié)束標(biāo)記，需要在頁面顯示的初始文本內(nèi)容放置于<textarea>與</textarea>標(biāo)記之間。任務(wù)2讀者留言板的設(shè)計7.4多行文本域textareatextarea元素的常用屬性任務(wù)實