Sep.16th, 2020
＃
“type”属性について
“type”属性は“input”要素で表される入力欄の種類を指定します。
“type”属性の値によって“input”要素の見た目や操作方法、フォームで送信できる入力値が大きく異なります。
“type”属性を省略した場合や指定した値にブラウザが対応していない場合は単純なテキスト入力欄を表す“type="text"”として扱われます。
＃
指定できる値
| “type”属性の値 | 説明 | サンプル |
|---|---|---|
| hidden | 非表示の送信されるデータ | |
| text | 1行のテキスト入力欄 | |
search |
検索テキストの入力欄 | |
| tel |
電話番号の入力欄 | |
| url |
URLの入力欄 | |
| email |
メールアドレスの入力欄 | |
| password | パスワードの入力欄 | |
| date |
日付の入力欄 | |
month |
月の入力欄 | |
| week |
週の入力欄 | |
| time |
時刻の入力欄 | |
| datetime-local |
日時の入力欄 | |
| number |
数値の入力欄 | |
| range |
大まかな数値の入力欄 | |
| color |
色の入力欄 | |
| checkbox | チェックボックス | |
| radio | ラジオボタン | |
| file | ファイルの送信欄 | |
| submit | 送信ボタン | |
| image | 画像の送信ボタン | |
| reset | リセットボタン | |
| button | 汎用的なボタン |
＃
サンプルコード
<form method="post" action="sample-inputtag1.php" target="_blank">
<fieldset>
<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="name"></label></p>
<p><label>年齢：<input type="number" name="age"></label></p>
<fieldset>
<legend>性別</legend>
<p>
<label><input type="radio" name="sex" value="オス">オス</label>
<label><input type="radio" name="sex" value="メス">メス</label>
<label><input type="radio" name="sex" value="不明">不明</label>
</p>
</fieldset>
<fieldset>
<legend>体色</legend>
<p>
<label><input type="checkbox" name="color[]" value="白">白</label>
<label><input type="checkbox" name="color[]" value="黒">黒</label>
<label><input type="checkbox" name="color[]" value="灰">灰</label>
<label><input type="checkbox" name="color[]" value="薄茶">薄茶</label>
<label><input type="checkbox" name="color[]" value="焦げ茶">焦げ茶</label>
</p>
</fieldset>
<fieldset>
<legend>模様</legend>
<p>
<label><input type="radio" name="pattern" value="単色">単色</label>
<label><input type="radio" name="pattern" value="ハチワレ">ハチワレ</label>
<label><input type="radio" name="pattern" value="ポインテッド">ポインテッド</label>
<label><input type="radio" name="pattern" value="靴下">靴下</label>
<label><input type="radio" name="pattern" value="ヒョウ柄">ヒョウ柄</label>
<label><input type="radio" name="pattern" value="トラ柄">トラ柄</label>
<label><input type="radio" name="pattern" value="サビ">サビ</label>
<label><input type="radio" name="pattern" value="三毛">三毛</label>
</p>
</fieldset>
<fieldset>
<legend>瞳の色</legend>
<p>
<label>左目：<input type="color" name="lefteye"></label>
<label>右目：<input type="color" name="righteye"></label>
</p>
</fieldset>
<p><label>誕生日：<input type="date" name="birth"></label></p>
<p><label>いつも起きる時間：<input type="time" name="sleep"></label></p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>猫が好きな度合い：<input type="range" name="love" min="0" max="100"></label></p>
<p><label>居住地域：<input type="text" name="area"></label></p>
<p><label>メールアドレス：<input type="email" name="email"></label></p>
<p><label>電話番号：<input type="tel" name="tel"></label></p>
<p><label>ウェブサイト：<input type="url" name="website"></label></p>
</fieldset>
<p><label>パスワード：<input type="password" name="key"></label></p>
<p>
<input type="submit" value="送信する">
<input type="reset" value="入力内容をリセット">
</p>
</form>
