HTML input submit和reset按鈕

admin發表於2018-02-13
HTMLMIT

一.submit提交按鈕:

將<input>標籤的type屬性值設定為"submit"即可建立一個提交按鈕。

點選提交按鈕可以觸發表單提交事件。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

點選提交按鈕，可以提交表單，value屬性規定按鈕顯示文字。

二.reset重置按鈕:

將<input>標籤的type屬性值設定為"reset"即可建立一個重置按鈕。

點選此按鈕可以重置它所在form元素內所有表單元素的value屬性值。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

點選重置按鈕，可以重置表單元素的value屬性值。

特別說明:重置不是清空，很多初學者想當然認為點選重置按鈕即可清空value值，重置是將表單元素的value屬性值重置為它最初的預設狀態。

兩種型別按鈕還具有其他屬性，下面分別做做一下介紹:

（1）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（2）.disabled：設定按鈕為不可用。

（3）.value：設定按鈕的顯示文字內容；如果在表單中，資料也會被提交。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="submit" autofocus value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

autofocus屬性可以設定對應的按鈕，在頁面載入完畢後自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="submit" disabled value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

設定對應的按鈕不可用，所以也就無法完成它既有任務，比如提交表單或者重置，value資料也不會被髮送。

相關文章