HTML 入力画面の部品(form)

01. ボタン

・フォームとsubmitボタン

・ボタン

02. 入力

02. 入力

04. その他

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

テーブル

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