🕊️

【HTML】Formのすべて

に公開

formタグ

指定すること

  • 送信先
  • 送信方法
<form action="index.php" method="post">
</form>

inputタグ

指定可能なtype

  • text
  • email
  • radio
  • checkbox
  • color
  • date
  • datetime-local
  • file
  • hidden
  • number
  • password
  • range
  • search
  • tel
  • url
    など
<label for="yourname">氏名</label>
<input type="text" id="yourname" name="yourname" placeholder="氏名を入力">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="aaa@sample.com">
<label>性別</label>
<label>
  <input type="radio" name="gender" value="men">
  <span>男性</span>
</label>
<label>
  <input type="radio" name="gender" value="women">
  <span>女性</span>
</label>
<label>趣味</label>
<label>
  <input type="checkbox" name="course[]" value="baseball">
  <span>野球</span>
</label>
<label>
  <input type="checkbox" name="course[]" value="soccer">
  <span>サッカー</span>
</label>

selectタグ

できること

ドロップダウン

<label for="age">年齢</label>
<select id="age" name="age" required>
  <option value="">選択してください</option>
  <option value="10">10代</option>
  <option value="20">20代</option>
  <option value="30">30代</option>
</select>

textareaタグ

できること

複数行のinputボックス

<label for="message">お問い合わせ</label>
<textarea id="message" name="message" rows="7"></textarea>

buttonタグ

<button type="submit">送信</button>

CSSのおすすめ設定も載せます。

button {
  cursor: pointer;
  transition: background-color .3s;
}
button:hover {
  background-color: #濃い色に変わるようにする;
}

オプション

  • required
    requiredを付ける際はユーザーに必須がわかるようにする必要があります。
<label for="yourname">氏名<span class="required">必須</span></label>
<input type="text" id="yourname" name="yourname" placeholder="氏名を入力" required>

注意点

  • ラジオボタンは1度チェックをつけると未回答にできない
  • ラジオボタンとドロップダウンの使い分けを考える
  • チェックボックスは複数選択が可能

Discussion