HTML 入力画面の部品(form)

HTMLの入力画面の部品(form)のサンプルです。

目次 フォームとsubmitボタン / ボタン / ファイル選択のボタン
カラー選択のボタン / リセットボタン
テキストボックス / パスワード入力ボックス / テキストエリア
セレクトボックス / セレクトボックス(グルーピングあり)
ラジオボタン / チェックボックス
日付入力欄(date) / 時刻入力欄(time) / hidden

フォームとsubmitボタン

<form method="post" action="testform.php">
  <input type="submit" value="確定" />
</form>

methodは、getまたはpostを指定します。actionは送信先を指定します。
submitで値を送信します。

 

ボタン

<input type="button" value="ボタン" id="button1" />

 

ファイル選択のボタン

<input type="file" id="btnFile">

 

カラー選択のボタン

<input type="color" id="color1" >

 

リセットボタン

<input type="reset" id="btnReset" value="リセット" >

 

テキストボックス

<input type="text" value="1" name="text1" size="15" maxlength="5" />

autocomplete="off"を追加すると自動補完が無効になります。

 

パスワード入力ボックス

<input type="password" name="pass1" size="15" maxlength="5" />

入力すると文字が伏せ字になります。

 

テキストエリア

<style>textarea{resize:none;}</style>
<textarea name="tarea" value="" cols="30" rows="5" maxlength="60"></textarea>

閉じタグのtextareaが必要です。
cssのresize:noneでテキストエリアの拡大縮小を無効にします。

 

セレクトボックス

<select name="color1">
  <option value="red">赤</option>
  <option value="yellow">黄</option>
  <option value="blue">青</option>
</select>

初期値を設定する場合は、selectedを指定します。

<select name="color1">
  <option value="red">赤</option>
  <option value="yellow" selected>黄</option>
  <option value="blue">青</option>
</select>

 

セレクトボックス(グルーピングあり)

<select name="item">
  <optgroup label="野菜">
    <option value="c1">キャベツ</option>
    <option value="c2">レタス</option>
  </optgroup>
  <optgroup label="果物">
    <option value="f1">りんご</option>
    <option value="f2">みかん</option>
  </optgroup>
</select>

 

ラジオボタン

<input type="radio" name="color1" id="r1" value="red" checked />
<label for="r1">赤です</label>
<input type="radio" name="color1" id="r2" value="blue" />
<label for="r2">黄です</label>
<input type="radio" name="color1" id="r3" value="yellow" />
<label for="r3">青です</label>

nameの値を同じにしてグルーピングします。
2,4,6行目のlabelを使用すると文字の部分をクリックしてもチェックが付くようになります。
labelがないと丸をクリックしないとチェックできません。

 

チェックボックス

<input type="checkbox" name="color1" id="c1" value="red" checked />
<label for="c1">赤です</label>
<input type="checkbox" name="color1" id="c2" value="yellow" />
<label for="c2">黄です</label>
<input type="checkbox" name="color1" id="c3" value="blue" />
<label for="c3">青です</label>

nameの値を同じにしてグルーピングします。
2,4,6行目のlabelを使用すると文字の部分をクリックしてもチェックが付くようになります。
labelがないと四角をクリックしないとチェックできません。

 

日付入力欄(date)

<input type="date" >

アイコンをクリックするとカレンダーが表示されます。

 

時刻入力欄(time)

<input type="time" >

アイコンをクリックすると時刻の入力欄が表示されます。

 

hidden

<input type="hidden" value="red" name="hidden1" />

関連の記事

HTML5 入力項目のチェックを行うサンプル
HTML5 進捗状況を表示するサンプル(プログレスバー)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
[HTML5] number 上下ボタンで数値を入力する
[HTML5] detailsとsummary クリックで詳細を開く

△上に戻る