這里我們介紹一下form元素與表單提交方面的知識。

form元素

form元素的DOM接口是HTMLFormElement，繼承自HTMLElement，因而它與其他的HTML元素擁有相同的默認屬性，不過它自身還有幾個獨有的屬性和方法：

屬性值

說明

accept-charset 服務器能夠處理的字符集，多個字符集用空格分割

action 接受請求的URL，該值可以被form元素中的input或button元素的formaction屬性覆蓋

elements 表單中所有控件集合(HTMLCollection)

enctype 請求的編碼類型，該值可以被form元素中的input或button元素的formenctype屬性覆蓋

length 表單中控件的數量

method 要發送的HTTP請求類型，通常是“get”或“post”，該值可以被form元素中的input或button元素的formmethod屬性覆蓋

name 表單的名稱

reset() 將所有表單域重置為默認值

submit() 提交表單

target 用于發送請求和接收響應的窗口名稱，該值可以被form元素中的input或button元素的formtarget屬性覆蓋

autocomplete 是否自動補全表單元素

input元素

input元素是應用非常廣泛的表單元素，根據type屬性值的不同，有以下幾種常用用法：

文本輸入 input type= text name=
提交輸入 input type= submit
單選鈕輸入 input type= radio name= 必須有相同的名字 value= 填的值最好對應
復選框輸入 input type= checkbox name= 相同的名字 value= 不同的對應值
數字輸入 input type= number min= max= 輸入框只能輸入數字，可設置最大值，最小值。
范圍輸入 input type= range min= max= 類似number，但它會顯示一個滑動條，而不是輸入框。
顏色輸入 input type= color 會彈出一個顏色選擇器。
日期輸入 input type= date 會彈出一個日期選擇器。
email輸入 input type= email 顯示為一個文本輸入框，并會彈出一個定制鍵盤。
tel輸入 input type= tel 跟email輸入類似
url輸入 input type= url 跟email輸入類似，也會彈出一個定制鍵盤。
textarea元素可以創建一個多行的文本區。
textarea name= id= cols= 30 rows= 10 /textarea
其中cols和row的屬性值分別表示文本區寬度和高度的字符。
select元素和option元素結合使用可創建一個下拉菜單。
select name= id= option value= /option option value= /option option value= /option /select

radio

如何 分組? 設置不同的 name屬性即可

例：

input type= radio name= favourite value= 玩游戲 玩游戲
input type= radio name= favourite value= 寫代碼 寫代碼

input type= radio name= sex value= man 男
input type= radio name= sex value= woman 女、
這就是兩組radio

placeholder

提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

type=hidden

定義隱藏的input。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。
比如用于安全方面，給后臺傳輸用戶不可見的name 和value值，讓后臺做校驗，防偽造頁面。

提交按鈕

在form中加入一個提交按鈕，便可使用戶得以提交表單。

下列三種按鈕皆可在點擊時觸發表單的submit事件：

 input type= submit /  button type= submit /button  input type= image / 

規范中button元素的type默認值是submit，但是在IE678下默認值是button，所以從兼容性考慮有必要為button元素手動加上type= submit 屬性。

submit事件

初心者可能會認為表單提交是提交按鈕的click事件觸發，其實不然，按鈕元素的click事件與表單的submit事件在不同的瀏覽器中執行順序不一，所以為了能準確控制表單提交事件，我們會選擇在表單的submit事件中執行驗證等操作。

form.addEventListener( submit , function (e) { if (valid()) { e.preventDefault()})

當form元素中沒有上述的三個按鈕中任何一個的時候，用戶將無法提交表單（回車鍵也無效），此時可以利用form元素特有的submit()方法執行提交表單，需要注意的是調用submit()方法并不會觸發form元素的submit事件，表單的驗證等操作應該在調用submit()方法之前。

if (valid()) { form.submit()}

表單提交與用戶體驗

基于現在流行的ajax+跨域POST（CORS）技術，我們很可能不使用form元素直接向服務器提交數據。這雖然可行，但在大多數情況下存在著體驗劣化現象。

JavaScript 表單驗證

JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。

被 JavaScript 驗證的這些典型的表單數據有：

用戶是否已填寫表單中的必填項目？
用戶輸入的郵件地址是否合法？
用戶是否已輸入合法的日期？
用戶是否在數據域 (numeric field) 中輸入了文本？
必填（或必選）項目

下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，并且函數的返回值為 false，否則函數的返回值則為 true（意味著數據沒有問題）：

function validate_required(field,alerttxt)with (field)if (value==null||value== ) {alert(alerttxt);return false}else {return true}}

 html  head  script type= text/javascript function validate_required(field,alerttxt)with (field) if (value==null||value== ) {alert(alerttxt);return false} else {return true}function validate_form(thisform)with (thisform) if (validate_required(email, Email must be filled out! )==false) {email.focus();return false} /script  /head  body  form action= submitpage.htm onsubmit= return validate_form(this) method= post Email: input type= text name= email size= 30  input type= submit value= Submit  /form  /body  /html 

相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

怎樣在HTML網頁中插入視頻

html怎樣格式化輸出JSON數據

怎樣用HTML做出移動端固定懸浮半透明搜索框

以上就是HTML中如何使用html表單提交的操作的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。