例項教程:HTML中的表單

來源:酷知科普網 7.8K

在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張
熱門標籤