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">

バリデーション

正規表現の使用

patternは、正規表現によるバリデーションを指定する。

 <input type="text" pattern="[A-Za-z]{3}">

数値の最小 / 最大値

min / maxは、数値の最小 / 最大値を制限する。
数値入力やレンジスライダで使用する。

 <input type="number" min="18" max="65">

数値の増減幅

stepは、数値の増減幅を指定する。

未指定の場合は、1
小数点の入力も可能

 <input type="number" min="100" max="250" step="0.5">

以下の例では、min / max / stepを使用して、スライダでの数値入力を指定している。

 <input type="range" min="0" max="100" step="10">

文字数制限

maxlength / minlengthは、最大文字数 / 最小文字数を指定する。
input要素やtextarea要素で使用可能である。

 <!-- テキスト入力の文字数制限 -->
 <input type="text" maxlength="20">
 
 <!-- パスワードの文字数制限  8-16文字 -->
 <input type="password" minlength="8" maxlength="16">
 
 <!-- テキストエリアの文字数制限  最大200文字 -->
 <textarea maxlength="200" rows="4" cols="50"></textarea>

その他属性

必須入力項目の指定

requiredは、必須入力項目を指定する。

 <input type="text" required>

プレースホルダ

placeholderは、入力例やヒントを表示する。

 <input type="text" placeholder="例: 山田太郎">

オートコンプリート

autocompleteは、自動補完を制御する。

 <input type="text" autocomplete="on">

自動フォーカス

autofocusは、ページ読み込み時に自動フォーカスを制御する。

 <input type="text" autofocus>

ラベル

for属性

for属性は、labelタグとフォームコントロール (input、select、textarea等) を関連付けるために使用する属性である。

for属性の値は、関連付けるフォームコントロールのid属性と一致させる必要がある。(大文字・小文字も区別される)

ラベルを押下する時、関連付けられたフォームコントロールにフォーカスが移動する。

for属性は、<label>タグ専用の属性であり、他のHTML要素では使用できない。

※注意
同じページ内で同じid値を複数使用してはいけない。

for属性を使用するメリットは、スクリーンリーダーでの読み上げが適切になり、クリック / タップ可能な領域が広がることである。

 <!-- 基本 -->
 <label for="username">ユーザ名:</label>
 <input type="text" id="username">
 
 <!-- チェックボックス -->
 <label for="agree">利用規約に同意する</label>
 <input type="checkbox" id="agree">
 
 <!-- ラジオボタン -->
 <label for="male">男性</label>
 <input type="radio" id="male" name="gender">
 <label for="female">女性</label>
 <input type="radio" id="female" name="gender">
 
 <!-- テキストエリア -->
 <label for="comment">コメント:</label>
 <textarea id="comment"></textarea>
 
 <!-- プルダウン (セレクトボックス) -->
 <label for="country">国:</label>
 <select id="country">
   <option value="jp">韓国</option>
   <option value="jp">中国</option>
   <option value="us">アメリカ</option>
 </select>

また、for属性を使用せずに、<label>タグの中にフォームコントロールを直接入れることもできる。

 <!-- ネストした記法 -->
 <label>
   ユーザ名:
   <input type="text">
 </label>
 
 <!-- チェックボックス -->
 <label>
   <input type="checkbox">
   利用規約に同意する
 </label>

カレンダー

日付選択用

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>