<div class="wrap">
<div class="container">
<form id="formBasic" action="#">
<div class="row">
<h1>Form Basic</h1>
</div>
<!-- Input Base -->
<div class="row">
<div class="column column-50">
<label for="input-base">Input Base</label><input type="text" id="input-base" value="input value">
</div>
<!-- Select Base -->
<div class="column column-50">
<label for="select-base">Select Base</label>
<!-- <select name="select-base" id="select-base"> -->
<select name="select-base" id="select-base"> // option size="n" / multiple
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</div>
</div>
<!-- CheckBox -->
<div class="column column-50">
<fieldset id="check-base">
<legend>Legendタグ</legend>
<label><input type="checkbox" name="checkBase" value="ItemA">ItemA</label>
<label><input type="checkbox" name="checkBase" value="ItemB" checked>ItemB</label>
<label><input type="checkbox" name="checkBase" value="ItemC">ItemC</label>
</fieldset>
</div>
<!-- Submit -->
<div class="row">
<div class="column column-20">
<button class="button button-outline" type="button" onclick="show()">Submit</button>
</div>
<div class="column column-80 result">
<h2>Result:</h2>
<div class="flex">
<div class="res view"></div>
<div class="res choose"></div>
</div>
</div>
</div>
</form>
</div>
</div>// Reset
* {
font-weight: 400;
color: dimgray;
letter-spacing: 1px;
}
// Utility
.flex {
display: flex;
}
// Develop
.wrap {
margin: 4vh auto;
max-width: 80vw;
}
.column {
margin: 16px 0;
}
.result {
font-size: 24px;
.res {
color: tomato;
}
}
const x = document.getElementById("input-base");
const s = document.getElementById("select-base");
const c = document.getElementById("check-base");
const v = document.querySelector(".view");
/* ===== View Result Value ===== */
const show = () => {
// === CheckBox ===
const arr = [];
const elems = document.getElementsByName("checkBase");
// チェックボックスを全部見に行く
for (let i = 0; i < elems.length; i++) {
// console.log(elems[i].checked); / console.log(elems[i].value);
// チェックの入っているフォームの値だけ配列で取り出す
if (elems[i].checked) {
elems[i].checked === true;
arr.push(elems[i].value);
console.log(elems[i].value);
}
}
/* === Input / Selectの値はそのまま取得表示 === */
if (x.value !== "") {
v.innerHTML = x.value + ", " + s.value + ", " + arr;
} else {
alert("何か書いて");
}
};
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.