首頁  >  文章  >  web前端  >  在表單中button與input的區別

在表單中button與input的區別

php中世界最好的语言
php中世界最好的语言原創
2018-03-19 09:23:372098瀏覽

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

先說一下button 和input的定義:

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

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

   元素在

元素中使用,用來聲明允許使用者輸入資料的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>

注意一點:

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


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

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

javascript的隱式呼叫詳解

JS新增元素新節點

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn