input要素とは
<
要素は、
フォームのコントロール部品を表す要素です。この<input>
要素は、type
属性を使って、コントロール部品の種類を指定します。なお、基本的には<form>
要素内に配置して利用しますが、HTML5からは<form>
要素外でもform
属性を指定することで利用できるようになりました。
- 意味・役割
- フォームのコントロール部品を表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
-
type
属性の値が "hidden" 以外の場合は以下のカテゴリにも含まれる- インタラクティブ・コンテンツ
- パルパブル・コンテンツ
- リスト化、サブミット可能、リセット可能、フォーム関連要素
- コンテンツ・モデル(梱包できる要素)
- 空要素
- この要素を配置できる親要素
- フレージング・コンテンツが配置できる要素
サンプルコード
<form action="" method="post">
<dl>
<dt><label for="user_name">ユーザ名</label></dt>
<dd>
<input type="text" name="user_name" id="user_name">
</dd>
<dt><label for="your_password">メールアドレス</label></dt>
<dd>
<input type="password" name="your_password" id="your_password">
</dd>
</dl>
<p><input type="submit" value="ログイン"></p>
</form>
RERUN
input要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
type属性
属性は、コントロール部品の種類を指定する属性です。この属性が省略された場合は、"text" になります。なお、HTML5より前は10種類の部品でしたが、HTML5では、さらに13種類追加され、23種類になりました。ただしブラウザによって実装状況がまちまちですので利用する際は、ブラウザの実装状況を確認してから利用しましょう。
<input type="コントロール部品の種類">
- 属性値
- 下記の表を参照
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
属性値 | 部品の種類 |
---|---|
text |
1行分のテキストフィールド |
password |
1行分のパスワードフィールド (表示上は「●」などで隠される) |
radio |
ラジオボタン (複数選択できない選択部品) |
checkbox |
チェックボックス (複数選択可能な選択部品) |
file |
ファイル送信用ボタン |
image |
画像を使った送信ボタン |
submit |
送信ボタン |
reset |
リセットボタン |
button |
汎用ボタン |
hidden |
非表示項目 |
属性値 | 部品の種類 |
---|---|
search |
1行分の検索フィールド |
tel |
1行分の電話番号フィールド |
url |
1行分のURLフィールド |
email |
1行分のメールアドレスフィールド |
datetime |
日時入力用部品 (タイムゾーンあり) |
datetime-local |
日時入力用部品 (タイムゾーンなし) |
date |
年月日入力用部品 |
month |
年月入力用部品 |
week |
年週入力用部品 |
time |
時刻入力用部品 |
number |
数値入力用部品 | range |
スライド型入力部品 | color |
色入力用部品 |
<ul>
<li><label>text: <input type="text" name="text"></label></li>
<li><label>password: <input type="password" name="password"></label></li>
<li><label>radio: <input type="radio" name="radio"></label></li>
<li><label>checkbox: <input type="checkbox" name="checkbox"></label></li>
<li><label>file: <input type="file" name="file"></label></li>
<li><label>image: <input type="image" name="image"></label></li>
<li><label>submit: <input type="submit" name="submit"></label></li>
<li><label>reset: <input type="reset" name="reset"></label></li>
<li><label>button: <input type="button" name="button"></label></li>
<li><label>hidden: <input type="hidden" name="hidden"></label></li>
</ul>
<p>下記はHTML5で追加されたコントロール部品</p>
<ul>
<li><label>search: <input type="search" name="search"></label></li>
<li><label>tel: <input type="tel" name="tel"></label></li>
<li><label>url: <input type="url" name="url"></label></li>
<li><label>email: <input type="email" name="email"></label></li>
<li><label>datetime: <input type="datetime" name="datetime"></label></li>
<li><label>datetime-local: <input type="datetime-local" name="datetime-local"></label></li>
<li><label>date: <input type="date" name="date"></label></li>
<li><label>month: <input type="month" name="month"></label></li>
<li><label>week: <input type="week" name="week"></label></li>
<li><label>time: <input type="time" name="time"></label></li>
<li><label>number: <input type="number" name="number"></label></li>
<li><label>range: <input type="range" name="range"></label></li>
<li><label>color: <input type="color" name="color"></label></li>
</ul>
RERUN
name属性
属性は、
コントロール部品の名前を指定する属性です。このname
属性はユーザーが入力した値のラベルになります。従ってユーザーが入力した値を取り出す時に必要な名前になります。一般的には、どの質問に対してのコントール部品なのかがわかるように、質問内容を英語にした名前を指定します。
<input type="コントロール部品の種類" name="コントロール部品の名前">
- 属性値
- 文字列
- 利用できる
type
属性の属性値 - 全て
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p><label>お名前: <input type="text" name="your_name"></label></p>
RERUN
value属性
属性は、type
属性で指定したコントール部品によって役割が異なります。
type
属性が "text" などのテキストフィールドの場合は、初期値を指定し、"radio" や "checkbox" などの選択部品の場合は、そのコントロール部品が選択された時に送信するデータ (値)を指定します。
また、"submit" や "reset" 、"button" などのボタンの場合には、ボタンの上に表示する文字列を指定する属性になります。なお、type
属性が "radio" 、 "checkbox" 以外の時は省略可能です。
<input type="コントール部品の種類" name="コントール部品の名前" value="初期値 / 送信する値 / ボタンの文字列">
- 属性値
- 利用できる
type
属性の属性値 - 全て
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p><label>ユーザーID:<input type="text" name="user_id" value="user-"></label></p>
<p><label><input type="radio" name="gender" value="male"> 男</label></p>
<p><input type="submit" value="送っちゃう!"></p>
RERUN
disabled属性
属性は、
フォームのコントロール部品を無効にする属性です。この属性を指定した <input>
要素の値は送信されません。
<input type="テキストフィールドのコントール部品" name="コントール部品の名前" disabled="disabled">
- 属性値
-
"
disabled
": コントロール部品を無効にする - 利用できる
type
属性の属性値 - 全て
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p><label>ユーザーID (変更できません):<input type="text" name="user_id" disabled="disabled" value="user-0990"></label></p>
RERUN
form属性 HTML5で追加
属性は、
<input>
要素を、<form>
要素の中に配置したかった場合に、関連する<form>
要素を指定する属性です。
<input>
要素を、<form>
要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>
要素に指定した、id
属性の値を指定します。
<input form="関連するform要素のid名" type="コントール部品の種類" name="コントール部品の名前">
<form id="contact_form">
<p><input type="submit" value="送信"></p>
</form>
<p><label>お名前:<input form="contact_form" type="text" name="your_name"></label></p>
RERUN
autofocus属性 HTML5で追加
属性は、
ページを表示した時点で、フォーカス (カーソル)を入れて入力可能状態にする属性です。なお、type
属性に "hidden"の場合は、フォーカスされません。
<input type="コントール部品の種類" name="コントール部品の名前" autofocus="autofocus">
- 属性値
-
"autofocus"
: ページ表示時にフォーカスを入れる - 利用できる
type
属性の属性値 -
"hidden"
以外 - 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>ユーザー名:<input type="text" name="user_name" autofocus="autofocus"></label></p>
autocomplete属性 HTML5で追加
属性は、
<input>
要素に、ブラウザによる自動補完を利用するかを指定する属性です。ただし、現状(2017年1月現在)は、この属性で自動補完を "off" に指定してもブラウザによっては自動補完はされるものもあります。
<input type="テキストフィールドのコントール部品の種類" name="コントール部品の名前" autocomplete="自動補完のする項目">
- 属性値
-
"off"
: 自動補完を OFF にする"on"
: 以前の入力内容をもとに自動補完を ON にする"name"
: 姓名"family-name"
: 性"given-name"
: 名"email"
: メールアドレス"tel"
: 電話番号"url"
: URL"postal-code"
: 郵便番号"country"
: 国"address-level1"
: 都道府県"address-level2"
: 市区町村"address-line1"
: 番地・マンション名 (1行目)"address-line2"
: 番地・マンション名 (2行目)"organization"
: 会社名
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
、"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
、"range"
、"color"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>お名前:<input type="text" name="your_name" autocomplete="name"></label></p>
RERUN
required属性 HTML5で追加
属性は、
コントロール部品を必須項目にする属性です。
<input type="コントール部品の種類" name="コントール部品の名前" required="required">
- 属性値
-
"required"
: 必須項目にする - 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
、"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
、"radio"
、"checkbox"
、"file"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>お名前(必須):<input type="text" name="your_name" required="required"></label></p>
<p><input type="submit" value="送信"></p>
RERUN
list属性 HTML5で追加
属性は、
定義済みの入力候補リストを指定する属性です。入力候補リストは、<datalist>
要素で作成し、id
属性を指定します。そのid名をlist
属性の属性値に指定することで、定義済みの入力候補リストを作成できます。
<input type="テキストフィールドのコントール部品の種類" name="コントール部品の名前" list="datalist要素のid名">
- 属性値
-
<datalist>
要素のid名 - 利用できる
type
属性の属性値 -
"text"
、"search"
、"email"
、"url"
、"tel"
、"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
、"range"
、"color"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>職種:<input type="text" name="job" list="job-lists"></label></p>
<datalist id="job-lists">
<option value="WEBディレクター"></option>
<option value="WEBデザイナー"></option>
<option value="WEBプログラマー"></option>
<option value="フロントエンドエンジニア"></option>
</datalist>
RERUN
readonly属性 HTML5で追加
属性は、
コントロール部品を読み取り専用にする属性です。この属性を指定しても値は送信されます。値を送信したくない場合は、disabled
属性を使用しましょう。
<input type="コントール部品の種類" name="コントール部品の名前" readonly="readonly">
- 属性値
-
"readonly"
: 読み取り専用にする - 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
、"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>ユーザーID:<input type="text" name="user_id" readonly="readonly" value="user-0990"></label></p>
RERUN
placeholder属性 HTML5で追加
属性は、
入力に関するヒントを指定する属性です。この属性を使用することで入力欄に予めこの属性のテキストが入り、ユーザーが何を入力すればいいのかというヒントになります。ただし、この属性を<label>
要素の代わりとして利用することは好ましくありません。
<input type="コントール部品の種類" name="コントール部品の名前" placeholder="入力に関する字ヒント">
- 属性値
- 入力に関するヒントの文字列
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
、"number"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>サイト内検索:<input type="search" name="s" placeholder="検索キーワード"></label></p>
RERUN
size属性
属性は、type
属性に、"text"または、 "password"などのテキストフィールドが指定されている際の、入力フォームに表示される文字数 (半角)を指定する属性です。HTML5より前で、type
属性の値が、これら以外の場合にはピクセル値での指定が可能です。HTML5からは、"text"、"password"、"search"、"tel"、"URL"、"email"のテキストフィールドのみ有効です。
<input type="テキストフィールドのコントール部品" name="コントール部品の名前" size="表示する半角の文字数">
- 属性値
- 入力フォームに表示する半角の文字数 (初期値:"20")
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p><label>お名前:<input type="text" name="your_name" size="40"></label></p>
RERUN
maxlength属性
属性は、type
属性に、"text"または、 "password"などのテキストフィールドが指定されている際の、入力フォームに入力できる最大の文字数 (半角)を指定する属性です。この属性は、type
属性の値が、"text"、"password"、"search"、"tel"、"URL"、"email"のテキストフィールドで有効です。この属性を指定しない場合は最大文字数の制限はされません。
<input type="テキストフィールドのコントール部品" name="コントール部品の名前" maxlength="入力できる最大の半角文字数">
- 属性値
- 入力できる最大の文字数 (半角)
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p><label>郵便番号:〒<input type="text" name="zip" maxlength="8"></label></p>
RERUN
minlength属性 HTML5で追加
属性は、type
属性に、"text"または、 "password"などのテキストフィールドが指定されている際の、入力フォームに入力する最小の文字数 (半角)を指定する属性です。この属性は、type
属性の値が、"text"、"password"、"search"、"tel"、"URL"、"email"のテキストフィールドで有効です。この属性を指定しない場合は最小文字数の制限はされません。
<input type="テキストフィールドのコントール部品" name="コントール部品の名前" minlength="入力する最小の半角文字数">
- 属性値
- 入力する最小の文字数 (半角)
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>お名前(2文字以上):<input type="text" name="your_name" minlength="2"></label></p>
<p><input type="submit" value="送信"></p>
RERUN
pattern属性 HTML5で追加
属性は、type
属性に、"text"または、 "password"などのテキストフィールドが指定されている際の、入力チェックを行う正規表現を指定する属性です。
この属性を使って入力できる書式を限定する際は、title
属性を使って、ユーザーにどの書式で入力してもらうかを提供しましょう。
<input type="テキストフィールドのコントール部品" name="コントール部品の名前" pattern="正規表現" title="入力の形式">
- 属性値
- 正規表現
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
、"email"
、"url"
、"tel"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
用途 | 正規表現 | 説明 |
---|---|---|
郵便番号 | "^\d{3}-\d{4}$" |
「123-4567」の書式 |
電話番号 | "^\d{2,5}-\d{1,4}-\d{4}$" |
国内の「00-0000-0000」や「000-0000-0000」などの書式 |
8文字以上の半角英数字 | "^([a-zA-Z0-9]{8,})$" |
小文字、大文字のアルファベットと数字の組み合わせで8文字以上 |
全角ひらがな | "^[ぁ-ん]+$" |
「あ 〜 ん」の、全角ひらがなのみ(文字エンコーディングは、"UTF-8") |
全角カタカナ | "^[ァ-ンヴー]+$" |
「ア 〜 ン」と「ヴ」、「ー」の、全角カタカナのみ(文字エンコーディングは、"UTF-8") |
<p><label>郵便番号(例:123-4567):〒<input type="text" name="zip" pattern="^\d{3}-\d{4}$" title="「123-4567」の形式で入力して下さい。" maxlength="8"></label></p>
<p><input type="submit" value="送信"></p>
RERUN
inputmode属性 HTML5.1で追加
属性は、
type
属性に "text"、"password"、"search"が指定されている場合に、どのキーボードを表示するかを指定する属性です。
<input type="text、password、search" name="コントール部品の名前" inputmode="キーボードの種類">
- 属性値
-
"verbatim"
: 文章ではない英数字 (Ex.ユーザー名、パスワード、製品コード など)"latin"
: 入力補助があるラテン文字 (人間とコンピュータのコミュニケーション用) (Ex.検索ボックス など)"latin-name"
: 入力補助があるラテン文字 (人名用)"latin-prose"
: 入力補助があるラテン文字 (人間同士のコミュニケーション用) (Ex.電子メール、インスタントメッセージ など)"full-width-latin"
: 入力補助があるラテン文字 ("latin-prose"の全角)"kana"
: 日本語用のひらがな入力、ローマ字入力"kana-name"
: 日本語用のひらがな入力、ローマ字入力 (人名用)"katakana"
: 日本語用のカタカナ入力"numeric"
: 0〜9の数値入力 (Ex.クレジットカードの番号 など)"tel"
: 0〜9、「#」、「*」 の電話番号入力 (可能であれば<input type="tel">
を使用する)"email"
: 「@」などを含んだメールアドレス入力 (可能であれば<input type="email">
を使用する)"email"
: 「/」などを含んだURL入力 (可能であれば<input type="url">
を使用する)
- 利用できる
type
属性の属性値 -
"text"
、"password"
、"search"
- 利用できるバージョン(HTML4.01以降)
- HTML5.1 〜
<p><label>フリガナ:<input type="text" name="kana" inputmode="katakana"></label></p>
RERUN
dirname属性 HTML5で追加
属性は、
type
属性に "text"、"search"が指定されている場合に、テキストの方向 ("ltr"
、"rtl"
)を送信する際に使うキーを指定する属性です。
<input type="text、search、search" name="コントール部品の名前" dirname="テキストの方向の送信に使うキー">
- 属性値
- テキストの方向の送信に使うキー
- 利用できる
type
属性の属性値 -
"text"
、"search"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>お名前:<input type="text" name="your_name" dirname="dirKey"></label></p>
<p><input type="submit" value="送信"></p>
RERUN
multiple属性 HTML5.1で追加
属性は、
type
属性に "email"、"file"が指定されている場合に、複数のデータを送信できるようにする属性です。
<input type="email、file" name="コントール部品の名前" multiple="multiple">
- 属性値
-
"multiple"
:複数の値を送信できるようにする - 利用できる
type
属性の属性値 -
"email"
、"file"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>メールアドレス(「,」区切りで複数入力可):<input type="email" name="your_email" list="contacts" multiple="multiple"></label></p>
<datalist id="contacts">
<option value="info@dummy.creatorquest.jp"></option>
<option value="dummy@dummy.creatorquest.jp"></option>
<option value="example@dummy.creatorquest.jp"></option>
</datalist>
<p><label>添付ファイル(「ctrl」+「クリック」で複数選択可):<input type="file" name="photos[]" multiple="multiple"></label></p>
RERUN
max属性 HTML5で追加
属性は、type
属性に、"date"または、 "number"、"range"などの数値のフィールドが指定されている際の、最大値を指定する属性です。
<input type="数値のコントール部品" name="コントール部品の名前" max="最大値">
- 属性値
- 数値
- 利用できる
type
属性の属性値 -
"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
"range"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>数量(お一人様5点まで):<input type="number" name="quantity" max="5"></label></p>
RERUN
min属性 HTML5で追加
属性は、type
属性に、"date"または、 "number"、"range"などの数値のフィールドが指定されている際の、最小値を指定する属性です。
<input type="数値のコントール部品" name="コントール部品の名前" min="最小値">
- 属性値
- 数値
- 利用できる
type
属性の属性値 -
"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
"range"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>数量(3点から):<input type="number" name="quantity" min="3"></label></p>
RERUN
step属性 HTML5で追加
属性は、type
属性に、"date"または、 "number"、"range"などの数値のフィールドが指定されている際の、増加量を指定する属性です。
<input type="数値のコントール部品" name="コントール部品の名前" step="増加量">
- 属性値
- 数値
- 利用できる
type
属性の属性値 -
"date"
、"datetime"
、"datetime-local"
、"month"
、"week"
、"time"
、"number"
"range"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p><label>工数:<input type="number" name="man-hour" step="0.5"> 人日</label></p>
RERUN
checked属性
属性は、type
属性に、"radio"または、 "checkbox"が指定されている際に、デフォルトで選択状態 (チェックしている状態)にする属性です。
<input type="radioまたは、checkbox" name="コントール部品の名前" checked="checked">
- 属性値
-
"
checked
": 予め選択状態にする - 利用できる
type
属性の属性値 -
"radio"
"checkbox"
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<label>
<input type="checkbox" name="favorite" value="酢こんぶ"> 酢こんぶ
</label>
<label>
<input type="checkbox" name="favorite" value="干し梅" checked="checked"> 干し梅
</label>
<label>
<input type="checkbox" name="favorite" value="ポテチ"> ポテチ
</label>
RERUN
formaction属性 HTML5で追加
属性は、
type
属性に "submit" または、"image"が指定されている場合に、データの送信先を指定する属性です。この属性は<form>
要素のaction
属性より優先されます。
<input formaction="データ送信先のパス" type="submitまたは、image">
- 属性値
- データ送信先のパス
- 利用できる
type
属性の属性値 -
"submit"
、"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form action="conf.php">
<p><input formaction="" type="submit" value="送信する"></p>
</form>
RERUN
formmethod属性 HTML5で追加
属性は、
type
属性に "submit" または、"image"が指定されている場合に、フォームの送信方法を指定する属性です。フォームの送信方法には "get"
と "post"
があります。
なお、この属性は<form>
要素のmethod
属性より優先されます。
<input formmethod="データ送信方法" type="submitまたは、image">
- 属性値
-
- "get": HTTP GETメソッド。データをURLの末尾に付加して送信
- "post": HTTP POSTメソッド。データをHTTPリクエストのリクエストボディに付加して送信
- 利用できる
type
属性の属性値 -
"submit"
、"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form method="post">
<p><input formmethod="get" type="submit" value="送信する"></p>
</form>
RERUN
formenctype属性 HTML5で追加
属性は、
type
属性に "submit" または、"image"が指定されている場合の、コンテンツの種類を指定する属性です。
なお、この属性は<form>
要素のenctype
属性より優先されます。
<input formenctype="コンテンツのMIME Type" type="submitまたは、image">
- 属性値
-
"application/x-www-form-urlencoded"
: 「name属性の名前=value属性の値」の書式でURLエンコードされ送信される"multipart/form-data"
: フォームからファイルを送信する場合に指定"text/plain"
: 変換されずに送信 (action
属性に "mailto:メールアドレス" を指定した際などに指定)
- 利用できる
type
属性の属性値 -
"submit"
、"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form method="post">
<p><input formenctype="multipart/form-data" type="submit" value="送信する"></p>
</form>
RERUN
formnovalidate属性 HTML5で追加
属性は、
type
属性に "submit" または、"image"が指定されている場合、フォームが送信された時に入力内容の妥当性のチェックを無効にする属性です。
なお、この属性は<form>
要素のnovalidate
属性より優先されます。
<input formnovalidate="formnovalidate" type="submitまたは、image">
- 属性値
-
"formnovalidate"
: 妥当性のチェックを無効にする - 利用できる
type
属性の属性値 -
"submit"
、"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form>
<p><label>メールアドレス:<input type="email" name="your_email"></label></p>
<p><input formnovalidate="formnovalidate" type="submit" value="送信する"></p>
</form>
RERUN
formtarget属性 HTML5で追加
属性は、
type
属性に "submit" または、"image"が指定されている場合に、データを受け取るファイルを表示する場所を指定する属性です。属性値にはウインドウまたはタブの名前を指定するか、アンダースコアから始まる特別なキーワードが指定できます。
なお、この属性は<form>
要素のtarget
属性より優先されます。
<input formtarget="データを受け取るファイルを表示する場所" type="submitまたは、image">
- 属性値
- ウインドウまたはタブの名前または、以下のアンダースコアから始まる特別なキーワード
- 利用できる
type
属性の属性値 -
"submit"
、"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<form>
<p><input formtarget="_blank" type="submit" value="送信する"></p>
</form>
RERUN
src属性
属性は、type
属性に "image" を指定した際に、送信ボタンの画像ファイルの場所を指定する属性です。
<input type="image" src="画像のファイルパス" alt="画像の代替えテキスト">
- 属性値
-
- この画像の代替えテキスト
- 利用できる
type
属性の属性値 -
"image"
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<input type="image" src="images/btn-send.png" alt="送信する">
</p>
RERUN
alt属性
属性は、type
属性に "image" を指定した際に、画像を視覚的に見ることができない場合の代替えテキストを指定します。
このalt
属性は、画像を視覚的に見ることができないユーザー(音声ソフトなどを利用しているユーザー)に対して、この画像が何を表しているのかを伝える重要な属性になります。
<input type="image" src="画像のファイルパス" alt="画像の代替えテキスト">
- 属性値
-
- この画像の代替えテキスト
- 利用できる
type
属性の属性値 -
"image"
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<input type="image" src="images/btn-send.png" alt="送信する">
</p>
RERUN
width属性 HTML5で追加
属性は、
type
属性に "image" を指定した際に、画像の幅を指定する属性です。
<input type="image" src="画像のファイルパス" width="画像の幅 (px)" alt="画像の代替えテキスト">
- 属性値
- 画像の幅 (px)
- 利用できる
type
属性の属性値 -
"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<input type="image" src="images/btn-send@2x.png" width="178" height="66" alt="送信する">
</p>
RERUN
height属性 HTML5で追加
属性は、
type
属性に "image" を指定した際に、画像の高さを指定する属性です。
<input type="image" src="画像のファイルパス" height="画像の高さ (px)" alt="画像の代替えテキスト">
- 属性値
- 画像の高さ (px)
- 利用できる
type
属性の属性値 -
"image"
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<input type="image" src="images/btn-send@2x.png" width="178" height="66" alt="送信する">
</p>
RERUN
accept属性
属性は、type
属性が "file" の場合、受け入れるファイルの種類を指定する属性です。複数指定することも可能で、その場合は ",(半角カンマ)" で区切って指定します。
<input type="file" accept="受け入れるファイルの種類" name="コントロール部品の名前">
- 属性値
-
- "."拡張子 (Ex. ".jpg,.gif,.doc")
- パラメータを持たない MIME Type (Ex. "image/jpeg,image/gif,image/png")
- "audio/*": 音声ファイル (HTML5で追加)
- "video/*": 動画ファイル (HTML5で追加)
- "image/*": 画像ファイル (HTML5で追加)
- 利用できる
type
属性の属性値 -
"file"
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p><label>プロフィール写真(画像ファイルのみ):<input type="file" accept="image/*" name="profile_image"></label></p>
RERUN
ismap属性 HTML5で廃止
属性は、type
属性が "image" の場合で、その画像がCGIなどのサーバーサイドのイメージマップの一部であることを指定する属性です。なお、この属性はHTML5で廃止になりました。
<input type="image" ismap="ismap" name="コントロール部品の名前">
- 属性値
-
"ismap"
: 画像がサーバーサイドのイメージマップの一部であることを表す - 利用できる
type
属性の属性値 -
"file"
- 利用できるバージョン(HTML4.01以降)
- HTML4.01、 XHTML1.0、 XHTML1.1
<input type="iamge" src="images/btn_send.png" alt="送信する" ismap="ismap">
usemap属性 HTML5で廃止
属性は、type
属性が "image" の場合で、<map>
要素で作成したイメージマップのname属性を指定する属性です。なお、この属性はHTML5で廃止になりました。
<input type="image" usemap="#イメージマップのname属性の値" name="コントロール部品の名前">
- 属性値
- イメージマップのname属性の値
- 利用できる
type
属性の属性値 -
"file"
- 利用できるバージョン(HTML4.01以降)
- HTML4.01、 XHTML1.0、 XHTML1.1
<input type="iamge" src="images/btn_send.png" alt="送信する" usemap="#dummy-map">
input要素のサンプル
シンプルなお問い合わせフォームの例
<form action="" method="post">
<dl>
<dt><label for="your_name">お名前</label></dt>
<dd>
<input type="text" name="your_name" id="your_name">
</dd>
<dt><label for="your_email">メールアドレス</label></dt>
<dd>
<input type="email" name="your_email" id="your_email">
</dd>
<dt><label for="message">お問い合わせ内容</label></dt>
<dd>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
サイト内検索フォームの例
<form action="">
<div>
<label for="searchbox">サイト内検索</label>
<input type="search" name="s" id="searchbox" placeholder="検索キーワード">
<input type="submit" value="検索">
</div>
</form>
RERUN
ファイル送信フォームの例
ファイルを送信する際は、enctype
属性に "multipart/form-data" を指定する
<form action="" method="post" enctype="multipart/form-data">
<dl>
<dt><label for="attachment">添付ファイル</label></dt>
<dd>
<input type="file" name="attachment" id="attachment">
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
仕様
- HTML5.1
- 4.10.5. The input element
- HTML5
- 4.10.5 The input element
- HTML4.01
- 17.4 The INPUT element
関連する要素
<form>
要素<textarea>
要素<select>
要素<option>
要素<optgroup>
要素<button>
要素<label>
要素<fieldset>
要素<legend>
要素