HTML：値の送信 ～input要素～（入力・選択・ボタン・隠し パーツ）

input要素

• 値の送信に使う要素の一つ。
• type属性の値によって様々なタイプの送信用パーツを設定可能。
• 置換インライン要素に属す。
• 終了タグ不要

<input type="パーツの種類 " name="送信するデータに付ける名前">

パーツタイプとtype属性値対応表

value属性

input要素に設定できる属性の一つ。

パーツの種類によって役割が異なるので注意！！

入力パーツ

type属性の属性値

type属性以外の　代表的な属性

例

    <fieldset>

      <legend>入力パーツ</legend>

      <dl>

        <dt>基本形</dt>

        <dd>

          <input type="text" name="text1">

        </dd>

        <dt>初期値あり</dt>

        <dd>

          <input type="text" name="text2" value="初期値">

        </dd>

        <dt>プレースホルダ―あり</dt>

        <dd>

          <input type="text" name="text3" placeholder="プレースホルダー">

        </dd>

        <dt>パスワード</dt>

        <dd>

          <input type="password" name="password1">

        </dd>

      </dl>

    </fieldset>

 　↓　↓　↓

選択パーツ

type属性の属性値

type属性以外の　代表的な属性

 ※riquired属性詳細

【ラジオボタンの場合】

【チェックボックスの場合】

例

    <fieldset>

      <legend>選択系パーツ</legend>

      <dl>

        <dt>ラジオボタン</dt>

        <dd>

          <label><input type="radio" name="akutsu">項目1</label>

          <label><input type="radio" name="akutsu">項目2</label>

          <label><input type="radio" name="akutsu">項目3</label>

        </dd>

        <dt>チェックボックス</dt>

        <dd>

          <label><input type="checkbox" name="akutsu" checked>項目1</label>

          <label><input type="checkbox" name="akutsu">項目2</label>

          <label><input type="checkbox" name="akutsu">項目3</label>

        </dd>

      </dl>

    </fieldset>

　↓　↓　↓

使いやすい選択パーツ

ボタンパーツ

type属性の属性値 

type属性以外の　代表的な属性

例

    <fieldset>

      <legend>ボタン系パーツ</legend>

      <dl>

        <dt>type="submit"</dt>

        <dd><input type="submit" value="送信"></dd>

        <dt>type="reset"</dt>

        <dd><input type="reset" value="リセット"></dd>

        <dt>type="button"</dt>

        <dd><input type="button" value="ただのボタン"></dd>

      </dl>

    </fieldset>

 

　↓　↓　↓

隠しパーツ

フォーム製作者が目に見えないところで値を送信するために使用する。隠しパーツはブラウザ上に表示されないだけでHTMLコードをみればどんな値を送信しているかわかる。

type属性の属性値 

type属性以外の　代表的な属性

例

<p>隠しパーツ：<input type="hidden" name="secret" value="隠しパーツ"></p>

　↓　↓　↓