前端設(shè)計與開發(fā) 課件 模塊6 HTML5的表單及應(yīng)用_第1頁
前端設(shè)計與開發(fā) 課件 模塊6 HTML5的表單及應(yīng)用_第2頁
前端設(shè)計與開發(fā) 課件 模塊6 HTML5的表單及應(yīng)用_第3頁
前端設(shè)計與開發(fā) 課件 模塊6 HTML5的表單及應(yīng)用_第4頁
前端設(shè)計與開發(fā) 課件 模塊6 HTML5的表單及應(yīng)用_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

模塊6HTML5的表單及應(yīng)用制作“讀者會員注冊”網(wǎng)頁任務(wù)6.1任務(wù)描述隨著數(shù)字化時代的來臨，越來越多的讀者傾向于在線獲取圖書資源、參與線上活動，以及享受個性化的閱讀服務(wù)。為了更好地管理和服務(wù)這批用戶群體，建立一個讀者會員系統(tǒng)變得尤為重要。通過搭建基于HTML5技術(shù)的“讀者會員注冊”網(wǎng)頁，可以方便、快捷地收集用戶的個人信息，實(shí)現(xiàn)用戶身份的認(rèn)證與管理，從而為用戶提供定制化的內(nèi)容推送、積分管理、閱讀記錄保存等一系列功能。任務(wù)分析通過對本任務(wù)的學(xué)習(xí)，了解HTML5表單的結(jié)構(gòu)與功能，能夠利用所學(xué)知識制作“讀者會員注冊”網(wǎng)頁。相關(guān)知識6.1.1表單及創(chuàng)建方法表單是一種特殊的網(wǎng)頁容器標(biāo)簽。用戶既可以插入各種普通的網(wǎng)頁標(biāo)簽，也可以插入各種表單交互組件，從而獲取用戶輸入的文本，或者選擇某些特殊項(xiàng)目等信息。一個表單有三個基本組成部分：表單標(biāo)簽、表單域（表單控件）、表單按鈕。（1）表單標(biāo)簽：包含了處理表單數(shù)據(jù)所用的URL及數(shù)據(jù)提交到服務(wù)器的方式。（2）表單域（表單控件）：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。（3）表單按鈕：包括提交按鈕、復(fù)位（重置）按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上或取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。表單標(biāo)簽為<form></form>，表單的基本語法如下。表單標(biāo)簽與基本語法<formaction="url"method="get|post"></form>6.1.2input元素及用法input元素用來定義輸入控件。它可以實(shí)現(xiàn)各種各樣的表單控件效果。根據(jù)不同的type屬性值，輸入字段擁有很多種形式，可以是文本字段、密碼框、復(fù)選框、單選按鈕、普通按鈕、提交按鈕等。1.文本框HTML5中的文本框表單域HTML5中添加"文本框"表單域，用于用戶輸入單行文本，如姓名、年齡、地址文本框表單域的屬性type屬性定義文本框類型，name定義名稱，size定義寬度，maxlength定義最大字符數(shù)，value定義初始值2.密碼框密碼文本域用于安全輸入，顯示為星號或圓點(diǎn)，保護(hù)用戶密碼可見性密碼文本域的作用與特性<inputtype="password"name="..."size="..."type定義屬性的類型，size設(shè)置寬度，maxlength設(shè)置最大字符數(shù)表單密碼元素的語法與屬性"提交"按鈕用于提交表單，語法格式是：<inputtype="submit"name="..."value="...">4.提交按鈕<button>定義可點(diǎn)擊按鈕，需通過onclick屬性與JavaScript腳本結(jié)合以實(shí)現(xiàn)功能3.普通按鈕5.重置按鈕重置按鈕主要用于恢復(fù)表單中的信息。<inputtype="reset"name="..."value="...">6.復(fù)選框復(fù)選框是一種允許用戶同時選擇多項(xiàng)內(nèi)容的選擇性表單對象，它在瀏覽器中以矩形框進(jìn)行表示。在插入復(fù)選框時，用戶可以先插入一個域集，再將復(fù)選框或復(fù)選框組插入域集，以表示為這些復(fù)選框添加標(biāo)題信息。7.單選按鈕單選按鈕也是一種選擇性表單對象，它以組的方式出現(xiàn)，只允許用戶同時選中其中一個單選按鈕。當(dāng)用戶選中某個單選按鈕時，其他單選按鈕將自動轉(zhuǎn)換為未選中狀態(tài)。6.1.3其他表單元素1.textarea元素通過textarea元素可以定義文本區(qū)域，用于需要大量文字的地方，如留言、自我介紹等。文本區(qū)域中可容納無限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體。2.select元素和option元素通過<select>元素可以定義下拉列表，通過<option>元素可以定義下拉列表中的選項(xiàng)。6.1.4HTML5新的表單屬性HTML5引入了許多新的表單屬性，這些屬性為開發(fā)者提供了更多的控制和功能，使得創(chuàng)建和處理表單變得更加簡單和靈活1.新增input元素屬性

1）required屬性required屬性用于指定一個輸入字段是否必須填寫。當(dāng)用戶提交表單時，如果該字段未填寫，則瀏覽器會顯示一個提示消息，要求用戶填寫該字段。這個屬性可以應(yīng)用于各種類型的輸入元素，如文本框、選擇框等。autocomplete屬性規(guī)定表單是否應(yīng)該啟用自動完成功能。當(dāng)用戶在某些文本框中輸入過一些內(nèi)容時，如果再次在這些文本框中輸入內(nèi)容，則這些文本框會出現(xiàn)一個下拉框顯示出以前輸入過的內(nèi)容。它適用于text、search、url、tel、email、password、datepickers、range以及color等表單輸入類型。2）autocomplete屬性3）autofocus屬性autofocus屬性可以在頁面加載時使某個表單控件自動獲得焦點(diǎn)，它適用于text、checkbox、radio和button等表單輸入類型。4）placeholder屬性placeholder屬性用于在輸入字段中顯示一個占位符文本，以指導(dǎo)用戶如何填寫該字段。當(dāng)用戶開始輸入內(nèi)容時，占位符文本會自動消失。這個屬性對于提供清晰的輸入指示非常有用，尤其是在復(fù)雜的表單中。它適用于text、search、url、tel、email以及password等表單輸入類型。5）list屬性list屬性規(guī)定輸入域的datalist，datalist是輸入域的選項(xiàng)列表。它適用于text、search、url、tel、email、datepickers、number、rang以及color等表單輸入類型。6）pattern屬性pattern屬性允許用戶定義一個正則表達(dá)式模式，用于驗(yàn)證輸入字段的值是否符合預(yù)期的格式。例如，可以使用pattern屬性來限制用戶輸入的電話號碼格式或電子郵件地址格式。如果輸入的值不符合指定的模式，則瀏覽器會顯示一個錯誤消息。pattern屬性描述了一個正則表達(dá)式，用于驗(yàn)證input元素的值。它適用于text、search、url、tel、email、和password等表單輸入類型。HTML5中新增了form元素的novalidate屬性，該屬性規(guī)定在提交表單時不應(yīng)該驗(yàn)證form或input域。2．form元素新增的屬性任務(wù)規(guī)劃通過HTML5技術(shù)制作“讀者會員注冊”網(wǎng)頁的主要目標(biāo)是建立一個高效、安全且符合現(xiàn)代互聯(lián)網(wǎng)標(biāo)準(zhǔn)的用戶入口，便于圖書館、電子書店或其他閱讀類服務(wù)平臺吸引、保留和發(fā)展高質(zhì)量的讀者群。任務(wù)實(shí)施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為reading。（2）在VSCode中打開項(xiàng)目文件夾reading，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在文本框中輸入文件的名稱“register.html”，然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊register.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對中設(shè)置網(wǎng)頁的標(biāo)題為“讀者會員注冊”，并引入外部樣式表。（4）在<body></body>標(biāo)簽對中添加<div></div>標(biāo)簽對，并在<div></div>標(biāo)簽對內(nèi)添加表單<form></form>標(biāo)簽對，以及一級標(biāo)題“讀者會員注冊”。（5）在<form></form>標(biāo)簽對中添加一組<div></div>標(biāo)簽對，在<div></div>標(biāo)簽對中添加<label></label>標(biāo)簽對和<input>標(biāo)簽，分別用來放置用戶名及輸入用戶名的文本框，并設(shè)置各標(biāo)簽相關(guān)屬性。（6）仿照步驟（5），在<form></form>標(biāo)簽對中繼續(xù)添加3組<div></div>標(biāo)簽對，分別用來放置郵箱地址及輸入郵箱地址的文本框、密碼及輸入密碼的文本框、確認(rèn)密碼及輸入確認(rèn)密碼的文本框，并設(shè)置好相關(guān)屬性。任務(wù)實(shí)施（7）在<form></form>標(biāo)簽對中再次添加一組<div></div>標(biāo)簽對，在<div></div>標(biāo)簽對中放置復(fù)選框，以及“我已閱讀并同意《用戶協(xié)議》和《隱私政策》”。（8）在<form></form>標(biāo)簽對中添加一組<button></button>標(biāo)簽對定義提交按鈕，按鈕上顯示文字“立即注冊”。（9）在VSCode中打開項(xiàng)目文件夾story，并在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“c

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論