在表單中button與input的區別

這次帶給大家在表單中button與input的差別，在表單中使用button與input的注意事項有哪些，以下就是實戰案例，一起來看一下。

先說一下button 和input的定義：

 標籤定義的是一個按鈕

    1 、在

元素內部，您可以放置​​任何內容，例如文字或圖像。這就是這個元素與使用 元素創建的按鈕之間的不同之處；

    2、

 控制提供了更強大的功能和更豐富的內容；

    3、

 與  標籤之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，例如文字或多媒體內容。

標籤規定了使用者可以在其中輸入資料的輸入欄位

   元素在

元素中使用，用來聲明允許使用者輸入資料的input 控制項；input具體類型取決於type屬性

接下來具體說明四個按鈕：  、、、

#一、：當使用者點擊此按鈕時，表單會按標記的action屬性設定的方式來傳送表單內容。點擊時，頁面會刷新

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

要想在提交資料之前，先對表單資料進行檢驗：當check函數裡傳回false會阻止submit的預設行為，即阻止表單資料提交（阻止頁面刷新）注意：onsubmit="

return check()

"  中的 return 不能省略二、

普通按鈕，必須搭配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>
    <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>

注意一點：

當未處於表單中時，其瀏覽器預設的type就是button;

而當

處於表單中時，不同的瀏覽器對 元素的type 屬性使用不同的預設值;

• 因此，建議隨時為button設定type值。

  總結一下：

• #

用法相同，用作表單資料提交按鈕，預設即會刷新頁面；

##

和

的用法是一樣的，都是普通按鈕，預設不會刷新頁面。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

###推薦閱讀：#########jest測試react native元件的步奏是什麼#########

javascript的隱式呼叫詳解

JS新增元素新節點

以上是在表單中button與input的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！