HTML - formタグ
概要
ラジオボタン
ラジオボタンの基本
ラジオボタンは、複数の選択肢から1つだけを選べる入力要素である。
基本的な実装を以下に示す。
- inputタグのtype属性を"radio"に指定する。
- 各選択肢には固有のvalue属性を設定する。
- checked属性で初期選択状態を設定できる。
また、アクセシビリティのためにlabelタグと組み合わせて使用する。
<form>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
</div>
</form>
<!-- checked属性は初期選択を指す -->
<input type="radio" name="gender" value="male" checked>
<!-- disabled属性は選択不可を指す -->
<input type="radio" name="gender" value="female" disabled>
グループ化
ラジオボタンをグループ化するには、同じname属性値を設定する。
各ラジオボタンには個別のid属性値とvalue属性値を設定する。
labelタグを使用して、ラジオボタンにラベルを付ける。
labelのfor属性が存在する場合は、対応するラジオボタンのid属性値と一致させる。
<form>
<div>
<p>好きな色を選んでください：</p>
<input type="radio" id="red" name="color" value="red">
<label for="red">赤</label>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">青</label>
<input type="radio" id="green" name="color" value="green">
<label for="green">緑</label>
</div>
</form>
グループ化を視覚的にも明確にする場合は、fieldsetおよびlegendを使用する。
これにより、グループに枠線が付き、legendでグループのタイトルが表示される。
<form>
<fieldset>
<legend>好きな色を選んでください：</legend>
<input type="radio" id="red" name="color" value="red">
<label for="red">赤</label>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">青</label>
<input type="radio" id="green" name="color" value="green">
<label for="green">緑</label>
</fieldset>
</form>
テキストボックス
Eメール
emailは、メールアドレス入力用のテキストボックスである。
<input type="email" name="email">
URL
urlは、URL入力用ののテキストボックスである。
<input type="url" name="website">
数値入力
numberは、数値入力用のテキストボックスである。
<input type="number" min="0" max="100" step="1">
数値入力 (rangeの使用)
rangeは、スライダーによる数値入力するものである。
<!-- JavaScriptの関数を分離して記述する場合 -->
<input type="range" min="0" max="100" value="50" oninput="updateValue(this.value)">
<input type="text" id="rangeValue" value="50" readonly>
<script>
function updateValue(value) {
document.getElementById('rangeValue').value = value;
}
</script>
<!-- JavaScriptの関数を直接HTML属性に記述する場合 -->
<div>
<input type="range" min="0" max="100" value="50" oninput="document.getElementById('rangeValue').value = this.value">
<input type="text" id="rangeValue" value="50" readonly> <!-- readonly属性を使用して、テキストボックスの値を直接編集できないようにしている -->
</div>
電話番号入力
telは、電話番号入力用のテキストボックスである。
<input type="tel" name="phone">
検索ボックス
searchは、検索ボックス用のテキストボックスである。
<input type="search" name="query">
時刻選択
timeは、時刻選択用のテキストボックスである。
<input type="time">
その他属性
必須入力項目の指定
requiredは、必須入力項目を指定する。
<input type="text" required>
プレースホルダ
placeholderは、入力例やヒントを表示する。
<input type="text" placeholder="例: 山田太郎">
バリデーション
patternは、正規表現によるバリデーションを指定する。
<input type="text" pattern="[A-Za-z]{3}">
オートコンプリート
autocompleteは、自動補完を制御する。
<input type="text" autocomplete="on">
自動フォーカス
autofocusは、ページ読み込み時に自動フォーカスを制御する。
<input type="text" autofocus>
バリデーション関連
min / max
数値の最小 / 最大値を指定する。
step
数値の増減幅を指定する。
maxlength / minlength
最大文字数 / 最小文字数を指定する。
カレンダー
日付選択用
dateは、日付選択用のカレンダーである。
<input type="date">
日時選択
datetime-localは、日時選択用のカレンダーである。
<input type="datetime-local">
月選択
monthは、月選択用のカレンダーである。
<input type="month">
週選択
weekは、週選択用のカレンダーである。
<input type="week">
カラーピッカー
<input type="color">
入力要素
入力候補リスト
<datalist>タグは、入力候補リストを提供する。
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
その他表示
計算結果等の出力表示
<output>タグは、計算結果等の出力表示用である。
<output name="result"></output>
進捗表示
<progress>タグは、進捗状況表示用である。
<progress value="70" max="100">70%</progress>
数値の度合い
<meter>タグは、数値の度合いを表示する。
<meter value="0.6">60%</meter>
ファイル
複数ファイルの選択
multipleは、複数ファイルの選択を許可する。
<input type="file" multiple>
送信ボタン
属性
送信先URLの指定
formactionは、送信先URLを指定する。
<input type="submit" formaction="/submit2.php">
送信メソッドの指定
formmethodは、送信メソッドを指定する。
<input type="submit" formmethod="post">
エンコードタイプの指定
formenctypeは、エンコードタイプを指定する。
<input type="submit" formenctype="multipart/form-data">
送信後の表示先の指定
formtargetは、送信後の表示先を指定する。
<input type="submit" formtarget="_blank">
バリデーションの無効化
formnovalidateは、バリデーションを無効化する。
<input type="submit" formnovalidate>