5 注冊頁面前端制作

項(xiàng)目1會員管理系統(tǒng)任務(wù)2注冊頁面前端制作成都職業(yè)技術(shù)學(xué)院軟件學(xué)院主講教師：牟奇春創(chuàng)建會員注冊頁面singup.php在index.php文件上點(diǎn)擊鼠標(biāo)右鍵，然后選擇copy，然后在member目錄上點(diǎn)擊鼠標(biāo)右鍵，選擇paste，在彈出的窗口中輸入新的文件名：singup，點(diǎn)擊確認(rèn)即生成singup.php文件。復(fù)制文件的目的，是因?yàn)槭醉撝袆?chuàng)建的這個(gè)導(dǎo)航鏈接，我們在注冊頁面中也需要。復(fù)制好文件后，我們需要把導(dǎo)航欄中的當(dāng)前欄目修改一下，將“首頁”鏈接上的current樣式刪除，然后在“會員注冊”鏈接上添加current的樣式。創(chuàng)建會員注冊頁面singup.php接下來，在頁面中創(chuàng)建一個(gè)注冊表單，代碼如右所示。在注冊頁面中，我們設(shè)計(jì)了用戶名（文本框）、密碼（文本框）、重復(fù)密碼（文本框）、信箱（文本框）、性別（單選按鈕）、愛好（多選按鈕）共6個(gè)控件。大家在做的時(shí)候，也可以自己再設(shè)置一些其他類型的控件。創(chuàng)建會員注冊頁面singup.php需要注意的是，在制作表單時(shí)，需要添加在form標(biāo)簽中設(shè)置action屬性，表示點(diǎn)擊“提交”按鈕后，將各項(xiàng)數(shù)據(jù)發(fā)送至哪個(gè)網(wǎng)頁文件進(jìn)行處理。我們這里設(shè)置的是postReg.php，表示點(diǎn)擊“提交”按鈕后，會將用戶填寫的各項(xiàng)數(shù)據(jù)提交至此文件進(jìn)行下一步的處理。method屬性指定了提交文件的方法，可以設(shè)置get和post兩種方式。下面簡單說一下get和post的區(qū)別。創(chuàng)建會員注冊頁面singup.phpGET提交的數(shù)據(jù)會放在URL之后，以？分割URL和傳輸數(shù)據(jù)，參數(shù)之間用&相連，如EditPosts.php?name=boKeYuan&id=123456；POST方法是把提交的數(shù)據(jù)放在HTTP包的Body中。GET提交的數(shù)據(jù)大小有限制（注意：HttpGet方法提交的數(shù)據(jù)大小長度并沒有限制，HTTP協(xié)議規(guī)范沒有對URL長度進(jìn)行限制，這個(gè)限制是特定的瀏覽器及服務(wù)器對它的限制）；POST方法提交的數(shù)據(jù)沒有限制。創(chuàng)建會員注冊頁面singup.php對參數(shù)的數(shù)據(jù)類型，GET只接受ASCII字符；而POST沒有限制。GET請求參數(shù)會被完整保留在瀏覽器歷史記錄里；而POST中的參數(shù)不會被保留。GET比POST更不安全，因?yàn)閰?shù)直接暴露在URL上，所以不能用來傳遞敏感信息。創(chuàng)建會員注冊頁面singup.php對于表單中的控件而言，每一個(gè)控件需要設(shè)置一個(gè)name屬性，這個(gè)屬性在用于后端文件讀取其數(shù)據(jù)。其中每一組單選按鈕和每一組多選按鈕，其name屬性應(yīng)該保持一致。對于單選、多選、下拉等不能由用戶手動(dòng)輸入結(jié)果的控件，還需要設(shè)置value屬性，這個(gè)屬性的值就是后端文件最終讀取到的值。特別注意，由于多選按鈕可以選多個(gè)值，因此，其name屬性要在正常的名字后面添加一對中括號，表示其類型是一個(gè)數(shù)組，這樣才能讀取到多個(gè)選項(xiàng)的值。預(yù)覽注冊表單打開瀏覽器預(yù)覽一下效果總結(jié)本次課程，我們完成了會員注冊頁面前端表單的制作。這些內(nèi)容應(yīng)