input要素

input要素は、データ入力用のユーザーインターフェースを表す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、フォーム関連要素。
type属性が、hiddenでない場合： インタラクティブ・コンテンツ、パルパブル・コンテンツ、ラベル付け可能フォーム関連要素。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル 空。
属性 グローバル属性。
accept属性、alt属性、autocomplete属性、autofocus属性、checked属性、dirname属性、disabled属性、form属性、formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性、height属性、list属性、max属性、maxlength属性、min属性、minlength属性、multiple属性、name属性、pattern属性、placeholder属性、readonly属性、required属性、size属性、src属性、step属性、type属性、value属性、width属性。
ブラウザ対応

構文

<input>

要点

  • input要素は、データ入力用のユーザーインターフェースを表す要素である。
  • type属性に、入力用ユーザーインターフェースのタイプを指定する。type属性を指定しない場合は、１行テキスト入力欄となる。

属性

任意属性

属性 説明
accept属性 サーバーが受け入れるファイルの種類を指定する属性。
alt属性 画像の代替テキストを指定する属性。
autocomplete属性 オートコンプリートを有効にするかどうかを指定する属性。
autofocus属性 オートフォーカスさせる属性。
checked属性 選択済みにする属性。
dirname属性 入力欄のテキストの方向を送信データに含める属性。
disabled属性 無効にする属性。
form属性 所属するform要素を指定する属性。
formaction属性 フォームデータ送信先URLを指定する属性。
formenctype属性 送信データのエンコード・タイプを指定する属性。
formmethod属性 送信時のHTTPメソッドを指定する属性。
formnovalidate属性 入力内容の検証を無効にするかどうかを指定する属性。
formtarget属性 データ送信先の開き方を指定する属性。
height属性 高さを指定する属性。
list属性 入力候補を示すdatalist要素（データリスト）のid属性値を指定する属性。
max属性 最大値を指定する属性。
maxlength属性 最大文字数を指定する属性。
min属性 最小値を指定する属性。
minlength属性 最小文字数を指定する属性。
multiple属性 複数の値を入力できるようにする属性。
name属性 名前を指定する属性。
pattern属性 正規表現を使った入力規制を指定する属性。
placeholder属性 入力のヒントとなるプレースホルダーを指定する属性。
readonly属性 読み取り専用にする属性。
required属性 入力を必須にする属性。
size属性 幅を文字数で指定する属性。
src属性 画像のURLを指定する属性。
step属性 入力可能な数値の間隔を指定する属性。
type属性 データ入力用ユーザーインターフェースのタイプを指定する属性。
value属性 値を指定する属性。
width属性 幅を指定する属性。

サンプルコード

１行テキスト入力欄

１行テキスト入力欄： <input name="sampleName">

チェックボックス

<label>チェックボックス： <input type="checkbox" name="sampleName" value="sampleValue"></label>

ラジオボタン

<label>ラジオボタン： <input type="radio" name="sampleName" value="sampleValue"></label>

数値入力欄

数値入力欄： <input type="number" name="sampleName" value="sampleValue">

サンプル

HTMLソースコード

<p>
	<label>
		１行テキスト入力欄：
		<input name="sampleText">
	</label>
</p>
<p>
	<label>
		パスワード入力欄：
		<input type="password" name="samplePassword" value="サンプル">
	</label>
</p>
<p>
	<label>
		チェックボックス：
		<input type="checkbox" name="sampleCheckbox" value="sampleCheckboxValue">
	</label>
</p>
<p>
	<label>
		ラジオボタンＡ：
		<input type="radio" name="sampleRadio" value="sampleRadioValueA">
	</label>
	<br>
	<label>
		ラジオボタンＢ：
		<input type="radio" name="sampleRadio" value="sampleRadioValueB">
	</label>
</p>
<p>
	<label>
		数値入力欄：
		<input type="number" name="sampleText" value="50">
	</label>
</p>
<p>
	<label>
		レンジ入力欄：
		<input type="range" name="sampleRange" min="0" max="100" value="50">
	</label>
</p>
<p>
	<label>
		カラー入力欄：
		<input type="color" name="sampleColor" value="#ff0000">
	</label>
</p>

実際の表示