button 和input 的區別及在表單form中的用法

心晴安夏發表於2018-03-17
ORM

先說一下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的預設行為，即阻止表單資料提交（阻止頁面重新整理）

注意：onsubmit=“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”/>的用法是一樣的，均為普通按鈕，預設情況不會重新整理頁面。

 

相關文章