|
時間：2021-07-01 10:21:17 本文主要介紹了html中form元素與表單提交方面的知識,需要的朋友可以參考一下，希望能幫助到大家。
form元素 form元素的DOM接口是
input元素 input元素是應(yīng)用非常廣泛的表單元素，根據(jù)type屬性值的不同，有以下幾種常用用法： 文本輸入 <input type="text" name=""> radio 如何 分組? 設(shè)置不同的 name屬性即可 例： <input type="radio" name="favourite" value="玩游戲">玩游戲 <input type="radio" name="sex" value="man">男 placeholder 提供可描述輸入字段預(yù)期值的提示信息（hint）。 type=hidden 定義隱藏的input。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改。 提交按鈕 在form中加入一個提交按鈕，便可使用戶得以提交表單。 下列三種按鈕皆可在點(diǎn)擊時觸發(fā)表單的submit事件： <input type="submit" /> <button type="submit"></button> <input type="image" /> 規(guī)范中button元素的type默認(rèn)值是submit，但是在IE678下默認(rèn)值是button，所以從兼容性考慮有必要為button元素手動加上type="submit"屬性。 submit事件 初心者可能會認(rèn)為表單提交是提交按鈕的click事件觸發(fā)，其實(shí)不然，按鈕元素的click事件與表單的submit事件在不同的瀏覽器中執(zhí)行順序不一，所以為了能準(zhǔn)確控制表單提交事件，我們會選擇在表單的submit事件中執(zhí)行驗(yàn)證等操作。 當(dāng)form元素中沒有上述的三個按鈕中任何一個的時候，用戶將無法提交表單（回車鍵也無效），此時可以利用form元素特有的 表單提交與用戶體驗(yàn) 基于現(xiàn)在流行的ajax+跨域POST（CORS）技術(shù)，我們很可能不使用form元素直接向服務(wù)器提交數(shù)據(jù)。這雖然可行，但在大多數(shù)情況下存在著體驗(yàn)劣化現(xiàn)象。 JavaScript 表單驗(yàn)證 JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。 被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有： 用戶是否已填寫表單中的必填項(xiàng)目？ 下面的函數(shù)用來檢查用戶是否已填寫表單中的必填（或必選）項(xiàng)目。假如必填或必選項(xiàng)為空，那么警告框會彈出，并且函數(shù)的返回值為 false，否則函數(shù)的返回值則為 true（意味著數(shù)據(jù)沒有問題）： 下面是連同 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ù)是否符合電子郵件地址的基本語法。 意思就是說，輸入的數(shù)據(jù)必須包含 @ 符號和點(diǎn)號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點(diǎn)號： 下面是連同 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>快捷鍵提交 在沒有form元素包裹的情況下，即使當(dāng)前頁面的焦點(diǎn)在表單元素上，按回車鍵也不會觸發(fā)表單提交，對于用戶而言，需要從鍵盤控制切換到鼠標(biāo)/手勢控制，破壞了原有的流暢度。解決方法最簡單的就是在外層用一個form元素包裹，并且確定form元素中起碼有一個提交按鈕。此時當(dāng)表單中的輸入域得到焦點(diǎn)時，用戶按回車鍵便會觸發(fā)提交。 瀏覽器記住賬號密碼 在提交表單時，高級瀏覽器包括移動端瀏覽器，會詢問用戶是否需要記住用戶賬號密碼，對于一般用戶而言，這是一個十分有用的特性，特別是在移動端，可以為用戶節(jié)省很多時間。在沒有form元素的情況下，瀏覽器不會彈出該詢問窗口。
我們在開發(fā)一個表單應(yīng)用的時候，不應(yīng)該嘗試去除form元素直接進(jìn)行提交，在form元素中應(yīng)該包含一個提交按鈕，如果是button元素，應(yīng)該手動加上type="submit"屬性。提交事件的處理在form元素的submit事件中，而非提交按鈕的click事件。 |
|
|
