このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“type”属性

記事Sep.16th, 2020
入力欄の種類を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

type”属性について

type”属性はinput”要素で表される入力欄の種類を指定します。

type”属性の値によってinput”要素の見た目や操作方法、フォームで送信できる入力値が大きく異なります。

type”属性を省略した場合や指定した値にブラウザが対応していない場合は単純なテキスト入力欄を表すtype="text"として扱われます。

指定できる値

type”属性の値 説明 サンプル
hidden 非表示の送信されるデータ
text 1行のテキスト入力欄
searchHTML5で追加 検索テキストの入力欄
telHTML5で追加 電話番号の入力欄
urlHTML5で追加 URLの入力欄
emailHTML5で追加 メールアドレスの入力欄
password パスワードの入力欄
dateHTML5で追加 日付の入力欄
monthHTML5.1で追加 月の入力欄
weekHTML5.1で追加 週の入力欄
timeHTML5で追加 時刻の入力欄
datetime-localHTML5.1で追加 日時の入力欄
numberHTML5で追加 数値の入力欄
rangeHTML5で追加 大まかな数値の入力欄
colorHTML5で追加 色の入力欄
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>
あなたの猫の情報

性別

体色

模様

瞳の色

あなたの情報

*送信すると入力内容が表示されます。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク