【HTML】簡単にフォームの入力値を取得する5つの方法
getElementByIdを使う方法
document.getElementById() を使ってフォームの入力値を取得する方法です。
<input type="text" id="username">
<button onclick="getValue()">取得</button>
<script>
function getValue() {
var inputValue = document.getElementById("username").value;
alert("入力された値: " + inputValue);
}
</script>querySelectorを使う方法
document.querySelector() を使う方法です。CSSセレクターを利用できます。
<input type="text" class="user-input">
<button onclick="getValue()">取得</button>
<script>
function getValue() {
var inputValue = document.querySelector(".user-input").value;
alert("入力された値: " + inputValue);
}
</script>フォームのelementsプロパティを使う方法
フォーム要素の elements プロパティを使用する方法です。
<form id="myForm">
<input type="text" name="email">
<button type="button" onclick="getValue()">取得</button>
</form>
<script>
function getValue() {
var form = document.getElementById("myForm");
var inputValue = form.elements["email"].value;
alert("入力された値: " + inputValue);
}
</script>FormDataを使う方法
JavaScriptの FormData を利用してフォームデータを取得する方法です。
<form id="dataForm">
<input type="text" name="username">
<input type="email" name="email">
<button type="button" onclick="getFormData()">取得</button>
</form>
<script>
function getFormData() {
var form = document.getElementById("dataForm");
var formData = new FormData(form);
alert("ユーザー名: " + formData.get("username") + "\nメール: " + formData.get("email"));
}
</script>イベントリスナーを使う方法
addEventListener() を利用してフォームの入力値を取得する方法です。
<form id="eventForm">
<input type="text" name="message">
<button type="submit">送信</button>
</form>
<script>
document.getElementById("eventForm").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(event.target);
alert("入力されたメッセージ: " + formData.get("message"));
});
</script>