項(xiàng)目8.2表單常用元素主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)1子項(xiàng)目表單常用元素2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)2學(xué)習(xí)任務(wù)

任務(wù)1表單標(biāo)記與元素

任務(wù)2表單的操作

任務(wù)3文本框任務(wù)4單選按紐任務(wù)5多選按紐2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)3任務(wù)1表單標(biāo)記與元素表單就是一個(gè)容器，在這個(gè)容器中，有窗體和控件。表單是一個(gè)交互式窗口，是用戶與頁面接觸最多的一個(gè)頁面元素。表單可以收集用戶的信息和反饋的意見，是網(wǎng)站管理員與瀏覽者之間溝通的橋梁。在使用中，表單常常用于實(shí)現(xiàn)用戶注冊(cè)、登錄、投票等功能。表單常用元素2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)4一、表單標(biāo)記與元素1、表單的標(biāo)記格式<form[屬性]…>…</form>屬性：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)52、表單的屬性表單有很多屬性，一般常用屬性如下：（1） id：用于返回表單對(duì)象的id?？梢酝ㄟ^id屬性的值對(duì)表單進(jìn)行引用。（2） name：用于返回表單對(duì)象的名稱。可以通name屬性的值對(duì)表單進(jìn)行引用。（3） method：用于說明表單的提交方式?？扇≈礸et（默認(rèn)值）或post。（4） action：用來定義表單處理程序的位置。（5） target：用于說明在何處打開表單。（6） submit()：將表單數(shù)據(jù)提交給服務(wù)器程序處理。（7） reset()：將表單中所有元素值重新設(shè)置為缺省狀態(tài)。下面使用一個(gè)程序來說明表單的一些基本元素和相關(guān)標(biāo)記。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)63、表單的元素通用的表單的元素有以下幾種類型：（1）文本框：類型屬性type="text"。（2）按紐：類型屬性type="button"按紐，type="submit"提交，type="reset"重置，type="image"圖像。（3）單選按紐：類型屬性type="radio"。（4）復(fù)選按紐：類型屬性type="checkbox"。（5）下拉菜單：標(biāo)記<select></select>。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)74、表單元素的公共屬性在表單中有較多的元素，但大多數(shù)元素都有相同的屬性和相同的方法，稱為公共屬性和公共方法。常用的公共屬性：

id：元素的唯一ID值。

name：元素的名稱。

type：元素的類型。

value：元素的值。

checked：一個(gè)單選按紐或者復(fù)選按紐是否被選中，選中狀態(tài)該屬性值為true。如果單選按紐多個(gè)時(shí)，屬性name都相同，只能有一個(gè)被選中。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)85、表單元素的公共方法

blur：將焦點(diǎn)從該表單元素上移開，其作用與focus()方法相反。

focus：將焦點(diǎn)移動(dòng)到該表單元素上，其作用與blur()方法相反。

click：相當(dāng)于鼠標(biāo)在表單元素上單擊。

select：選中表單元素中可編輯的文本，如文本框。如要實(shí)現(xiàn)在瀏覽器中打開頁面后，光標(biāo)自動(dòng)聚焦在表單form1中name為user的元素上，可以使用代碼document.form1.user.focus()。范例8-9：表單標(biāo)記和元素2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)9二、表單的樣式用CSS可以定義表單元素的外觀，下面只介紹表單元素的字樣樣式、邊框樣式和背景顏色，從而達(dá)到一定的美化表單的效果。范例8-10：設(shè)置表單的CSS樣式返回2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)10任務(wù)2表單元素的操作表單元素的操作最常見是對(duì)表單元素屬性的訪問等。1、表單元素的對(duì)象var[元素對(duì)象]=document.getElementById("[元素id]");對(duì)表單元素的操作首先要聲明元素對(duì)象，再通過元素對(duì)象訪問元素，獲得元素屬性值。通常采用DOM中定位元素的方法來聲明元素對(duì)象，有三種方式都可以聲明一個(gè)元素的對(duì)象。（1） 通過元素ID聲明元素對(duì)象格式：例如：name是元素的ID。varuser=document.getElementById(“name”);//user為聲明的元素對(duì)象。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)11（2）用forms集合聲明元素對(duì)象var[表單對(duì)象]=document.forms["[表單id]"];var[元素對(duì)象]=[表單對(duì)象].elements["[元素id]"];例如：form1為表單ID。varform=document.forms["form1"];varuser=form.elements["name"];格式：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)12表格（3）直接聲明元素對(duì)象var[元素對(duì)象]=document.[表單id].[元素id];例如：form1為表單ID，name為元素ID。varuser=;以上三種方法中，使用較為廣泛的還是第1種方法。格式：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)132、表單元素的訪問<inputtype="button"value="數(shù)據(jù)處理"onclick="[函數(shù)名]()"/>例如：<inputtype="button"value="數(shù)據(jù)處理"onclick="click()"/>

當(dāng)按紐被點(diǎn)擊后，將調(diào)用click()函數(shù)執(zhí)行。

表單主要用于采集用戶信息，在采集到用戶信息后，通常都是需要把數(shù)據(jù)信息傳遞給一個(gè)數(shù)據(jù)處理函數(shù)?？梢酝ㄟ^button按紐調(diào)用數(shù)據(jù)處理函數(shù)。

用按紐調(diào)用函數(shù)的方法：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)14btn=document.getElementById("[按紐ID]");Strings=btn.value;按紐的value屬性值賦值給了s變量。在數(shù)據(jù)函數(shù)中，可以通過表單元素對(duì)象，訪問元素屬性值。例如要訪問一個(gè)按紐的標(biāo)題，訪問格式如下：范例8-11：按紐元素的操作。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)15任務(wù)3文本框文本框是表單中使用廣泛的一種對(duì)象，它的用途是讓使用者自己輸入內(nèi)容，再由系統(tǒng)獲取和處理。文本框分為單行文本框、多行文本框和密碼框。1、 單行文本框<inputtype="text"id="textid1"class="txt"maxlength="最大長度"/>單行文本框的type屬性為text，語法格式：maxlength屬性是控制用戶輸入的字符個(gè)數(shù)。例如：輸入用戶名<div><span>用戶名：</span><br/><inputtype="text"id="textid1"class="txt"maxlength="12"/>2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)162、 多行文本框<textareaid="taid1"name="message"rows="行數(shù)"maxlength="最長字符數(shù)"onkeypress="returncontrlString(this);"></textarea>多行文本框使用標(biāo)簽<textarea></textarea>，語法格式：多文本框沒有一行限制多少個(gè)字符，只有總的字符數(shù)的限制。設(shè)置了onkeypress事件，其值為contrlString()函數(shù)的返回值。即鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)會(huì)返回contrlString()函數(shù)的返回值。contrlString()函數(shù)代碼如下：functioncontrlString(ta){returnta.value.length<ta.getAttrbute("maxlength");}該方法返回當(dāng)前textarea中字符的個(gè)數(shù)與自定義的字符個(gè)數(shù)的比較結(jié)果，如果小于自定義的字符個(gè)數(shù)則返回true，否則返回false，使用戶不能再輸入字符。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)17范例8-12：單行和多行文本框應(yīng)用<inputtype="password"id="pwd"class="txt"maxlength="最大長度"/>3、 密碼框密碼框的type屬性為password，語法格式：maxlength屬性是控制用戶輸入的字符個(gè)數(shù)。例如：輸入登錄信息范例8-13：單行和多行文本框應(yīng)用返回2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)18任務(wù)4單選按紐單選按紐主要用于在表單中進(jìn)行單項(xiàng)的選擇，在單選按紐使用時(shí)，通常是多個(gè)同時(shí)使用，但要求屬性name的值相同。1、單選按紐的標(biāo)簽<inputtype="radio"…/>單選按紐的type屬性為radio。標(biāo)簽格式：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)192、常用屬性常用屬性如下：（1）type：組件類型，屬性值為radio。（2）id：組件的ID。（3）name：組件的名稱。（4）value：值。（5）checked：用于設(shè)置或者返回單選按紐的狀態(tài)，為布爾類型，值為true或false。在一組相同name屬性中，只能有一個(gè)的checked值設(shè)置為true。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)20例如：<p><inputtype="radio"id="rid1"name="rn"value="紅色"checked="false"/><labelfor="rid1">紅色</label></p><p><inputtype="radio"id="rid2"name="rn"value="綠色"checked="true"/><labelfor="rid2">綠色</label></p>顯示結(jié)果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)213、查看選擇的結(jié)果varrad=document.form1.radname;for(vari=0;i<rad.length;i++){ if(rad[i].checked){ s=rad[i].value; alert(s); }}定義了rad，是表單form1的name屬性（radname）的對(duì)象。范例8-14：查看選擇的顏色。在一組單選按紐中，最后有一個(gè)是被選中的，我們?cè)鯓幼R(shí)別出被選中的項(xiàng)？怎樣查看選擇的結(jié)果？查看結(jié)果方法：返回2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)22任務(wù)5復(fù)選框復(fù)選框與單選按紐一樣，也是用于在表單中進(jìn)行選擇項(xiàng)目，但在復(fù)選框使用時(shí)，通常是多個(gè)復(fù)選框一組使用，其屬性name的值都相同。復(fù)選框與單選按紐的區(qū)別是，復(fù)選框可以選擇多項(xiàng)，而單選按紐只能選擇一項(xiàng)。1、復(fù)選框的標(biāo)簽<inputtype="checkbox"…/>標(biāo)簽格式：復(fù)選框的type屬性為checkbox。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)232、常用屬性常用屬性如下：（1）type：組件類型，屬性值為checkbox。（2）id：組件的ID。（3）name：組件的名稱。（4）value：值。（5）checked：用于設(shè)置或者返回復(fù)選框的狀態(tài)，為布爾類型，值為true或false。在一組相同name屬性中，可以有多個(gè)checked屬性值為true。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)24例如：<p><inputtype="checkbox"id="cid1"name="cn"value="紅色"/><labelfor="cid1">紅色</label></p><p><inputtype="checkbox"id="cid2"name="cn"value="綠色"checked="true"/><labelfor="cid2">綠色</label></p>顯示結(jié)果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)253、查看選擇的結(jié)果functiongetResult(){vari,j,check;varCheckBox=;//定義表單對(duì)象document.