HTML & CSS

最終更新日：
公開日：

リファレンス

HTML

インプット

input要素

フォーム内における、入力するためのインターフェースを表します。

サンプルコード

<form method="post" action="">
	<p>氏名</p>
	<input type="text" name="nameForm" value="">
	<p>フリガナ</p>
	<input type="text" name="furiganaForm" value="">
</form>

  • カテゴリー

    フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ（type属性が「hidden」以外の場合）、リスト化・ラベル付可・送信可・リセット可・フォーム要素への関連付け可・フォーム関連コンテンツ（type属性が「hidden」以外の場合）、リスト化・送信可・リセット可・フォーム要素への関連付け可・フォーム関連コンテンツ（type属性が「hidden」の場合）、パルパブルコンテンツ（type属性が「hidden」以外の場合）

  • コンテンツモデル

    なし（空）

  • 使用ケース

    フレージングコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

accept

ファイルアップロードの時、サーバーが受け取ることが可能なファイルの種類を指定します。値はMIMEタイプ、または拡張子を指定します。複数指定する場合は「,（カンマ）」で区切って指定します。

alt

画像の代替えテキストを指定します。

autocomplete

ブラウザによる自動入力機能を設定します。

  • on

    ユーザーが以前に入力した値をもとに自動補完

  • off

    ブラウザによる自動補完を行わない設定になります。

autofocus

ページ読み込み時、自動的にフォーカスします。論理属性です。

checked

初期状態で「選択済み（チェック済み）」にします。論理属性です。

dirname

フォーム送信時、テキストの方向を指定します。

  • ltr

    左から右

  • rtl

    右から左

disabled

こちらの属性を指定すると入力機能が無効（入力不可）となります。論理属性です。

form

form要素のid属性を指定し、関連付けすることができます。

formaction

関連付けしたform要素のaction属性を指定します。関連しているform要素で既に指定していても、この属性で指定した値が優先されます。

formenctype

関連付けしたform要素のenctype属性を指定します。関連しているform要素で既に指定していても、この属性で指定した値が優先されます。

formmethod

関連付けしたform要素のmethod属性を指定します。関連しているform要素で既に指定していても、この属性で指定した値が優先されます。

formnovalidate

関連付けしたform要素のnovalidate属性を指定します。論理属性です。

formtarget

関連付けしたform要素のtarget属性を指定します。関連しているform要素で既に指定していても、この属性で指定した値が優先されます。

height

入力コントロールの高さを指定します。

inputmode

選択した際の入力モードの指定。

list

入力候補リストを表示したい場合に、datalist要素のid属性を指定します。表示するリストはdatalist要素で定義を行います。

max

入力値の最大値を指定します。

maxlength

入力できる最大文字数を指定します。

min

入力値の最小値を指定します。

minlength

最低限入力してもらう文字数を指定します。

multiple

複数の選択を許可する場合に指定します。論理属性です。

name

フォームが送信されたとき、サーバーサイドで処理する際の名前を指定します。

pattern

入力値が正しいか完全一致による確認を行います。form要素にnovalidate属性が指定されているか、対象の入力要素にdisabled属性、またはreadonly属性が指定されている場合、この属性は無視されます。

placeholder

ダミーテキスト（サンプル）を表示したい場合に値を指定します。

readonly

閲覧者が入力値を編集できない状態にしたい場合に指定します。論理属性です。

required

入力必須の項目にしたい場合に指定します。form要素にnovalidate属性が指定されているか、対象の入力要素にdisabled属性、またはreadonly属性が指定されている場合、この属性は無視されます。論理属性です。

size

入力欄の表示する幅を文字数で指定します。初期状態は「20」です。

src

type属性に「image」を指定した場合など、画像を使う場合に画像パスを指定します。

step

入力値の単位を指定します。type属性に「number」を指定した場合などに使用し、step属性の値を「5」と指定すると、5の倍数の数字を選択入力できるようになります。

type

入力コントロールのタイプを指定します。

  • hidden

    表示しない入力コントロール。データの受け渡しで使用します。

  • text

    1行テキスト入力欄。初期値です。

  • search

    検索ワード入力欄。

  • tel

    電話番号の入力欄。

  • url

    URLの入力欄。

  • email

    メールアドレスの入力欄。

  • password

    パスワードの入力欄。入力値は表示されません。

  • date

    日付の入力欄。対応ブラウザではカレンダーによる日付入力を行えますが、非対応ブラウザでは通常のテキスト入力欄となります。

  • time

    時間の入力欄。対応ブラウザでは時刻表示による入力を行えますが、非対応ブラウザでは通常のテキスト入力欄となります。

  • number

    数値の入力欄。整数を入力することができます。

  • range

    スライダーによる数値の入力欄。

  • color

    RGBの入力欄。対応ブラウザではカラーホイールなど数種類のコントローラによる入力を行えますが、非対応ブラウザでは通常のテキスト入力欄となります。

  • checkbox

    チェックボックス形式の入力欄。複数選択可能な入力項目などで使用。

  • radio

    ラジオボタン形式の入力欄。複数の選択肢から、1つだけ選択する入力項目などで使用。

  • file

    ファイルをアップロードするための入力コントローラ。ローカルからファイルを選択する形となります。

  • submit

    送信ボタン。関連するフォームの送信を行います。

  • image

    画像を使用した送信ボタン。機能は「submit」と同様です。

  • reset

    リセットボタン。関連するフォームの入力内容をリセットします。

  • button

    特に何もしないボタン。通常はJavaScriptによる動作を結びつけて使用します。

value

フォーム送信時、サーバーサイドへ渡す値を指定します。

width

入力コントロールの幅を指定します。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

前のページへ 一覧に戻る 次のページへ