フォーム共通スタイル
共通フォーム共通
フォームのグループ化
fieldset
フォームの入力項目をグループ化する
legend
fieldsetで作成したグループのタイトル表示
所感：
とても見やすくなる
ボイスオーバー読み上げで確認してみても、a11y観点でも良かった
テスト実装
GithHub Page
Code
Capture
const x = document.getElementById('input-base');
const s = document.getElementById('select-base');
const c = document.getElementById('check-base');
const r = document.getElementById('radio-base');
const v = document.querySelector('.view');
/* ===== View Result Value ===== */
// formElement.addEventListener("submit", (event) => {
// });
const show = () => {
this.addEventListener('submit', (event) => {
// Submitの無効
event.preventDefault();
// === 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);
}
}
// === Radio ===
const arrR = [];
const elemsR = document.getElementsByName('radioBase');
for (let i = 0; i < elemsR.length; i++) {
if (elemsR[i].checked) {
// elemsR[i].checked === true;
console.log(elemsR[i].value);
arrR.push(elemsR[i].value);
}
}
/* === Input / Selectの値はそのまま取得表示 === */
if (x.value != '') {
v.innerHTML =
'<ul>' +
'<li>' +
x.value +
'</li>' +
'<li>' +
s.value +
'</li>' +
'<li>' +
arr.join('/') +
'</li>' +
'<li>' +
arrR +
'</li>' +
'</ul>';
} else {
// HTMLのrequiredでも対応
alert('入力欄は必須です');
}
});
};<!-- html / 閉じが無いとCSS効かない => StackBlitzのバグ = 転載時は消す-->
<!DOCTYPE html/>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Basic Vanilla JS</title>
<link
rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto+Slab"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
/>
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<div class="wrap">
<div class="container">
<form id="formBasic" action="#">
<!-- .row -->
<div class="row">
<div class="column">
<h1>Form Basic Vanilla JS</h1>
</div>
</div>
<!-- // .row -->
<!-- Input/Select -->
<div class="row">
<!-- Input Base -->
<div class="column column-50">
<label for="input-base">Input Base</label
><input type="text" id="input-base" value="inputValue" required />
</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" required>
// option size="n" / multiple
<option value="">選択してください</option>
<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>
<!-- // -->
<div class="row">
<!-- CheckBox -->
<div class="column column-50">
<fieldset id="check-base">
<legend>Multi Select</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>
<!-- Radio -->
<div class="column column-50">
<fieldset id="radio-base">
<legend>Select One</legend>
<label
><input
type="radio"
name="radioBase"
value="RadioA"
checked
required
/>RadioA</label
>
<label
><input
type="radio"
name="radioBase"
value="RadioB"
/>RadioB</label
>
<label
><input
type="radio"
name="radioBase"
value="RadioC"
/>RadioC</label
>
</fieldset>
</div>
</div>
<!-- // -->
<!-- Submit -->
<div class="row">
<div class="column">
<input
class="button button-outline submit"
type="submit"
onclick="show()"
/>
</div>
</div>
<!-- //-->
<!-- Result -->
<div class="row">
<div class="column column-20">
<span>Submit</span>
<h2>Result</h2>
</div>
<code class="column column-80 result">
<b>View Here ↓</b>
<div class="flex">
<div class="res view"></div>
<div class="res choose"></div>
</div>
</code>
</div>
<!-- // -->
</form>
</div>
<!-- //.container -->
</div>
<!-- //.wrap -->
<script src="app.js"></script>
</body>
</html>
フォームオプション
required 入力必須項目
radio/checkboxは同名のnameであれば最初の1点に付ければ良い
checked
デフォルトでチェックえを付けたい要素に付ける
autofocus
ローディング後に自動でそのフォームに入力待ち状態でフォーカスさせる
disabled
無効化
参照記事：
最終更新
