職業(yè)教育“十三五”數(shù)字媒體應(yīng)用人才培養(yǎng)系列教材Dreamweaver網(wǎng)頁設(shè)計與應(yīng)用60個專業(yè)案例362個案例素材及源文件92個微課視頻DreamweaverCC2019微課版教師專項服務(wù)項

目

引

入

：表單的出現(xiàn)使網(wǎng)頁從單向的信息傳遞發(fā)展到能夠與用戶交互，而且交互性越來

越強(qiáng)。本項目主要講解表單的使用方法和

應(yīng)用技巧。通過對這些內(nèi)容的學(xué)習(xí)，學(xué)生

可以利用表單輸入信息或進(jìn)行選擇，使用單行文本域、密碼文本域、單選按鈕、復(fù)

選框、滾動列表、文件域、按鈕等表單對象，將表單相應(yīng)的信息提交給服務(wù)器進(jìn)行

處理。使用表單可以實現(xiàn)網(wǎng)上投票、網(wǎng)站

注冊、信息發(fā)布、網(wǎng)上交易等功能。項目9表單掌握創(chuàng)建表單的方法◆

掌握設(shè)置表單屬性的方法◆

掌握在表單中插入文本域的方法◆掌握在表單中插入單選按鈕和復(fù)選框的方法◆

掌握在表單中插入下拉列表、滾動列表、文件域和按鈕的方法◆

掌握HTML5

表單元素的應(yīng)用方法項目目標(biāo)◆

掌握“用戶登錄界面”的關(guān)鍵制作步驟◆

掌握“傳統(tǒng)文化網(wǎng)頁”的關(guān)鍵制作步驟◆掌握“健康測試網(wǎng)頁”的關(guān)鍵制作步驟◆

掌握“鑫飛越航空網(wǎng)頁”的關(guān)鍵制作步驟技能目標(biāo)

激發(fā)對表單的使用方法和應(yīng)用技巧的學(xué)習(xí)興趣

通過相互合作，培養(yǎng)團(tuán)隊合作精神素養(yǎng)目標(biāo)創(chuàng)建表單表單的屬性◆

插入文本域任務(wù)實踐一用戶登錄界面任務(wù)9.1

表單的使用在文檔中插入表單的具體操作步驟如下。(1)在文檔窗口中，將光標(biāo)置于希望插入表單的位置。(2)插入表單，文檔窗口中出現(xiàn)一個用來指示表單區(qū)域的紅色

虛線輪廓。9.1.1

創(chuàng)建表單X301x110

∨Untitled-2*body“表單”效果圖在在文檔窗口中選擇表單，“屬性”面板中出現(xiàn)圖所示的表單屬性。9.1.2

表單的屬性ActionMethodEnctype

默

認(rèn)POSTAcceptCharsetForm□No

Validate□Auto

Complete表單"屬性"面板單行文本域通常提供單字或短語響應(yīng)，如姓名或地址。若要在表單中插入單行文本域，需要先將光標(biāo)置于表單輪廓內(nèi)需要插入單

行文本域的位置，然后插入單行文本域。XUntitled-2*TextField301x110

∨9.1.3

插入文本域使用"插入”面板"HTML"

選項卡中的按鈕插入表格，使用"表單"選項卡中的按鈕插入文本域并設(shè)置相應(yīng)的屬性。任務(wù)實踐一用戶登錄界面效果圖◆

插入單選按鈕◆插入單選按鈕組◆

插入復(fù)選框◆

任務(wù)實踐一傳統(tǒng)文化網(wǎng)頁任務(wù)9.2

插入單選按鈕和復(fù)選框插入單選按鈕有以下幾種方法。一單擊"插入”面板“表單”選項卡中的"單選按鈕"按鈕，文檔窗口

的表單中出現(xiàn)一個單選按鈕。目選擇“插入>表單>單選按鈕”命令，文檔窗口的表單中出現(xiàn)

一個單選按鈕。單選按鈕的"屬性"面板，用戶可以根據(jù)需要設(shè)置當(dāng)前單選按鈕的各項屬性。屬性

RadioButtonNameradioClas無s(□CheckedValueradioTitle

□Disabled

□

Required□Auto

FocusForm

Tab

Index

9.2.1

插入單選按鈕“單選按鈕”效果圖先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后打開“單選按鈕組”對話框。打開“單選按鈕組”對話框有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"單選按鈕組”按鈕。目選擇“插入>表單>單選按鈕組”命令。單選按鈕組名稱：

RadioGroup1單選按鈕：+-

囚

口標(biāo)簽

值單選

單選單選

單選×確定取消幫助布局，使用：◎換行符(<br>標(biāo)簽)O

表

格9.2.2

插入單選按鈕組Untitled-2*O

男Q

女pdy

form

P“單選按鈕組”對話框

“單選按鈕組”效果圖一口X301x110

Y插入復(fù)選框有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"復(fù)選框”按鈕，文檔窗口的表單中出現(xiàn)一個復(fù)選框。目選擇“插入>表單>復(fù)選框”命令，文檔窗口的表單中出現(xiàn)一個復(fù)選框。屬性Namecheckbox

Class無

□CheckedValueTitle

Checkbox□Disabled□Auto

Focus□RequiredFormYTab

Index

9.2.3插入復(fù)選框“復(fù)選框”效果圖任務(wù)實踐一傳統(tǒng)文化網(wǎng)頁使用“表單”選項卡中的單選按鈕為頁面添加單選按鈕。效果圖插入下拉列表和滾動列表創(chuàng)建文件域◆

插入圖像按鈕◆

插入普通按鈕◆

插入提交按鈕

插入重置按鈕任務(wù)實踐一健康測試網(wǎng)頁

任務(wù)9.3

插入下拉列表、滾動列表、文件域和按鈕Untitled-2*

口確定取消幫助(H)

301×1109.3.1

插入下拉列表和滾動列表1.插入下拉列表2.插入滾動列表“下拉菜單”效果圖

“滾動列表”效果圖項目標(biāo)簽

值列表值X插入文件域有以下幾種方法。一將光標(biāo)置于表單中，單擊"插入”面板"表單”選項卡中的"文件”按鈕，文檔窗口的表單中出現(xiàn)一個文件域。目選擇“插入>表單>文件”命令，文檔窗口的表單中出現(xiàn)

一個文件域。文件域的“屬性”面板，用戶可以根據(jù)需要設(shè)置當(dāng)前文件域的各項屬性。屬性FileNamefileField

Class(無

Y□MultipleTitle□Disabled

□Required□Auto

FocusFormTab

Index9.3.2

插入文件域“文件域”效果圖插入圖像按鈕有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"圖像按鈕”按鈕。目選擇“插入>表單>圖像按鈕”命令。圖像按鈕的“屬性”面板，用戶可以根據(jù)需要設(shè)置當(dāng)前圖像按鈕的各項屬性。屬性ImageButton,44KName

imageFieldClass無SrcAlt102/mages/01.jpg白寬(W)高(H)pxpxFormActionFormMethod白Title

②默認(rèn)□Disabled

□Form

No

Validate□Auto

FocusFormFormEnc

TypeFormTarget編輯圖像Tab

Index9.3.3

插入圖像按鈕"選擇圖像源文件"對話框插入普通按鈕有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"按鈕”按鈕，文檔窗口的表單中出現(xiàn)一個按鈕。目選擇“插入>表單>按鈕”命令，文檔窗口的表單中出現(xiàn)一個按

鈕

。屬性ButtonNamebutton

Class(無Value提交

Title□Disabled□Auto

FocusForm

Tab

Index

9.3.4

插入普通按鈕按鈕“屬性”面板插入提交按鈕有以下幾種方法。e

單擊"插入”面板"表單”選項卡中的"提交’按鈕"按鈕，文檔窗口的表單中出現(xiàn)一個提交按鈕。目選擇“插入>表單>`提交′按鈕”命令，文檔窗口的表單中出現(xiàn)一個提交按鈕。屬性9.3.5

插入提交按鈕FormActionForm

EncTypeFormTargetSubmitButton□Disabled□FormNoValidate□Auto

FocusTitleTab

Index“提交”按鈕“屬性”面板插入重置按鈕有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"重置按鈕”按鈕，文檔窗口的表單中出現(xiàn)一個重置按鈕。目選擇“插入>表單>`重置’按鈕”命令，文檔窗口的表單中出現(xiàn)一個重置按鈕。9.3.6

插入"重置"按鈕屬性NameResetButtonClass

無

Value

重

置Title“重置”按鈕“屬性”面板Form

Tab

Index□Disabled□AutoFocus使用"選擇”按鈕插入下拉列表，使用"屬性"面板設(shè)置下拉列表的屬性。任務(wù)實踐一健康測試網(wǎng)頁效果圖健康指數(shù)測試開始測試>>插入電子郵件文本域插入Url

文本域插入月表單插入周表單◆

插入Tel文本域◆插入搜索文本域◆

插入數(shù)字文本域◆插入范圍文本域◆

插入日期表單插入時間表單插入日期時間表單插入日期時間(當(dāng)?shù)?表單◆插入顏色文本域任務(wù)9.4

創(chuàng)建HTML5表單元素插入電子郵件文本域有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"電子郵件”按鈕，可在文檔

窗口中添加電子郵件文本域。目選擇“插入>表單>電子郵件”命令，文檔窗口的表單中出現(xiàn)

一個電子郵件文本域。屬性

EmailNameemail

Class(無SizeMaxLengthValueTitlePlaceHolder□Disabled□Auto

Focus□Required□Read

Only□Auto

Complete□MultipleForm

PatternTab

Index

List

9.4.1

插入電子郵件文本域電子郵件文本域“屬性”面板插

入Url

文本域有以下幾種方法。一單擊"插入”面板“表單”選項卡中的"Url"按鈕，文檔窗口的表單中出現(xiàn)一個Url文本域。目選

擇"插

入

>表

單

>

Url"命令，文檔窗口的表單中出現(xiàn)一個Url

文本域。屬性?

UrlNameurlClass無

Size

MaxLengthValueTitle

PlaceHolder□Disabled

□Required

□Auto

Complete□AutoFocus

□Read

OnlyFormPatternTab

Index

List9.4.2

插入Url

文本域URL

文本域“屬性”面板插入Tel文本域有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"Tel”按鈕，文檔窗口的表單

中出現(xiàn)一個Tel文本域。目

選

擇

"

插

入

>

表

單

>

Tel"命令，文檔窗口的表單中出現(xiàn)一個Tel

文本域。屬性TelName

tel

Class(無Size

MaxLengthValueTitlePlaceHolder□Disabled

□Required

□Auto

Complete□AutoFocus

□Read

OnlyForm

PatternTab

Index

List

9.4.3

插入Tel文本域Tel文本域“屬性”面板插入搜索文本域有以下幾種方法。一單擊"插入”面板“表單”選項卡中的"搜索"按鈕，文檔窗口的表單中出現(xiàn)一個搜索文本域。目選擇“插入>表單>搜索”命令，文檔窗口的表單中出現(xiàn)一個搜索文本域。屬性TelNametelClass(

無

SizeMaxLengthValueTitlePlaceHolder□Disabled

□Required□Auto

Complete□AutoFocus

□Read

OnlyForm

PatternTab

IndexList

9.4.4

插入搜索文本域搜索文本域“屬性”面板插入數(shù)字文本域有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"數(shù)字”按鈕，文檔窗口的表單中出現(xiàn)一個數(shù)字文本域。目選擇“插入>表單>數(shù)字”命令，文檔窗口的表單中出現(xiàn)一個數(shù)字文本域。屬性1,2,3NumberNamenumber

Class無

ValueTitlePlaceHolder□Disabled

□Required

□Auto

Complete□AutoFocus

□Read

OnlyMinMaxStep

Form

Tab

IndexList

9.4.5

插入數(shù)字文本域數(shù)字文本域“屬性”面板插入范圍文本域有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"范圍”按鈕，文檔窗口的表單中出現(xiàn)一個范圍文本域。目選擇“插入>表單>范圍”命令，文檔窗口的表單中出現(xiàn)一個范圍文本域。屬性1….2RangeName

range Class(無

Value

Title

②□Disabled

□Auto

Complete□Auto

FocusMinMaxStep

Form

Tab

IndexList

9.4.6

插入范圍文本域范圍文本域“屬性”面板插入顏色文本域有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"顏色”按鈕，文檔窗口的表單中出現(xiàn)一個顏色文本域。目選擇"插入>表單>顏色"命令，文檔窗口的表單中出現(xiàn)

一

個顏色文本域。屬性Name

colorClass(無

YValue,Title

Color□Disabled

□Auto

Complete□Auto

FocusForm

Tab

IndexList

Y9.4.7

插入顏色文本域顏色"屬性"面板③

仄插入月表單有以下幾種方法。一單擊“插入”面板“表單”選項卡中的"月”按鈕，文檔窗口的表單中出現(xiàn)一個月表單。目選擇“插入>表單>月”命令，文檔窗口的表單中出現(xiàn)一個月表單

。屬性TitleMonthStep

Form

Tab

IndexListYYYY9.4.8

插入月表單□Disabled□Required□Auto

Focus

□ReadOnly月表單"屬性"面板□Auto

CompleteMinMaxValueFEBMMYYYYYYYYMM插入周表單有以下幾種方法。一單擊"插入”面板“表單”選項卡中的"周"按鈕，文檔窗口的表單中出現(xiàn)一個周表單。目選擇“插入>表單>周”命令，文檔窗口的表單中出現(xiàn)一個周表單。屬性m

吧

WeekName

week

Class(無ValueYYYY

wwTitle□Disabled□

Required

□Auto

Complete□Auto

Focus

□Read

OnlyMinMaxYYYY

wM

StepYYYY

wWForm

Tab

IndexList

Y 9.4.9

插入周表單周表單"屬性"面板插入日期表單有以下幾種方法。一單擊"插入”面板“表單”選項卡中的"日期"按鈕，文檔窗口的表單中出現(xiàn)一個日期表單。目選擇“插入>表單>日期”命令，文檔窗口的表單中出現(xiàn)一個日期表單。屬性24DateNamedate

Class(無ValueYYYY

MM

DDTitle□Disabled

□Required□Auto

Complete□Auto

Focus

□Read

OnlyMinMaxYYYYYYYYMMMMDDDDStep

Form

Tab

IndexList

∨9.4.10

插入日期表日期表單"屬性"面板插入時間表單有以下幾種方法。e

單擊“插入”面板“表單”選項卡中的"時間”按鈕，文檔窗口的表單中出現(xiàn)一個時間表單。目選擇“插入>表單>時間”命令，文檔窗口的表單中出現(xiàn)一個時間表單。屬性TimeName

timeClass(無Valuehh

mm

ssTitle□Disabled□Required

□Auto

Complete□Auto

Focus

□Read

OnlyMinMaxhhhhmmmmssssStepFormTab

IndexList9.4.11

插入時間表單時間表單"屬性"面板插入日期時間表單有以下幾種方法。一單擊“插入”面板“表單”選項卡中的“日期時間”按鈕，文檔窗口的表單中出現(xiàn)一個日期時間表單。目選擇“插入>表單>日期時間”命令，文檔窗口的表單中出現(xiàn)一個日期時間表單。屬性

Date\TimeNamedatetime

Class無ValueYYYYMM

DDhhmmssUTC

∨Ttle

②□Disabled

□Required

□Auto

Complete□Auto

Focus

□Read

onlyMinMaxYYYYMM

DDmmssUTCStep

Form

Tab

IndexListYYYMMDDhhmmssUTC9.4.12

插入日期時間表單日期時間