使用表單中的所有控件，制作一個(gè)完整的表單。

　　這個(gè)案例是我們前面課程經(jīng)常提到的——"疫情流調(diào)信息表"，我們先來(lái)分析這個(gè)案例的各個(gè)部分，該使用哪些 HTML 標(biāo)簽。

　　"社區(qū)疫情流調(diào)信息表"的標(biāo)題，可以使用 H1 一級(jí)標(biāo)題標(biāo)簽，在標(biāo)題下方有一段文字的介紹，可以使用文章段落 p 標(biāo)簽，段首空兩格，可以使用 來(lái)實(shí)現(xiàn)。

　　在段落信息下方，開始出現(xiàn)表單中的控件內(nèi)容，因?yàn)楸韱涡枰占?yè)面中所有控件輸入的數(shù)據(jù)，所以最外層需要使用 form 標(biāo)簽。

　　在"基本信息" 區(qū)域，開始需要使用表單的 fieldset 和 legend 分組控件標(biāo)簽。

　　在 fieldset 標(biāo)簽內(nèi)部，所有控件的標(biāo)題信息，都可以使用 h4 標(biāo)題標(biāo)簽。h4 標(biāo)簽既能實(shí)現(xiàn)加粗也能實(shí)現(xiàn)換行，同時(shí)，還能實(shí)現(xiàn)提示文本和控件之間的間距。

　　姓名和手機(jī)號(hào)后面的輸入框，需要使用 input 輸入框控件。

　　性別的單選功能，需要使用 input 單選框控件。

　　家庭地址選擇和填寫，需要使用 select 下拉菜單控件和 textarea 多行文本框控件。

　　身體狀況的選擇，需要使用 input 多選框控件。

　　健康碼顏色、是否密接與疫苗接種情況的選擇，需要使用 input 單選框控件。

　　在制作基本信息表單時(shí)需要注意三點(diǎn)：

　　第一，手機(jī)號(hào)文本框默認(rèn)已經(jīng)填寫了值，需要使用 value 屬性。

　　第二，手機(jī)號(hào)文本框獲得焦點(diǎn)后，控件里的文本不能修改，需要使用 readonly 屬性。

　　第三，性別選擇的保密項(xiàng)，按鈕為灰色，不能點(diǎn)選，需要使用 disabled 屬性。

　　在"保密信息" 區(qū)域，開始同樣需要使用表單的 fieldset 和 legend 分組控件標(biāo)簽。

　　在 fieldset 標(biāo)簽內(nèi)部，所有的控件標(biāo)題同樣使用 h4 標(biāo)簽實(shí)現(xiàn)。

　　身份證信息需要上傳附件，需要使用 input 上傳文件控件。

　　學(xué)歷信息區(qū)域選擇，需要使用 select 下拉菜單控件。

　　是否服兵役區(qū)域選擇，使用 input 單選框控件。

　　個(gè)人意見填寫，使用 textarea 多行文本輸入框控件。

　　配音者(露臉)：為了溫習(xí) label 控件，是否服兵役的選擇，我們來(lái)實(shí)現(xiàn)點(diǎn)擊文本選中選項(xiàng)的功能。

　　最后，提交、重置和自定義圖像按鈕，需要使用標(biāo)的 input 按鈕控件，使用 value 屬性定義按鈕的名字。

　　最后，提交、重置和自定義圖像按鈕，需要使用 input 按鈕控件，使用 value 屬性定義按鈕的名字。

　　案例我們就分析完了 ，接下來(lái)我們來(lái)一起編寫代碼吧!

上一篇

前端-表單分組

下一篇

表單綜合案例（中）