HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 <input> タグ

例

2つのテキストフィールドと1つの送信を持った簡単な HTML フォーム:

<form action="demo_form.html">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>

Try it yourself »

ブラウザ・サポート

<input> タグは、主要な全ブラウザがサポートしています。

定義と用法

<input> タグは、ユーザがデータを入力できる入力フィールドを指定します。

<input> 要素は、ユーザにデータの入力を認める入力コントロールを宣言する <form> 要素内で使用されています。

入力フィールドは、type 属性に応じて、多くの点が違いがあります。

HTML 4.01 と HTML5 との相違点

"align" 属性は、HTML4.01では非推奨であったのが、 HTML5においはサポートされなくなりましたので、<input> 要素の配置には、CSSを使用します。

HTML5の <input> タグには、多くの新しい属性と、多くの新しい値を持つ type 属性があります。

チップスと注意事項

注: <input>要素は、属性だけを含む空要素です。

チップ: <input> 要素へラベルを定義するには、label 要素を使用します。

属性

New : HTML5 で新規追加。

属性	値	説明
accept	audio/* video/* image/* MIME_type	サーバーが受け付けるファイルの種類を指定する (type="file" のときのみ)
alt	text	イメージの代替テキストを指定 (type="image" のときのみ)
autocompleteNew	on off	<input> 要素へオートコンプリートを有効にするかどうかを指定する
autofocusNew	autofocus	ページがロードされたときに、<input> 要素が自動的にフォーカスを取得することを指定する
checked	checked	>ページロード時に、<input> 要素があらかじめ選択された状態にする場合に指定する (type="checkbox" または type="radio" のとき)
disabled	disabled	無効にする <input> 要素を指定する
formNew	form_id	<input> 要素が属する1つ以上のフォームを指定する
formactionNew	URL	フォームが送信されたときに、入力コントロールを処理するファイルの URL を指定する（type="submit" および type="image" のとき）
formenctypeNew	application/x-www-form-urlencoded multipart/form-data text/plain	サーバへ送信する前に、フォームデータをどのようにエンコードするかを指定する (type="submit" および type="image" のとき)
formmethodNew	get post	アクション URL へデータを送る HTTP メソッドを定義する (type="submit" および type="image" のとき)
formnovalidateNew	formnovalidate	送信されたときにフォーム要素の検証をしないように定義する
formtargetNew	_blank _self _parent _top framename	フォームの送信後に受信した応答を表示する場所を指定する（type="submit" および type="image" のとき）
heightNew	pixels	<input> の高さを定義する (type="image" のとき)
listNew	datalist_id	<input> 要素へ予め定義された選択肢を含む <datalist> を参照する
maxNew	number date	<input> 要素の最大値を指定する
maxlength	number	<input> 要素に入力できる最大文字数を指定する
minNew	number date	<input> 要素の最小値を指定する
multipleNew	multiple	ユーザが <input> 要素に複数の値を入力できることを指定する
name	text	<input> 要素名を指定する
patternNew	regexp	<input> 要素の値を照合する正規表現を指定する
placeholderNew	text	<input> 要素の期待する値を説明する短いヒントを指定する
readonly	readonly	入力フィールドが読み取り専用であることを指定する
requiredNew	required	フォームを送信する前に、入力フィールドに入力していなければならないことを指定する
size	number	<input> 要素の幅を文字数で指定する
src	URL	submitボタンとして使用するイメージのURLを指定する (type="image" のとき)
stepNew	number	入力フィールドへの規則的な数値間隔を指定する
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	表示する <input> 要素のタイプを指定する
value	text	<input> 要素の値を指定する
widthNew	pixels	<input> 要素の幅を定義する (type="image" のとき)

グローバル属性

<input> タグは、HTML5におけるグローバル属性もサポートします。

イベント属性

<input> タグは、HTML5におけるイベント属性もサポートします。