<input>タグについて

<input>とは？

<input>タグは、ユーザーがデータを入力するための単一入力欄を作成するタグです。
フォームの中で使われ、テキスト、パスワード、チェックボックス、ラジオボタン、ボタンなど、さまざまな形式の入力が可能です。

基本構文

<input type="種類" name="名前">

<input>は空要素で、終了タグ（</input>）は不要です。

主なtype属性の種類

• text：1行のテキスト入力欄
• password：入力内容が「●」で隠れる
• email：メール形式の入力欄
• number：数値の入力欄
• checkbox：チェックボックス
• radio：ラジオボタン（選択肢の中から1つ）
• submit：送信ボタン
• reset：入力をリセット
• button：通常のボタン（動作はJavaScriptで設定）
• file：ファイル選択欄
• date：日付の選択欄

使用例

<form action="/send" method="post">
  名前：<input type="text" name="username"><br>
  パスワード：<input type="password" name="password"><br>
  <input type="submit" value="ログイン">
</form>
  

主な属性

• type：入力の種類を指定（必須）
• name：送信時のデータのキー名（重要）
• value：初期値
• placeholder：入力欄に表示されるヒント
• required：必須入力にする
• checked：初期状態でチェックを入れる（checkbox、radio）
• disabled：入力不可にする

placeholderの例

<input type="email" name="email" placeholder="example@example.com">
  

CSSでの装飾例

input[type="text"] {
  width: 300px;
  padding: 8px;
  border: 1px solid #ccc;
}
  

注意点

• typeの指定を忘れるとtextが初期値になる
• name属性はフォームの送信で必須
• 適切なtypeを使うことでスマホのキーボードも最適化される

まとめ

• <input>は1つの入力欄を作るためのタグ
• type属性で用途に応じた入力形式を指定
• 他のフォームタグ（<form>など）と組み合わせて使う
• nameやvalueなどの属性を使いこなすと便利
• 終了タグは不要な空要素