先說一下button 和input的定義：

<button>?標簽定義的是一個按鈕

? ? 1、在 <button> 元素內部，您可以放置任何內容，比如文本或圖像。這是該元素與使用 <input> 元素創建的按鈕之間的不同之處；

? ? 2、 <button>?控件提供了更為強大的功能和更豐富的內容；

? ? 3、<button>?與?</button>?標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。

<input> 標簽規定了用戶可以在其中輸入數據的輸入字段

?? <input> 元素在 <form> 元素中使用，用來聲明允許用戶輸入數據的 input 控件；input具體類型取決于type屬性

接下來具體說明 四種按鈕：? <input type="submit"/>、<input type="button"/>、<button type="submit"></button>、<button type="button"></button>

一、<input type="submit"/>：當用戶單擊此按鈕時，表單會按<form>標記的action屬性設置的方式來發送表單內容。點擊時，頁面會刷新

<form action="#"><input type="text" name="username"/><br/><input type="password" name="password"/><br/><input type="submit" value="登錄"/> </form>

要想在提交數據之前，先對表單數據進行檢驗：

<form action="#" onsubmit="return check()">
用戶名：<input type="text" name="username"/><br/>
密碼：<input type="password" name="password"/><br/>
<input type="submit" value="登錄"/>
</form>
<script LANGUAGE="JavaScript">
function check(){
console.log("提交前先驗證");
var checkElement=document.getElementsByTagName("input");
if(checkElement[0].value==="" || checkElement[1].value==="") {
return false;//當用戶名或者密碼為空時，返回false，此時表單不會提交
}
}
</script>

當check函數里返回false會阻止submit的默認行為，即阻止表單數據提交（阻止頁面刷新）

注意：οnsubmit="return check()"? 中的 return 不能省略

二、<input type="button"/>普通按鈕，必須搭配JS才有用，如onclick事件等

<form action="#" onsubmit="return check()">用戶名：<input type="text" name="username"/><br/>密碼：<input type="password" name="password"/><br/><input type="submit" value="登錄"/><input type="button" value="提醒" onclick="remind()"/> </form> <script LANGUAGE="JavaScript"> function check(){console.log("提交前先驗證");var checkElement=document.getElementsByTagName("input");if(checkElement[0].value==="" || checkElement[1].value==="") {return false;//當用戶名或者密碼為空時返回false，此時表單不會提交 } } function remind(){alert("這是一個簡單按鈕，默認不會提交表單數據,不會刷新頁面"); } </script>

三、<button type="submit"></button>表單數據提交按鈕，與<input type="submit"/>用法相同

<form action="#" onsubmit="return check()">
用戶名：<input type="text" name="username"/><br/>
密碼：<input type="password" name="password"/><br/>
<button type="submit">登錄</button>
</form>
<script LANGUAGE="JavaScript">
function check(){
console.log("提交前先驗證");
var checkElement=document.getElementsByTagName("input");
if(checkElement[0].value==="" || checkElement[1].value==="") {
return false;//當用戶名或者密碼為空時返回false，此時表單不會提交
}
}
</script>

?四、<button type="button"></button>普通按鈕，與<input type="button"/>的用法是一樣的

<form action="#" onsubmit="return check()">用戶名：<input type="text" name="username"/><br/>密碼：<input type="password" name="password"/><br/><button type="submit">登錄</button><button type="button"onclick="remind()">提醒</button> </form> <script LANGUAGE="JavaScript"> function check(){console.log("提交前先驗證");var checkElement=document.getElementsByTagName("input");if(checkElement[0].value==="" || checkElement[1].value==="") {return false;//當用戶名或者密碼為空時返回false，此時表單不會提交 } } function remind(){alert("這是一個簡單按鈕，默認不會提交表單數據,不會刷新頁面"); } </script>

注意一點：

當<button>未處于<form>表單中時，其瀏覽器默認的type就是button；

而當<button>處于<form>表單中時，不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值；

因此，建議時刻為button設置type值。

總結一下：

• <button type="submit"></button> 和 <input type="submit"/>用法相同，用作表單數據提交按鈕，默認即會刷新頁面；

• <button type="button"></button> 和 <input type="button"/>的用法是一樣的，均為普通按鈕，默認情況不會刷新頁面。

?

總結

以上是生活随笔為你收集整理的button 和input 的区别及在表单form中的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。