HTML 入力画面の部品(form)

目次

フォームと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がないと四角をクリックしないとチェックできません。

 

テーブル

<style>
    table {
        border-collapse: collapse;
    }
    table td {
        border: 1px solid;
    }
</style>
<table>
    <tr>
        <td>red1</td>
        <td>red2</td>
    </tr>
    <tr>
        <td>blue1</td>
        <td>blue2</td>
    </tr>
</table>

 

日付入力欄(date)

<input type="date" >

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

 

時刻入力欄(time)

<input type="time" >

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

 

hidden

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

 

リンク

<a href="https://example.com">テストリンク</a>

 

関連の記事

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

△上に戻る