🕊️
【HTML】Formのすべて
formタグ
指定すること
- 送信先
- 送信方法
<form action="index.php" method="post">
</form>
inputタグ
指定可能なtype
- text
- 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