HTML input reset 重置按鈕

admin發表於2019-10-03
HTML

將input標籤type屬性值設定為"reset"即可生成一個重置按鈕。

此按鈕一般和提交按鈕配合使用，當然不是硬性標準。

首先看一段程式碼例項：

[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>

可以根據如下步驟進行測試：

（1）.首先，在文字框和密碼框填寫一定內容。

（2）.然後，點選重置按鈕，發現填寫的內容被清空。

有可能很多初學者會得出這樣的結論，重置按鈕會清空表單元素值，實質並非如此。

reset翻譯成漢語具有"重置"或者"恢復"意思，也就是點選此按鈕會將表單元素之恢復到預設值。

[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" value="螞蟻部落"/><br/>
  密碼：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

賬號的預設值是"螞蟻部落"，您可以將其修改為其他任意值。

然後點選reset按鈕觀察效果，它並不是將賬號值清空，而是重置為"螞蟻部落"。

重置按鈕具有的主要屬性如下：

（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" value="螞蟻部落"/><br/>
  密碼：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置" autofocus/>
    </form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201910/03/210305n1v00sm383zc22m1.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

為按鈕設定autofocus屬性，頁面載入後，按鈕自動獲取焦點。

disabled屬性可以將按鈕設定為不可用狀態，比較簡單，本文不再演示。

相關文章