首頁  >  文章  >  web前端  >  HTML中如何使用html表單提交的操作

HTML中如何使用html表單提交的操作

php中世界最好的语言
php中世界最好的语言原創
2018-01-17 09:27:354166瀏覽

這次帶給大家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屬性值的不同,有以下幾種常用用法:

文字輸入9c0277ee990771d30fd543a38aca6c0e
提交輸入f9f7c6f4b3828831e895f30b0536400d
單選鈕輸入1cf170c0967dc2625a580b9a330e407d
複選框輸入9bbbd9a4610f77e0583491349810ad67
數字輸入2c01953a7522c810f1fa66d627cf180c 輸入框只能輸入數字,可設定最大值,最小值。
範圍輸入 7a4313034c807dc840f651e5c24969b6類似number,但它會顯示一個滑動條,而不是輸入框。 顏色輸入d0335cf169d1c69d5fb760bfbec3b54d會彈出一個顏色選擇器。 日期輸入6e290236d7c77fdce98cb15bf0dfeea2 會跳出一個
日期選擇器

email輸入 e8dc7451c84937575e38c52150e3cc83顯示為一個文字輸入框,並會彈出一個自訂鍵盤。
tel輸入85f46f0e8aaaa3b9a68adb2fc5e483a4 跟email輸入類似
url輸入 b62e2bff68c9b56c3471a9e06cd94f80 跟email輸入類似,也會彈出一個自訂鍵盤。
textarea元素可以建立一個多行的文字區。
368b3d164100ae4e96620a1520b7c46040587128eee8df8f03d0b607fe983014
其中cols和row的屬性值分別表示文本區寬度和高度的字符。

select元素和option元素結合使用可建立一個下拉式選單。

701d81aaa14b8afd38d7545721c937f2 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 486a7589d08bca055e770c344dbcfa784afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

radio

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

範例:

4888d65ebf6772689168852ac66401f3玩遊戲

37885b89982cbd1b7a61bb76ff1aa72b寫代碼

c179a68332954c65bd5a26509d7f8801男

a4353ce1cb381171d2d6de3681550745女、

這就是兩組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>
<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怎麼格式化輸出JSON資料

怎麼用HTML做出行動端固定懸浮半透明搜尋方塊

#

以上是HTML中如何使用html表單提交的操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn