<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.