表單reset重置按鈕的作用並非是清空表單

admin發表於2017-02-23
不少初學者可能會認為表單元素的reset按鈕是清空表單元素，其實並非如此。

看如下程式碼示例:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  height:30px;
}
</style>
</head>
<body>
<form>
  <ul>
    <li>姓名:<input type="text"/></li>
    <li>地址:<input type="text" value="山東省青島市"/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

大家可以在文字框內容輸入內容，然後點選重置按鈕測試效果。

可以看出此按鈕的作用是重置元素的value值，而不是清空value值。

相關文章