HTML

<input> 入力エリア

詳細を開く 詳細を閉じる

<input>要素

  • 入力エリアを作ります。
  • <form>要素コントロールの一つです。
  • type属性を指定することで、様々な入力エリアを作成できます。type属性のデフォルトは「text」です。
  • 終了タグは付けません。
  • インライン要素です。

<input>type属性

  • 他のコントロール要素については、こちら
テキスト型
textテキストボックス
passwordパスワード
number数値
emailメールアドレス
urlURL
tel電話番号
search検索語
ボタン型
submit送信ボタン
resetリセットボタン
button一般のボタン
image画像ボタン(送信)
特殊型
radioラジオボタン
checkboxチェックボックス
hidden隠しエリア
fileファイル送信
range数値レンジ
colorカラーパレット
日付型
date日付
datetime日付と時刻
datetime-localローカルタイム
month
time時刻
week

別ウィンドウで表示

<form action="../aaa.php" method="POST">

<!-- テキスト型 -->
<input type="text"	name="text"		placeholder="text"><br>
<input type="password" name="password" placeholder="password"><br>
<input type="number"	name="number"	placeholder="number"><br>
<input type="email"	name="email"	placeholder="email"><br>
<input type="url"	name="url"		placeholder="url"><br>
<input type="tel"	name="tel"		placeholder="tel"><br>
<input type="search"	name="search"	placeholder="search"><br><br>

<!-- ボタン型 -->
<input type="submit"	value="submit">
<input type="reset"	value="reset">
<input type="button"	value="button">
<input type="image"	src="../img/submit2.png" alt="image"><br><br>

<!-- 特殊型 -->
<input type="radio" name="radio" value="radio 1">radio 1
<input type="radio" name="radio" value="radio 2">radio 2
<input type="radio" name="radio" value="radio 3">radio 3<br>

<input type="checkbox" name="checkbox1" value="True">checkbox1
<input type="checkbox" name="checkbox2" value="True">checkbox2<br>

hidden: <input type="hidden" name="hidden" value="hidden"><br>
file: <input type="file" name="file"><br>
range: <input type="range" name="range"><br>
color: <input type="color" name="color"><br><br>

<!-- 日付型 -->
date: <input type="date" name="date"><br>
datetime: <input type="datetime" name="datetime"><br>
datetime-local: <input type="datetime-local" name="datetime-local"><br>
month: <input type="month" name="month"><br>
time: <input type="time" name="time"><br>
week: <input type="week" name="week"><br>

</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ