這次帶給大家HTML中如何使用html表單提交的操作，使用html表單提交的注意事項有哪些，以下就是實戰案例，一起來看一下。
這裡我們介紹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元素是應用非常廣泛的表單元素
input元素
input元素是應用非常廣泛的表單元素，依type屬性值的不同，有以下幾種常用用法：
文字輸入
提交輸入
單選鈕輸入
複選框輸入< input type="checkbox" name="相同的名字" value="不同的對應值">
數字輸入 輸入框只能輸入數字，可設定最大值，最小值。
範圍輸入 類似number，但它會顯示一個滑動條，而不是輸入框。 顏色輸入會彈出一個顏色選擇器。 日期輸入 會跳出一個
日期選擇器
。
email輸入 顯示為一個文字輸入框，並會彈出一個自訂鍵盤。
tel輸入 跟email輸入類似
url輸入 跟email輸入類似，也會彈出一個自訂鍵盤。
textarea元素可以建立一個多行的文字區。
其中cols和row的屬性值分別表示文本區寬度和高度的字符。
radio
如何分組? 設定不同的name屬性即可
範例：
寫代碼
男
這就是兩組radio
placeholder
此提示會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失。
type=hidden
例如用於安全性方面，給後台傳輸使用者不可見的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表單提交的操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
