inputタグ

タグ input は、HTMLフォームの様々な要素を作成します： 通常の入力フィールド、パスワード入力フィールド、チェックボックス、 ラジオボタン、ボタンなどです。

タグ input は、タグ form の内側に配置する必要があります。 これは必須ではありませんが、データをサーバーに送信し、 PHPを通じて後で処理するために必要です。

終了タグは必要ありません。

属性

属性	説明
type	入力フィールドのタイプを指定します。オプションは下記を参照してください。
value	入力フィールドのデフォルト値。ボタンの場合はそのテキストを設定します。 詳細は、属性 value を参照してください。
placeholder	入力フィールドのヒント。詳細は、 属性 placeholder を参照してください。
name	入力フィールドの名前。PHPで入力フィールドのデータを取得するために必要です。 フォームを正しく動作させるためには、入力フィールドの名前は（1つのフォーム内で） 互いに重複してはいけません。もし重複した場合、PHPにはHTMLコードで下にある 入力フィールドのデータが送信されます。
disabled	フォーム要素（inputだけでなく、ほぼすべての要素）を無効にします。 詳細は、属性 disabled を参照してください。

属性 type の値

値	説明
text	通常のテキスト入力フィールドを作成します。
password	パスワード用のテキスト入力フィールドを作成します。 テキストを入力してみてください - アスタリスクで表示されます。
checkbox	チェックボックスを作成します。 詳細は、checkbox を参照してください。
radio	ラジオボタンを作成します。 詳細は、radio を参照してください。
hidden	画面上には表示されないが、属性 value に含まれる データをサーバーに送信する隠し入力フィールドを作成します。
button	ボタンを作成します。このボタンをクリックしても フォームはサーバーに送信されません。これは リンク 内や JavaScript を通じて使用できます。 デフォルトではボタンにテキストはありません（テキストなしのボタンの例: ）。 テキストは value を使用して設定します。 ボタンを作成するタグ button も参照してください。
submit	データをサーバーに送信するボタンを作成します。 ボタンのテキストはブラウザに依存し、 value を使用して変更できます。 ボタンを作成するタグ button も参照してください。
reset	記入済みのフォームをクリアするボタンを作成します。 ボタンのテキストはブラウザに依存し、 value を使用して変更できます。
file	ファイル選択ボタンを作成します。このボタンのデザインは CSSを通じて変更することは禁止されています（ただし巧妙な方法があります）。 フォームにこのようなフィールドが必要な場合、 タグ form は属性 enctype の値を multipart/form-data に設定する必要があります。

HTML5での新しい属性 type の値

これらの属性値は新しく、HTML5でのみ登場したため、 一部のブラウザでは動作しない場合や、 ブラウザごとに異なる動作をする場合があります。

ブラウザが属性 type の内容を理解できない場合 （例えば、サポートされていない場合や誤って入力された場合）、 ブラウザはその要素を、type に値 text が設定されているかのような 通常のテキスト入力フィールドとして扱います。

以下の例をさまざまなブラウザで確認してください。 入力フィールドにテキストを入力し、送信ボタンをクリックしてみてください。 テキストが不正な場合やフィールドが空の場合 - ブラウザはエラーを表示します。 例えば、タイプが email のフィールドに不正なメールアドレスを入力した場合 - ブラウザはフォームの送信を許可せず、エラーメッセージを表示します （エラーのテキストや見た目をHTML/CSSで変更することはできません）。 フィールドが空の場合もブラウザはエラーを表示します。これは 属性 required によって実現されます：

値	説明
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

関連項目