<form>
  <h2>Submit</h2>
  <hr>
  <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>

  <h2>Reset</h2>
  <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>
<hr>

<h2>透過 JS 取得值與清空 input 內容</h2>
<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>
input {
  padding-left: 5px;
}
View Compiled
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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.