先說一下button 和input的定義：

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

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

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

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

<input> 標簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段

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

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

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

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

要想在提交數(shù)據(jù)之前，先對表單數(shù)據(jù)進行檢驗：

<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函數(shù)里返回false會阻止submit的默認行為，即阻止表單數(shù)據(jù)提交（阻止頁面刷新）

注意：ο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("這是一個簡單按鈕，默認不會提交表單數(shù)據(jù),不會刷新頁面"); } </script>

三、<button type="submit"></button>表單數(shù)據(jù)提交按鈕，與<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("這是一個簡單按鈕，默認不會提交表單數(shù)據(jù),不會刷新頁面"); } </script>

注意一點：

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

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

因此，建議時刻為button設(shè)置type值。

總結(jié)一下：

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

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。