天天看點
傳回

關于form與表單送出操作

一個表單裡面隻要有form元素，如果沒有給action加一個預設值，為空白的時候，當你重新整理頁面時，會彈出一個警告框提示你已經填入表單，重新整理資料将會丢失。

如果一個表單裡面有一個type="submit"的button、或者type="submit"的input，或者type="image"的input，點選則會觸發表單送出動作。即使你使用了return false，按鈕也還是會送出submit動作。

之前都沒有注意到這些東西，下面這篇文章能夠幫助我們更好的了解表單相關的一切。

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元素

< 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值，讓背景做校驗，防僞造頁面。

送出按鈕submit

在form中加入一個送出按鈕，便可使使用者得以送出表單。

<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元素中沒有上述的三個按鈕中任何一個的時候，使用者将無法送出表單（Enter鍵也無效），此時可以利用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 表單的代碼：

<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" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 驗證

下面的函數檢查輸入的資料是否符合電子郵件位址的基本文法。

意思就是說，輸入的資料必須包含 @ 符号和點号(.)。同時，@ 不可以是郵件位址的首字元，并且 @ 之後需有至少一個點号：

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"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

快捷鍵送出

在沒有form元素包裹的情況下，即使目前頁面的焦點在表單元素上，按Enter鍵也不會觸發表單送出，對于使用者而言，需要從鍵盤控制切換到滑鼠/手勢控制，破壞了原有的流暢度。解決方法最簡單的就是在外層用一個form元素包裹，并且确定form元素中起碼有一個送出按鈕。此時當表單中的輸入域得到焦點時，使用者按Enter鍵便會觸發送出。

浏覽器記住賬号密碼

在送出表單時，進階浏覽器包括移動端浏覽器，會詢問使用者是否需要記住使用者賬号密碼，對于一般使用者而言，這是一個十分有用的特性，特别是在移動端，可以為使用者節省很多時間。在沒有form元素的情況下，浏覽器不會彈出該詢問視窗。

關于form與表單送出操作

#總結

總結

我們在開發一個表單應用的時候，不應該嘗試去除form元素直接進行送出，在form元素中應該包含一個送出按鈕，如果是button元素，應該手動加上type="submit"屬性。送出事件的處理在form元素的submit事件中，而非送出按鈕的click事件。

供參考！
form表單 form
上一篇: 送出Form表單，POST和GET方式的傳值問題。
下一篇: 如何檢視自己的Windows可用時間

繼續閱讀