這次帶給大家在表單中button與input的差別,在表單中使用button與input的注意事項有哪些,以下就是實戰案例,一起來看一下。 先說一下button 和input的定義: 標籤定義的是一個按鈕 1 、在 元素內部,您可以放置任何內容,例如文字或圖像。這就是這個元素與使用 元素創建的按鈕之間的不同之處; 2、 控制提供了更強大的功能和更豐富的內容; 3、 與 標籤之間的所有內容都是按鈕的內容,其中包括任何可接受的正文內容,例如文字或多媒體內容。 標籤規定了使用者可以在其中輸入資料的輸入欄位 元素在 元素中使用,用來聲明允許使用者輸入資料的input 控制項;input具體類型取決於type屬性 接下來具體說明四個按鈕: 、、、 #一、:當使用者點擊此按鈕時,表單會按標記的action屬性設定的方式來傳送表單內容。點擊時,頁面會刷新 要想在提交資料之前,先對表單資料進行檢驗:當check函數裡傳回false會阻止submit的預設行為,即阻止表單資料提交(阻止頁面刷新)注意:onsubmit="return check()" 中的 return 不能省略二、普通按鈕,必須搭配JS才有用,如 onclick 事件等 用户名: 密码: function check(){ console.log("提交前先验证"); var checkElement=document.getElementsByTagName("input"); if(checkElement[0].value==="" || checkElement[1].value==="") { return false;//当用户名或者密码为空时返回false,此时表单不会提交 } }function remind(){ alert("这是一个简单按钮,默认不会提交表单数据,不会刷新页面"); }三、 表单数据提交按钮,与 用法相同 四、普通按鈕,與的用法是一樣的 用户名: 密码: 登录 提醒function check(){ console.log("提交前先验证"); var checkElement=document.getElementsByTagName("input"); if(checkElement[0].value==="" || checkElement[1].value==="") { return false;//当用户名或者密码为空时返回false,此时表单不会提交 } }function remind(){ alert("这是一个简单按钮,默认不会提交表单数据,不会刷新页面"); } 注意一點: 當未處於表單中時,其瀏覽器預設的type就是button; 而當處於表單中時,不同的瀏覽器對 元素的type 屬性使用不同的預設值; 因此,建議隨時為button設定type值。 總結一下: #用法相同,用作表單資料提交按鈕,預設即會刷新頁面; ## 和的用法是一樣的,都是普通按鈕,預設不會刷新頁面。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ###推薦閱讀:#########jest測試react native元件的步奏是什麼#########javascript的隱式呼叫詳解 JS新增元素新節點