網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

網頁表單格式製作

欄目: 職場就業 / 發佈於: / 人氣:6.9K

我們使用webstorm製作HTML網頁文件,可以製作表單,根據設置可以製作文本框,單選框,文件選擇等功能。

操作方法

(01)製作表單的時候我們需要用到form標籤,form標籤下我們可以使用label,input文本輸入少量單行的文本,如圖所示設置我們想要的基本表單,然後點擊預覽網頁顯示錶單。

網頁表單格式製作
網頁表單格式製作 第2張

(02)同樣的方法,我們給input標籤設置一個value內容,這樣我們在label標籤下,名次輸入一欄就有一個默認的學生名次,我們預覽就可以看到默認值了。

網頁表單格式製作 第3張
網頁表單格式製作 第4張

(03)我們添加一個上載文件的label,這時候需要將type類型設置為file,注意我們需要將for屬性和ID設置為一致,這樣才可以正常使用。

網頁表單格式製作 第5張

(04)預覽我們的網頁,這時候我們可以看到一個按鈕,上面顯示選擇文件,點擊選擇文件按鈕,會彈出一個選擇框,這時候可以選擇我們需要上載的文件,找到文件所在的位置點擊確定打開。

網頁表單格式製作 第6張
網頁表單格式製作 第7張

(05)在表單中設置一個單選項按鈕,我們將type屬性設置為radio,然後設置兩個選項,如圖所示,預覽我們的網頁,可以看到當我們選擇了一個選項之後,還可以選擇另外一個。

網頁表單格式製作 第8張
網頁表單格式製作 第9張

(06)我們可以給每一個選項設置一個ID,這樣我們就可以實現選擇一個選項之後就能夠再選第二個選項了,而且將一個選項設置為checked之後,就默認這個選項處於被選中狀態。

網頁表單格式製作 第10張