項(xiàng)目五食品企業(yè)web前端之登錄頁面制作

食品企業(yè)WEB前端設(shè)計(jì)基礎(chǔ)項(xiàng)目五

食品企業(yè)WEB前端之登錄頁面制作

食品企業(yè)WEB前端之登錄頁面制作項(xiàng)目任務(wù)描述本項(xiàng)目任務(wù)為實(shí)現(xiàn)某食品企業(yè)門戶登錄頁面的布局與表單設(shè)計(jì)。通過本項(xiàng)目來深入學(xué)習(xí)HTML中表單及其表單元素的使用。認(rèn)識表單目錄CONTENTS表單元素和屬性新增的表單元素認(rèn)識表單表單的基本概念1．表單簡介表單用于收集用戶的信息和反饋意見，是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。例如，可以實(shí)現(xiàn)Web搜索、注冊、登錄、問卷調(diào)查等功能。表單的基本概念2．表單創(chuàng)建步驟第一步：決定要搜集的數(shù)據(jù)，即決定了表單需要搜集用戶的哪些數(shù)據(jù)。第二步：建立表單，根據(jù)第一步的要求選擇合適的表單元素控件來創(chuàng)建表單。第三步：設(shè)計(jì)表單處理程序：用于接受瀏覽者通過表單所輸入的數(shù)據(jù)并將數(shù)據(jù)進(jìn)行進(jìn)一步處理。表單的基本概念3．表單的組成一個表單有三個基本組成部分：表單標(biāo)簽、表單域、表單按鈕。Form表單表單域表單按鈕表單標(biāo)簽-form表單標(biāo)簽包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。語法：<formaction="url"method="get|post"name="value">…</form><form>…</form>標(biāo)簽主要是規(guī)定了一個區(qū)域，在網(wǎng)頁瀏覽時不顯示。屬性名稱含義action=url在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。method=”get|post”method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。get方法為默認(rèn)值，瀏覽器會與表單處理服務(wù)器建立連接，然后直接在一個傳輸步驟中發(fā)送所有的表單數(shù)據(jù)。使用post方法時，表單數(shù)據(jù)是與URL分開發(fā)送的。采用get方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，所以使用method=“post”可以大量的提交數(shù)據(jù)。namename屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。表單元素和屬性表單域表單域是指文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等各類控件。表單常用控件如下：屬性說明inputtype="text"單行文本輸入框inputtype="password"密碼輸入框（輸入的文字用*表示）inputtype="radio"單選框inputtype="checkbox"復(fù)選框inputtype="hidden"隱藏域inputtype="file"文件域select列表框textarea多行文本輸入框表單域表單域常用屬性如下：屬性說明name控件名稱type控件的類型，如radio、text、password、file等size指定控件的寬度value用于設(shè)定輸入默認(rèn)值maxlength在單行文本的時候允許輸入的最大字符數(shù)src插入圖像的地址輸入?yún)^(qū)域有一個公共的屬性name，此屬性給每一個輸入?yún)^(qū)域一個名字。這個名字與輸入?yún)^(qū)域是一一對應(yīng)的，即一個輸入?yún)^(qū)域?qū)?yīng)一個名字。value值用來獲取該區(qū)域的數(shù)據(jù)。value屬性是另一個公共屬性，它可以用來指定輸入?yún)^(qū)域的默認(rèn)值。表單域1．單行文本輸入框語法：<inputtype="text"name="name"maxlength="value"size="value"value="value"/>舉例：搜索引擎輸入框表單域2．密碼輸入框密碼輸入框主要用于保密信息的輸入，如密碼。因?yàn)橛脩糨斎氲臅r候，顯示的不是輸入的內(nèi)容，而是“*”號。語法：<inputtype="password"name="name"maxlength="value"size="value"/>舉例：郵箱登錄密碼輸入框單行文本輸入框密碼輸入框表單域3．單選按鈕單選按鈕用于單項(xiàng)選擇，例如問卷調(diào)查中的單選，或者選擇性別等。語法：<inputtype="radio"name="field_name"value="value"checked>舉例：問卷調(diào)查網(wǎng)頁注意：同一組中的選項(xiàng)指定相同的name值，這樣“單選”才會生效。此外，可以對單選按鈕應(yīng)用checked屬性，指定默認(rèn)選中項(xiàng)。表單域4．復(fù)選框復(fù)選框允許用戶在一組選項(xiàng)中選擇多個，例如問卷調(diào)查中的多選，或者選擇興趣愛好等。語法：<inputtype="checkbox"name="name"value="value"checked/>舉例：問卷調(diào)查網(wǎng)頁注意：在定義復(fù)選框時，必須為同一組中的選項(xiàng)指定相同的name值，這樣“復(fù)選”才會生效。此外，可以對復(fù)選選項(xiàng)應(yīng)用checked屬性，指定默認(rèn)選中項(xiàng)。表單域5．隱藏域隱藏域?qū)τ谟脩羰遣豢梢姷?，主要用于后臺編程時使用。語法：<inputtype="hidden"name="name"value="value"/>6．文件域文件域是選擇文件，并上傳文件的表單元素。語法：<inputtype="file"name="name"/>表單域7．列表框select元素可創(chuàng)建單選或多選菜單。通過<select>和<option>標(biāo)簽可以設(shè)計(jì)頁面中的下拉列表框和列表框效果。語法：<selectname="name"size="value"multiple><optionvalue="value"selected>選項(xiàng)1</option><optionvalue="value">選項(xiàng)2</option>…</select>表單域8．多行文本輸入框多行文本輸入框（textarea）主要用于輸入較長的文本信息。語法：<textareaname="textfield_name"cols="value"rows="value"value="textfield_value">…</textarea>屬性說明屬性說明name多行輸入框的名稱rows多行輸入框的行數(shù)cols多行輸入框的寬度（列數(shù)）value多行輸入框的默認(rèn)值表單按鈕1．普通按鈕<inputtype="button"name="name"/>表單中按鈕起著至關(guān)重要的作用，按鈕可以觸發(fā)提交表單的動作，主要配合Javascript腳本使用。表單按鈕分為提交按鈕、復(fù)位按鈕和一般按鈕等，用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。2．提交按鈕<inputtype="submit"name="button_name"id="button_id"value="提交">通過提交按鈕可以將表單中的信息提交給表單中的action所指向的文件。表單按鈕3．圖片式提交按鈕<inputtype="image"src="圖片路徑"value="提交"name="button_name">圖片提交按鈕是指可以在提交按鈕位置上放置圖片，這幅圖片具有提交按鈕的功能。4．重置按鈕<inputtype="reset"value="重置">通過重置按鈕將表單內(nèi)容全部清除，恢復(fù)成默認(rèn)的表單內(nèi)容設(shè)定，重新填寫。type="image"相當(dāng)于type="submit"，不同的是type="image"以一個圖片作為表單的按鈕；src屬性表示圖片的路徑；name為按鈕名稱。新增的表單元素新增的input輸入類型1．email域email域是一種專門用于輸入E-email地址的文本輸入框，在包含E-mail元素的表單提交時，能自動驗(yàn)證E-email域的值是否符合郵件地址格式。語法：<inputtype="email"name="email_name"/>2．url域url類型用于輸入url地址的輸入域。當(dāng)表單提交時會自動驗(yàn)證url域的值格式是否正確。語法：<inputtype="url"name="url_name"/>新增的input輸入類型3．number域number域是用于提供輸入數(shù)值的文本框，在提交表單時，會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。語法：<inputtype="number"name="number_name"value="value"min="value"max="value"setp="value"/>number域的輸入框可以對輸入的數(shù)字進(jìn)行限制，規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認(rèn)值等，value指定輸入框的默認(rèn)值；max指定輸入框可以接受的最大的輸入值；min指定輸入框可以接受的最小輸入值；step輸入域合法的間隔，如果不設(shè)置，默認(rèn)值是1。新增的input輸入類型4．range域range域用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域，在網(wǎng)頁中顯示為滑動條。語法：<inputtype="range"name="range_name"value="value"min="value"max="value"setp="value"/>通過min屬性和max屬性可以設(shè)置min最小值和max最大值通過step屬性指定每次滑動的步幅。新增的input輸入類型5．日期數(shù)據(jù)DatePickersDatepickers類型是指時間日期類型，HTML5中提供了多個可供選取日期和時間的輸入類型。在input標(biāo)簽中，用戶分別通過type設(shè)置相應(yīng)的類別即可。語法：<inputtype="類型"name="Date_name"/>Date選取日、月和年Month選取月、年Week選取周和年Time選取時間（小時和分鐘）Datetime選取時間、日、月和年（UTC時間）Datetime-local選取時間、日、月和年（本地時間）新增的input輸入類型6．search域search類型用于搜索域，比如站點(diǎn)搜索或者Google搜索。語法：<inputtype="search"name="search_name"/>7．color域color域?qū)ο笥糜谶x擇顏色，實(shí)現(xiàn)一個RGB顏色值的輸入。語法：<inputtype="color"name="color_name"/>8．tel域tel域用于輸入電話號碼，tel域通常會和pattern屬性配合使用。語法：<inputtype="tel"name="tel_name"/>新增的input輸入類型舉例演示：email驗(yàn)證信息輸入url的驗(yàn)證信息number驗(yàn)證信息range域輸入日期數(shù)據(jù)電話號碼提示信息顏色對話框form新增屬性1．a(chǎn)utocomplete屬性autocomplete屬性用于指定表單是否有自動完成功能，HTML5新增的屬性?！白詣油瓿伞笔侵笇⒈韱慰丶斎氲膬?nèi)容記錄下來，當(dāng)再次輸入時，會將輸入的歷史記錄顯示在一個下拉列表里，以實(shí)現(xiàn)自動完成輸入。autocomplete屬性有2個值，on：表單有自動完成功能，off：表單無自動完成功能，這個屬性默認(rèn)為on。autocomplete屬性適用于<form>，以及下面的<input>類型：text,search,url,tel,email,password,datepickers,range以及color。form新增屬性2．novalidate屬性novalidate屬性,指定在提交表單時取消對表單進(jìn)行有效的檢查，這是HTML5新增的屬性。為表單設(shè)置該屬性時，可以關(guān)閉整個表單的驗(yàn)證，這樣可以使form內(nèi)所有表單控件不被驗(yàn)證。例如：<formaction="#"target="_blank"method="post"novalidate="novalidate">新增的input屬性1．a(chǎn)utofocus屬性autofocus屬性用于指定頁面加載后是否自動獲取焦點(diǎn)，例如，在訪問搜索引擎主頁時，頁面中的搜索框框會自動獲取得光標(biāo)焦點(diǎn)，以便輸入關(guān)鍵詞。2．multiple屬性multiple屬性指定輸入框可以選擇多個值，該屬性適用