Submit

許多網站都有表單要填寫，寫完後按下送出就會將資料送到後台資料庫，在 W3School 有介紹這個寫法，

<label for="name">
  <span>Name:</span>
  <input type="text" id="name" placeholder="your name" />
  <input type="submit" value="submit" />
  <button type="submit">Submit</button>
</label>

可以看到有 input 跟 button 兩種，並且都有 type="submit" 的方法可以使用，至於 input 跟 button 差別在哪裡，可以看這篇文章。

簡單來說，為了避免使用者不小心將資料直接就送到後台，可以使用 button 來設計，如果是沒有疑慮的表單內容，可以使用 input 方式來設計。

我自己是常用 button 來做設計，因為可以按照需求與功能進行。

Reset

有送出表單內容，當然也有清空表單內容，而 W3School 也有提供範本寫法，

<label for="email">
    <span>Email</span>
    <input type="email" name="email" id="email" placeholder="your email">
    <input type="reset" value="reset">
    <button type="reset">Reset</button>
  </label>

上方的兩個寫法，記得要用 form 標籤，因為 input 本身是 form 的元素，要包住才會有效果！

透過 JS 取得值與清空 input 內容

本文重點，透過 JS 取得 input 輸入的值跟清空該怎麼寫? 直接看程式碼，

HTML

<form>
  <label for="testInput">
    <span>TEXT: </span>
    <input type="text" placeholder="test" id="testInput" />
    <button class="submitBtn">SUBMIT</button>
    <button type="reset">RESET</button>
  </label>
</form>

Javascript

var testInput = document.getElementById("testInput");
var submitBtn = document.querySelector(".submitBtn");

function FsubmitBtn(value) {
  var str = "";
  var submitValue = testInput.value;
  str = submitValue;
  alert(str);
}
submitBtn.addEventListener("click", FsubmitBtn);

說明：

1. 綁定 input 表格與 button 按鈕。
2. 寫一個 function 給監聽事件用。
3. 先宣告一個字串變數為空值。
4. 在宣告變數是 input 所得到的值。
5. 字串變數為 input 的值。
6. 執行 function 會跳出 alert 視窗，並顯示輸入的值。
7. button type="reset" 在 form 標籤內，會自動執行清空 input 的功能。

CodePen https://codepen.io/hnzxewqw/pen/YzyRxVy

參考資料

[Guide] 用 JavaScript 來取得表單元素內容的值（取值）

HTML <button> type Attribute