首頁 > web前端 > html教學 > html中form與表單提交操作的方法總結

html中form與表單提交操作的方法總結

小云云
發布: 2017-12-11 10:10:58
原創
3178 人瀏覽過

本文主要介紹了html中form元素與表單提交方面的知識,需要的朋友可以參考一下,希望能幫助到大家。

form元素

form元素的DOM介面是HTMLFormElement,繼承自HTMLElement#,因它與其他的HTML元素擁有相同的預設屬性,不過它本身還有幾個獨特的屬性與方法:


##method要傳送的HTTP請求類型,通常是“get”或“post”,該值可以被form元素中的input或button元素的formmethod屬性覆寫name表單的名稱reset()將所有表單欄位重設為預設值submit()提交表單target用於傳送請求和接收回應的視窗名稱,可以被form元素中的input或button元素的formtarget屬性覆寫autocomplete是否自動補全表單元素

input元素

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

文字輸入< ;input type="text" name="">
提交輸入
單選鈕輸入
複選框輸入
數字輸入 輸入框只能輸入數字,可設定最大值,最小值。
範圍輸入 類似number,但它會顯示一個滑動條,而不是輸入框。
顏色輸入會彈出一個顏色選擇器。
日期輸入 會跳出日期選擇器。
email輸入 顯示為一個文字輸入框,並會彈出一個自訂鍵盤。
tel輸入 跟email輸入類似
url輸入 跟email輸入類似,也會彈出一個自訂鍵盤。
textarea元素可以建立一個多行的文字區。

其中cols和row的屬性值分別表示文本區寬度和高度的字符。
select元素和option元素結合使用可建立一個下拉式選單。

#radio

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

#例:

玩遊戲
寫程式碼


女、
這就是兩組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(&#39;submit&#39;, 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 表单的代码:

<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 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

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 表单的完整代码:





Email:
登入後複製

快捷键提交

在没有form元素包裹的情况下,即使当前页面的焦点在表单元素上,按回车键也不会触发表单提交,对于用户而言,需要从键盘控制切换到鼠标/手势控制,破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹,并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时,用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时,高级浏览器包括移动端浏览器,会询问用户是否需要记住用户账号密码,对于一般用户而言,这是一个十分有用的特性,特别是在移动端,可以为用户节省很多时间。在没有form元素的情况下,浏览器不会弹出该询问窗口。

我们在开发一个表单应用的时候,不应该尝试去除form元素直接进行提交,在form元素中应该包含一个提交按钮,如果是button元素,应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中,而非提交按钮的click事件。

相关推荐:

html中Form表单提交时页面不跳转的方法详解

序列化form表单教程详解

有关jquery中form表单序列化的一些问题指导

屬性值 說明
accept-charset #伺服器能夠處理的字元集,多個字元集以空格分割
#action 接受請求的URL,該值可以被form元素中的input或button元素的formaction屬性覆寫
elements 表單中所有控制項集合(HTMLCollection)
enctype 要求的編碼類型,可以被form元素中的input或button元素的formenctype屬性覆寫
length 表單中控制項的數量

以上是html中form與表單提交操作的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板