html中關(guān)于form與表單提交操作的資料集合
我要評(píng)論這里我們介紹一下form元素與表單提交方面的知識(shí)。
form元素
form元素的DOM接口是HTMLFormElement，繼承自HTMLElement，因而它與其他的HTML元素?fù)碛邢嗤哪J(rèn)屬性，不過(guò)它自身還有幾個(gè)獨(dú)有的屬性和方法：
| 屬性值 | 說(shuō)明 |
|---|---|
| accept-charset | 服務(wù)器能夠處理的字符集，多個(gè)字符集用空格分割 |
| action | 接受請(qǐng)求的URL，該值可以被form元素中的input或button元素的formaction屬性覆蓋 |
| elements | 表單中所有控件集合(HTMLCollection) |
| enctype | 請(qǐng)求的編碼類(lèi)型，該值可以被form元素中的input或button元素的formenctype屬性覆蓋 |
| length | 表單中控件的數(shù)量 |
| method | 要發(fā)送的HTTP請(qǐng)求類(lèi)型，通常是“get”或“post”，該值可以被form元素中的input或button元素的formmethod屬性覆蓋 |
| name | 表單的名稱(chēng) |
| reset() | 將所有表單域重置為默認(rèn)值 |
| submit() | 提交表單 |
| target | 用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱(chēng)，該值可以被form元素中的input或button元素的formtarget屬性覆蓋 |
| autocomplete | 是否自動(dòng)補(bǔ)全表單元素 |
input元素
input元素是應(yīng)用非常廣泛的表單元素，根據(jù)type屬性值的不同，有以下幾種常用用法：
文本輸入 <input type="text" name="">
提交輸入 <input type="submit">
單選鈕輸入 <input type="radio" name="必須有相同的名字" value="填的值最好對(duì)應(yīng)">
復(fù)選框輸入 <input type="checkbox" name="相同的名字" value="不同的對(duì)應(yīng)值">
數(shù)字輸入 <input type="number" min="" max=""> 輸入框只能輸入數(shù)字，可設(shè)置最大值，最小值。
范圍輸入 <input type="range" min="" max="">類(lèi)似number，但它會(huì)顯示一個(gè)滑動(dòng)條，而不是輸入框。
顏色輸入<input type="color">會(huì)彈出一個(gè)顏色選擇器。
日期輸入<input type="date"> 會(huì)彈出一個(gè)日期選擇器。
email輸入 <input type="email">顯示為一個(gè)文本輸入框，并會(huì)彈出一個(gè)定制鍵盤(pán)。
tel輸入<input type="tel"> 跟email輸入類(lèi)似
url輸入 <input type="url"> 跟email輸入類(lèi)似，也會(huì)彈出一個(gè)定制鍵盤(pán)。
textarea元素可以創(chuàng)建一個(gè)多行的文本區(qū)。
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols和row的屬性值分別表示文本區(qū)寬度和高度的字符。
select元素和option元素結(jié)合使用可創(chuàng)建一個(gè)下拉菜單。
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> </select>
radio
如何 分組? 設(shè)置不同的 name屬性即可
例：
<input type="radio" name="favourite" value="玩游戲">玩游戲
<input type="radio" name="favourite" value="寫(xiě)代碼">寫(xiě)代碼
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女、
這就是兩組radio
placeholder
提供可描述輸入字段預(yù)期值的提示信息（hint）。
該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。
type=hidden
定義隱藏的input。隱藏字段對(duì)于用戶(hù)是不可見(jiàn)的。隱藏字段通常會(huì)存儲(chǔ)一個(gè)默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改。
比如用于安全方面，給后臺(tái)傳輸用戶(hù)不可見(jiàn)的name 和value值，讓后臺(tái)做校驗(yàn)，防偽造頁(yè)面。
提交按鈕
在form中加入一個(gè)提交按鈕，便可使用戶(hù)得以提交表單。
下列三種按鈕皆可在點(diǎn)擊時(shí)觸發(fā)表單的submit事件：
<input type="submit" /> <button type="submit"></button> <input type="image" />
規(guī)范中button元素的type默認(rèn)值是submit，但是在IE678下默認(rèn)值是button，所以從兼容性考慮有必要為button元素手動(dòng)加上type="submit"屬性。
submit事件
初心者可能會(huì)認(rèn)為表單提交是提交按鈕的click事件觸發(fā)，其實(shí)不然，按鈕元素的click事件與表單的submit事件在不同的瀏覽器中執(zhí)行順序不一，所以為了能準(zhǔn)確控制表單提交事件，我們會(huì)選擇在表單的submit事件中執(zhí)行驗(yàn)證等操作。
form.addEventListener('submit', function (e) {
if (valid()) {
...
}
e.preventDefault()
})
當(dāng)form元素中沒(méi)有上述的三個(gè)按鈕中任何一個(gè)的時(shí)候，用戶(hù)將無(wú)法提交表單（回車(chē)鍵也無(wú)效），此時(shí)可以利用form元素特有的submit()方法執(zhí)行提交表單，需要注意的是調(diào)用submit()方法并不會(huì)觸發(fā)form元素的submit事件，表單的驗(yàn)證等操作應(yīng)該在調(diào)用submit()方法之前。
if (valid()) {
form.submit()
}
表單提交與用戶(hù)體驗(yàn)
基于現(xiàn)在流行的ajax+跨域POST（CORS）技術(shù)，我們很可能不使用form元素直接向服務(wù)器提交數(shù)據(jù)。這雖然可行，但在大多數(shù)情況下存在著體驗(yàn)劣化現(xiàn)象。
JavaScript 表單驗(yàn)證
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有：
用戶(hù)是否已填寫(xiě)表單中的必填項(xiàng)目？
用戶(hù)輸入的郵件地址是否合法？
用戶(hù)是否已輸入合法的日期？
用戶(hù)是否在數(shù)據(jù)域 (numeric field) 中輸入了文本？
必填（或必選）項(xiàng)目
下面的函數(shù)用來(lái)檢查用戶(hù)是否已填寫(xiě)表單中的必填（或必選）項(xiàng)目。假如必填或必選項(xiàng)為空，那么警告框會(huì)彈出，并且函數(shù)的返回值為 false，否則函數(shù)的返回值則為 true（意味著數(shù)據(jù)沒(méi)有問(wèn)題）：
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的代碼：
<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>
E-mail 驗(yàn)證
下面的函數(shù)檢查輸入的數(shù)據(jù)是否符合電子郵件地址的基本語(yǔ)法。
意思就是說(shuō)，輸入的數(shù)據(jù)必須包含 @ 符號(hào)和點(diǎn)號(hào)(.)。同時(shí)，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個(gè)點(diǎn)號(hào)：
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的完整代碼：
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==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>
快捷鍵提交
在沒(méi)有form元素包裹的情況下，即使當(dāng)前頁(yè)面的焦點(diǎn)在表單元素上，按回車(chē)鍵也不會(huì)觸發(fā)表單提交，對(duì)于用戶(hù)而言，需要從鍵盤(pán)控制切換到鼠標(biāo)/手勢(shì)控制，破壞了原有的流暢度。解決方法最簡(jiǎn)單的就是在外層用一個(gè)form元素包裹，并且確定form元素中起碼有一個(gè)提交按鈕。此時(shí)當(dāng)表單中的輸入域得到焦點(diǎn)時(shí)，用戶(hù)按回車(chē)鍵便會(huì)觸發(fā)提交。
瀏覽器記住賬號(hào)密碼
在提交表單時(shí)，高級(jí)瀏覽器包括移動(dòng)端瀏覽器，會(huì)詢(xún)問(wèn)用戶(hù)是否需要記住用戶(hù)賬號(hào)密碼，對(duì)于一般用戶(hù)而言，這是一個(gè)十分有用的特性，特別是在移動(dòng)端，可以為用戶(hù)節(jié)省很多時(shí)間。在沒(méi)有form元素的情況下，瀏覽器不會(huì)彈出該詢(xún)問(wèn)窗口。
總結(jié)
我們?cè)陂_(kāi)發(fā)一個(gè)表單應(yīng)用的時(shí)候，不應(yīng)該嘗試去除form元素直接進(jìn)行提交，在form元素中應(yīng)該包含一個(gè)提交按鈕，如果是button元素，應(yīng)該手動(dòng)加上type="submit"屬性。提交事件的處理在form元素的submit事件中，而非提交按鈕的click事件。
參考：
相關(guān)文章
HTML表單提交的幾種方式_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
隨著HTML5的興起,前端越來(lái)越多樣化,比如表單的提交,現(xiàn)在就有多種方式可以選擇,下面總結(jié)一下常見(jiàn)的表單提交方式。2017-06-20HTML5利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的代碼實(shí)例
這篇文章不會(huì)去討論簡(jiǎn)單的input type，本文想把重點(diǎn)放在HTML5表單驗(yàn)證機(jī)制上。主要介紹是HTML5是如何利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的，當(dāng)然，本文會(huì)涉及到很多其它2016-12-20基于HTML實(shí)現(xiàn)表單提交后不刷新頁(yè)面
使用ajax實(shí)現(xiàn)表單提交無(wú)刷新頁(yè)面在項(xiàng)目中經(jīng)常會(huì)用到。前一段時(shí)間跟著師傅學(xué)到了另外幾種無(wú)刷新提交表單的方法，主要是基于iframe框架實(shí)現(xiàn)的?，F(xiàn)在小編整理特此分享腳本之家2016-04-05html form表單提交action和url跳轉(zhuǎn)到actiond的區(qū)別介紹
form表單的action 與url跳轉(zhuǎn)是不一樣的：form表單可以給后臺(tái)傳遞數(shù)據(jù)，url跳轉(zhuǎn)到action只能通過(guò)url的參數(shù)來(lái)傳遞數(shù)據(jù)，不懂的朋友可以參考下2013-11-04- 表單提交是常見(jiàn)的一種操作，這篇文章主要介紹了html中表單提交的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-06