HTML標籤 易混易錯小總結
阿新 • • 發佈：2018-12-27
糾結了一天，終於把HTML標籤的正確使用，各自的適用性清楚地瞭解了一下，這裡簡單總結一下以免再犯類似的錯誤。
一切都是由於這樣的一個問題
<html> <head> </head> <body> <form id="form1" method="get" > 使用者名稱：<input type="text" id="name" name="name" /> <p id="username"></p> <br /> 密碼：<input type="password" id="password" name="password" /> <button type="submit" onclick="mUp()">登入</button> </form> <script> window.x=document.getElementById("username"); window.onload=function() { document.getElementById('name').focus(); } // function mUp() { if(document.getElementById('name').value=="") { x.innerHTML = "使用者名稱不能為空"; //alert("不能為空"); } else document.getElementById('form1').action="/login"; } </script> </body> </html>
將以上程式碼執行，當什麼也不輸入時電擊“登入”按鈕，會提示“使用者名稱不能為空”，但是僅出現一下就會閃退。是什麼原因呢？
關鍵是這裡
<button type="submit" onclick="mUp()">登入</button> 下面簡單總結一下，
HTML <input> 標籤的 type 屬性
| 值 | 描述 |
|---|---|
| button | 定義可點選按鈕（多數情況下，用於通過 JavaScript 啟動指令碼 |
| checkbox | 定義複選框。 |
| file | 定義輸入欄位和 "瀏覽"按鈕，供檔案上傳。 |
| hidden | 定義隱藏的輸入欄位。 |
| image | 定義影象形式的提交按鈕。 |
| password | 定義密碼欄位。該欄位中的字元被掩碼。 |
| radio | 定義單選按鈕。 |
| reset | 定義重置按鈕。重置按鈕會清除表單中的所有資料。 |
| submit | 定義提交按鈕。提交按鈕會把表單資料傳送到伺服器。 |
| text | 定義單行的輸入欄位，使用者可在其中輸入文字。預設寬度為 20 個字元。 |
HTML <button> 標籤的 type 屬性
| 值 | 描述 |
|---|---|
| submit | 該按鈕是提交按鈕（除了 Internet Explorer，該值是其他瀏覽器的預設值）。 |
| button | 該按鈕是可點選的按鈕（Internet Explorer 的預設值）。 |
| reset | 該按鈕是重置按鈕（清除表單資料）。 |