網(wǎng)頁設(shè)計(jì)與制作教程（HTML+CSS+JavaScript）機(jī)械工業(yè)出版社同名教材配套電子教案2.1表單的工作原理2.2表單標(biāo)簽2.3表單元素2.4表單的高級用法第2章表單表單的作用是從客戶端收集信息。當(dāng)訪問者在表單中輸入信息，單擊提交按鈕后，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端腳本或應(yīng)用程序?qū)@些信息進(jìn)行處理。服務(wù)器進(jìn)行響應(yīng)時，會將被請求信息發(fā)送回用戶（或客戶端），或者基于該表單內(nèi)容執(zhí)行一些操作，表單的工作原理如圖2-1所示。2.1表單的工作原理網(wǎng)頁上具有可輸入表項(xiàng)及項(xiàng)目選擇等控制所組成的欄目稱為表單。<form>標(biāo)簽用于創(chuàng)建供用戶輸入的HTML表單。表單的基本語法及格式為：<formname="表單名"action="URL"method="get|post">…</form>2.2表單標(biāo)簽2.3.1<input>元素<input>元素用來定義用戶輸入數(shù)據(jù)的輸入字段，根據(jù)不同的type屬性，輸入字段可以是文本字段、密碼字段、復(fù)選框、單選按鈕、按鈕、隱藏域、電子郵件、日期時間、數(shù)值、范圍、圖像、文件等。<input>元素的基本語法及格式為：<inputtype="表項(xiàng)類型"name="表項(xiàng)名"value="默認(rèn)值"size="x"maxlength="y"/>2.3表單元素【演練2-1】制作商品圖片上傳的表單頁面，使用文件域上傳文件，用戶單擊“瀏覽”按鈕后，將彈出“打開”對話框。選擇文件后，路徑將顯示在地址文本框中。2.3表單元素

2.3.2選擇欄<select>選擇欄可分為兩種：彈出式和字段式。<select>標(biāo)簽的格式為：<selectsize="x"name="控制操作名"multiple><option…>…</option><option…>…</option>…</select><option>標(biāo)簽的格式為：<optionselectedvalue="可選擇的內(nèi)容">…</option>2.3表單元素2.3.3多行文本域<textarea>…</textarea>在意見反饋欄中往往需要瀏覽者發(fā)表意見和建議，且提供的輸入?yún)^(qū)域一般較大，可以輸入較多的文字。使用<textarea>標(biāo)簽可以設(shè)置允許成段文字的輸入，格式為：<textareaname="文本域名"rows="行數(shù)"cols="列數(shù)">

多行文本</textarea>其中的行數(shù)和列數(shù)是指不拖動滾動條就可看到的部分。2.3表單元素在某些情況下，用戶需要對表單元素進(jìn)行限制，設(shè)置表單元素為只讀或禁用，常應(yīng)用于以下場景：只讀場景：網(wǎng)站服務(wù)器不希望用戶修改的數(shù)據(jù)，這些數(shù)據(jù)在表單元素中顯示。例如，注冊或交易協(xié)議、商品價格等。禁用場景：只有滿足某個條件后，才能選用某項(xiàng)功能。例如，只有用戶同意注冊協(xié)議后，才允許單擊“注冊”按鈕。只讀和禁用效果分別通過設(shè)置“readonly”和“disabled”屬性來實(shí)現(xiàn)?！狙菥?-2】制作商城服務(wù)協(xié)議頁面，頁面瀏覽后，商城服務(wù)協(xié)議只能閱讀而不能修改，并且只有用戶同意注冊協(xié)議后，才允許單擊“注冊”按鈕。2.4表單的高級用法制作商城“會員注冊”表單頁面，使用表單技術(shù)制作會員注冊頁面，收集會員的個人資料。首先顯示未注冊前的初始頁面，如圖2-4（a）所示；用戶可以通過美觀便捷的日期選擇器設(shè)置會員的生日，如圖2-4（b）所示；接下來輸入完整的會員信息，其中輸入的電子郵件地址格式不正確，然后單擊“提交”按鈕，如圖2-4（c）所示；表單提交后，檢查出電子郵件地址無效，如圖2-4（d）所示