打開編輯器，繼續在 case_form.html 頁面中編寫代碼。

　　在“基本信息” fieldset 分組標簽   結束的位置處，回車換行。

　　再添加一組 fieldset 與 legend 標簽，在 legend 標簽內，填入文本“保密信息”，實現區域的分組效果。

　　在瀏覽器中打開頁面，“保密信息”分組邊框就做好了。

　　回到編輯器，添加 h4 標題標簽，標簽內部添加文本 “1.身份證信息”?；剀嚀Q行，再添加文本：“正面：”，在文本后添加 input 標簽，type 屬性值設置為 file，定義文件選擇控件。再添加一個 br 標簽。

　　接著添加文本“反面：” ，在文本后添加 input 標簽，并將 input 標簽的 type 屬性值設置為 file。保存。

　　回到瀏覽器，刷新，可以在表單中選擇本地文件了。

　　返回編輯器，再添加一個 h4 標題標簽，在標簽內部添加文本 “2.學歷信息(最高) :”。接著添加一個 select 標簽，在標簽里添加 5 個 option，把 “研究生，本科，專科，高中，高中以下” 等信息添入進來。

　　再添加一個 h4 標題標簽，添加文本 “3.是否服兵役 :”。input  中括號  type 等于 radio  name 等于 ismilitary [?m?l?tri] (ismilitary是兩個單詞 is military，讀音注意) 乘以2.   (input[type=radio name=ismilitary]*2)  按tab鍵 補全代碼。

　　為了增強用戶體驗，實現當點擊文本時也能選中單選控件，需要創建兩個 label 標簽。

　　在第一個label 標簽里，添入文本是，定義 for 屬性等于 yes。在第二個label 標簽里，添入文本否，定義 for 屬性等于 no。最后再給兩個 input 控件分別定義屬性 id 等于 yes，id 等于 no。保存。

　　回到瀏覽器，刷新。是否服兵役的選擇效果實現了。

　　繼續添加 h4 標簽，添加文本 “4.個人意見 :”。添加一個 textarea 多行文本輸入框，定義屬性cols 等于 60.rows 等于 5.設置好可見窗口的大小。保存。

　　回到瀏覽器，刷新。個人意見的輸入框定義好了。

　　至此，基本信息和保密信息的表單輸入控件就都做好了!

　　最后，制作表單按鈕控件。

　　回到編輯器，在“保密信息”區域分組標簽的結束位置，回車換行。添加三個 input 標簽，將input 標簽的 type 屬性值，分別設置成 “submit” “reset” “image”。

　　接下來，為第一個提交按鈕定義 value 屬性，值設置為 “上傳信息”。為第二個重置按鈕，定義value 屬性，值設置為 “清空信息”。為第三個圖像提交按鈕，定義 src 屬性，設置好圖片的路徑地址。

　　在 form 標簽中，定義 target 屬性 ，值設置為下劃線 self  (_selef)  ，再定義 action 屬性，值設置成：后端小伙伴提供的服務器地址。保存。

　　回到瀏覽器，刷新。填寫一些表單信息，點擊“上傳信息”按鈕，表單信息成功提交給了后端頁面!

　　一個完整的表單就制作完成了，大家趕快動手嘗試一下吧!

上一篇

表單綜合案例（中）

下一篇

初識SVG