1. 程式人生 > >form表單的五大常用屬性:action,method,name,onsubmit,enctype

form表單的五大常用屬性:action,method,name,onsubmit,enctype

程式開發中,必不可少的會使用到form表單,以前只是在前端開發時簡單使用,對它的屬性不甚瞭解,最近在後端學習中,不斷接觸到它的屬性,現記錄一二.

action

action規定了提交表單時傳送表單資料的目的地,也即將資料發到哪裡,例如action="login.php".

method

method規定了傳送方式,常用的為get和post,涉及到使用者隱私時,為了安全起見通常都採用post方式.

name

name表單的名字,如果是在js中想要獲取form的dom物件,直接使用name屬性值即可,例如

<form action="login.php" method="post" name="loginForm" onsubmit="return check()" enctype="multipart/form-data">
    <input type="text" name="user" id="user" />
    <input type="password" name="pwd" />
    <input type="file" />
    <input type="submit" value="提交" />
</form>

在使用js進行驗證時可以直接使用myform.user.value來獲取使用者框的值,其結果與document.getElementById('user')一致

onsubmit

onsubmit事件屬性,只在form表單中使用,在表單提交時觸發,一般可以用它來進行前端驗證.當"提交"按鈕被點選時,執行check()函式,在check()函式中,我們對錶單輸入框進行了空驗證,如果為空,提示輸入並return false,這樣表單就不會提交,同時,使用時要注意onsubmit不能掉了return,否則表單永遠會提交。

enctype

enctype屬性規定在傳送到伺服器之前對錶單資料進行編碼的模式,預設情況下是application/x-www-form-urlencoded,也就是我們不寫enctype屬性時,它的另外一個multipart/form-data值則是不編碼,不對字元編碼。在使用包含檔案上傳控制元件的表單時,必須使用該值。