制作“社區(qū)疫情流調信息表”。

　　打開編輯器，新建一個 case_form.html 文件，補全基礎代碼，在 body 內部添加一個 H1 標題標簽，在 H1 標題標簽內部輸入 “社區(qū)疫情流調信息表” ，給 h1 標簽定義水平居中的 align 屬性，值設置為 center。

　　接下來再添加一個 p 標簽，將提前準備好的文本粘貼到 p 標簽里，并且在文字前添加兩個 實現(xiàn)首行縮進的效果。保存頁面。

　　在瀏覽器中打開頁面，標題和段落就制作好了。下面開始制作表單。

　　回到編輯器中，在段落標簽后面，添加一個 form 標簽，在 form 里添加 fieldset 和 legend標簽，實現(xiàn)基本信息區(qū)域分組的效果。在 legend 標簽中添加文本：“基本信息”。保存。

　　回到瀏覽器，刷新，“基本信息”分組邊框就做好了。

　　回到編輯器，繼續(xù)添加一個 h4 標簽，標簽內部添加 文本“1.您的姓名”。繼續(xù)添加一個 input 標簽，type 屬性值設置為 text，或者不定義 type 屬性，使用默認單行輸入框的控件類型。回車換行。

　　再添加 h4 標簽，標簽內部添加文本 “2 . 您的手機號” 。再添加一個 input 標簽。由于手機號輸入框有默認的文本顯示且不能修改，所以需要先定義一個 value 屬性，值設置成 1 3 7 四個星 2 4 7 3 ，“137****2473”，再定義一個 readonly 屬性。保存。

　　回到瀏覽器，刷新，效果實現(xiàn)了。

　　回到編輯器，再添加一個 h4 標簽，給它添加文本 “3 . 您的性別”。回車換行。使用 emmet 語句：input 中括號 type 等于 radio，name 等于 gender，乘以 3  ( input[type=radio name=gender]*3)，按下 tab，快速補全三個 input 標簽，在標簽后面分別添加文本 “男，女和保密”。再給第三個input 添加 disabled 屬性。保存。

　　回到瀏覽器，刷新，性別的選擇做好了。

　　返回編輯器，再添加一個 h4 標簽，給它添加文本 “4 . 家庭地址”。回車換行。家庭地址是四個 select 下拉菜單，和一個文本域標簽。先寫一個 select 標簽，標簽內部添加 option 標簽，填寫下拉菜單的選項，然后復制，一共四個。在每一個 option 標簽內部填好文本。

　　在第四個下拉菜單位置處添加 br 標簽，然后添加一個 textarea 多行文本輸入框標簽，定義屬性 cols 等于 65.rows 等于4.在標簽內部添入“在此填寫詳細地址”，用于提示用戶。

　　注意，多行文本輸入框里的默認文本，需要在 textarea 里面添加，不能通過給 textarea 定義 value 屬性實現(xiàn)!

　　回到瀏覽器，刷新，家庭住址制作完成了!

　　返回編輯器，還是先添加一個 h4 標簽，添加文本 “5 . 您現(xiàn)在的身體狀況”。回車換行。編寫使用 emmet 語句：input 中括號 type 等于 checkbox 乘以 12  (input[type=checkbox]*12)，按下 tab 鍵，生成12個復選框。在每一個復選框后面添加對應的文本。保存。

　　回到瀏覽器，刷新，身體狀況信息復選功能實現(xiàn)了。

　　返回編輯器，制作最后三組數(shù)據(jù)采集功能。它們都是單項選擇，為了節(jié)約時間，我快速的編寫剩下的代碼。

　　在這里，我們分別為三組單選框定義 name 屬性值，分別是“color”“close”“vaccines” (vaccines 讀音需要查讀一下[?væksi?nz])，表示健康碼顏色，是否密接，疫苗接種情況。保存。

　　回到瀏覽器中，刷新。三組單選全部制作完成了。

上一篇

表單綜合案例（上）

下一篇

表單綜合案例（下）