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

實例教程:HTML中的表單

欄目: IT技術 / 發佈於: / 人氣:7.49K

HTML語言中,表單是很常用的,比如在註冊和登陸功能界面上,一般以form標籤來定義表單。下面,我們來看看HTML中的表單有哪些主要用法吧。

實例教程:HTML中的表單

操作方法

(01)創建一個HTML表單使用form標籤來定義一個HTML表單,在這個定義的區域內編程需要的內容,注意form標籤是塊級元素,因此會換行。比如我們編寫如下代碼就表示一個HTML表單,如下所示:<form> </form>

實例教程:HTML中的表單 第2張

(02)表單的action和method屬性在form標籤中還可以定義action 和method 屬性,其中action表示該表單要提交的路徑,而method表示表單的提交方式,有post和get兩種方式。比如編寫如下代碼:<form action="" method="post"> </form>

實例教程:HTML中的表單 第3張

(03)文本域(1)編寫代碼表單還可以使用input標籤,使用type為text來定義文本域,該文本域表示用户可以在該文本區域內輸入文字等,比如用户的名稱、暱稱等就使用文本域來定義,比如編寫如下代碼:(2)預覽效果在瀏覽器中預覽,可以看到效果如下圖所示:

實例教程:HTML中的表單 第4張
實例教程:HTML中的表單 第5張

(04)密碼域(1)編寫代碼一般在登陸或註冊頁面都需要使用密碼域來定義用户的密碼,比如編寫代碼如下所示: 密 碼: <input type="password">(2)預覽效果然後在瀏覽器中預覽效果,可以看到我們輸入的字符都是密文,如下圖所示:

實例教程:HTML中的表單 第6張
實例教程:HTML中的表單 第7張

(05)提交按鈕(1)編寫代碼然後我們來需要定義一個提交按鈕,比如編寫如下代碼: <input type="submit" value="提交">(2)預覽效果然後在瀏覽器中預覽效果,可以看到一個名稱為【提交】的按鈕,如下圖所示:

實例教程:HTML中的表單 第8張
實例教程:HTML中的表單 第9張

(06)添加新項右擊vs頁面右側中的d:VS文件,在彈出的下拉菜單中選擇【添加新項】,如下圖所示:

實例教程:HTML中的表單 第10張

(07)更改名稱在彈出的窗口中,找到【名稱】,然後在右側中更改名稱為【】,然後點擊【添加】按鈕,如下圖所示:

實例教程:HTML中的表單 第11張

(08)預覽效果然後重新預覽效果,可以看到在表單中輸入字符之後,點擊【提交】按鈕,會更新頁面,將表單提交給test2頁面,但是由於test2頁面沒有對提交來的表單做出動作,因此,test2內容不會發生變化,如下圖所示:

實例教程:HTML中的表單 第12張