HTML 備忘録

入力フォーム

図1 入力フォーム

図1の入力フォームのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="username">お名前</label></dt>
      <dd><input id="username" type="text" name="username"></dd>

      <dt><label for="email">メールアドレス</label></dt>
      <dd><input  id="email" type="text" name="email"></dd>
    </dl>
</form>

labelを加えることによって、お名前またはメールアドレスの文字をクリックしても、入力可能とすることができる。

プルダウン

図2 プルダウン

図2のプルダウンのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="area">お住まいの地域</label></dt>
      <dd>
        <select id="area" name="area">
          <option value="" selected>選択してください</option>
          <option value="hokkaido">北海道</option>
          <option value="tohoku">東北</option>
          <option value="kanto">関東</option>
          <option value="tyubu">中部</option>
          <option value="kinki">近畿</option>
          <option value="shikoku">四国</option>
          <option value="kyushu">九州</option>
          <option value="okinawa">沖縄</option>
        </select>
      </dd>
    </dl>
</form>

option要素にselectedオプションをつけることによって、その部分が最初に選択されている状態に設定できる。

ラジオボタン

図3 ラジオボタン

図3のラジオボタンのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt>性別</dt>
      <dd>
        <label><input type="radio" name="gender" value="male" checked>
          男性
        </label>
        <label><input type="radio" name="gender" value="female">
          女性
        </label>
      </dd>
    </dl>
</form>

ここでのlabelの使い方は今までと違う。labelでinput要素を囲むような使い方もあることに注意。checkedオプションを使うことにより、その部分が最初に選択されている状態に設定できる。

テキストエリア

図4 テキストエリア

図4のテキストエリアのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="contents">お問い合わせ内容</label></dt>
      <dd><textarea id="contents" name="contents"></textarea></dd>
    </dl>
</form>

チェックボックス

図5 チェックボックス

図5のチェックボックスのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="privacy">プライバシーポリシーに同意する</label></dt>
      <dd><input id="privacy" type="checkbox" name="privacy" value="1"></dd>
    </dl>
</form>

送信ボタン

図6 送信ボタン

図6の送信ボタンのHTMLは以下の通り。

<form action="#" method="POST">
    <input type="submit" name="submit" value="送信">
</form>

最後に

これら全てを組み合わせたもの(お問い合わせフォーム)が以下の図となる。

図7 お問い合わせフォーム