input要素とは

<input（インプット）>要素は、 フォームのコントロール部品を表す要素です。この<input>要素は、type属性を使って、コントロール部品の種類を指定します。なお、基本的には<form>要素内に配置して利用しますが、HTML5からは<form>要素外でもform属性を指定することで利用できるようになりました。

意味・役割
フォームのコントロール部品を表す要素
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ

type属性の値が "hidden" 以外の場合は以下のカテゴリにも含まれる

（HTML5より前：インライン要素）
コンテンツ・モデル（梱包できる要素）
空要素
この要素を配置できる親要素
フレージング・コンテンツが配置できる要素

サンプルコード

input要素のコード例
<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属性

type（タイプ）属性は、コントロール部品の種類を指定する属性です。この属性が省略された場合は、"text" になります。なお、HTML5より前は10種類の部品でしたが、HTML5では、さらに13種類追加され、23種類になりました。ただしブラウザによって実装状況がまちまちですので利用する際は、ブラウザの実装状況を確認してから利用しましょう。

<input type="コントロール部品の種類">
属性値
下記の表を参照
利用できるバージョン（HTML4.01以降）
全てのバージョン
HTML5より前から指定できるtype属性の属性値
属性値 部品の種類
text 1行分のテキストフィールド
password 1行分のパスワードフィールド （表示上は「●」などで隠される）
radio ラジオボタン （複数選択できない選択部品）
checkbox チェックボックス （複数選択可能な選択部品）
file ファイル送信用ボタン
image 画像を使った送信ボタン
submit 送信ボタン
reset リセットボタン
button 汎用ボタン
hidden 非表示項目
HTML5で追加されたtype属性の属性値
属性値 部品の種類
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（ネーム）属性は、 コントロール部品の名前を指定する属性です。このname属性はユーザーが入力した値のラベルになります。従ってユーザーが入力した値を取り出す時に必要な名前になります。一般的には、どの質問に対してのコントール部品なのかがわかるように、質問内容を英語にした名前を指定します。

<input type="コントロール部品の種類" name="コントロール部品の名前">
属性値
文字列
利用できる type属性の属性値
全て
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<p><label>お名前： <input type="text" name="your_name"></label></p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

value属性

value（バリュー）属性は、type属性で指定したコントール部品によって役割が異なります。 type属性が "text" などのテキストフィールドの場合は、初期値を指定し、"radio" や "checkbox" などの選択部品の場合は、そのコントロール部品が選択された時に送信するデータ （値）を指定します。 また、"submit" や "reset" 、"button" などのボタンの場合には、ボタンの上に表示する文字列を指定する属性になります。なお、type属性が "radio" 、 "checkbox" 以外の時は省略可能です。

<input type="コントール部品の種類" name="コントール部品の名前" value="初期値 / 送信する値 / ボタンの文字列">
属性値
  • type属性が "text" などのテキストフィールドの場合： 初期値の文字列
  • type属性が "radio" や "checkbox" などの選択部品の場合： 値として送信する文字列
  • type属性が "submit" や "reset" 、"button" などのボタンの場合： ボタンの上に表示するの文字列
利用できる 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属性

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で追加

form（フォーム）属性は、 <input>要素を、<form>要素の中に配置したかった場合に、関連する<form>要素を指定する属性です。 <input>要素を、<form>要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>要素に指定した、id属性の値を指定します。

<input form="関連するform要素のid名" type="コントール部品の種類" name="コントール部品の名前">
属性値
<form>要素に指定した、id属性の属性値
利用できる type属性の属性値
全て
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<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で追加

autofocus（オートフォーカス）属性は、 ページを表示した時点で、フォーカス （カーソル）を入れて入力可能状態にする属性です。なお、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で追加

autocomplete（オートコンプリート）属性は、 <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"： 会社名
など、詳細はWHATWG Standardを御覧ください。
利用できる 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で追加

required（リクワイアード）属性は、 コントロール部品を必須項目にする属性です。

<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で追加

list（リスト）属性は、 定義済みの入力候補リストを指定する属性です。入力候補リストは、<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で追加

readonly（リードオンリー）属性は、 コントロール部品を読み取り専用にする属性です。この属性を指定しても値は送信されます。値を送信したくない場合は、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で追加

placeholder（プレースホルダー）属性は、 入力に関するヒントを指定する属性です。この属性を使用することで入力欄に予めこの属性のテキストが入り、ユーザーが何を入力すればいいのかというヒントになります。ただし、この属性を<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属性

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属性

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で追加

minlength（ミニレングス）属性は、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で追加

pattern（パターン）属性は、type属性に、"text"または、 "password"などのテキストフィールドが指定されている際の、入力チェックを行う正規表現を指定する属性です。 この属性を使って入力できる書式を限定する際は、title属性を使って、ユーザーにどの書式で入力してもらうかを提供しましょう。

<input type="テキストフィールドのコントール部品" name="コントール部品の名前" pattern="正規表現" title="入力の形式">
属性値
正規表現
利用できる type属性の属性値
"text"、"password"、"search"、"email"、"url"、"tel"
利用できるバージョン（HTML4.01以降）
HTML5 〜
pattern属性で使える正規表現の例
用途 正規表現 説明
郵便番号 "^\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で追加

inputmode（インプットモード）属性は、 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で追加

dirname（ディーアイアールネーム）属性は、 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で追加

multiple（マルチプル）属性は、 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で追加

max（マックス）属性は、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で追加

min（ミニ）属性は、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で追加

step（ステップ）属性は、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属性

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で追加

formaction（フォームアクション）属性は、 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で追加

formmethod（フォームメソッド）属性は、 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で追加

formenctype（フォームエンクタイプ）属性は、 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で追加

formnovalidate（フォームノーバリデート）属性は、 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で追加

formtarget（フォームターゲット）属性は、 type属性に "submit" または、"image"が指定されている場合に、データを受け取るファイルを表示する場所を指定する属性です。属性値にはウインドウまたはタブの名前を指定するか、アンダースコアから始まる特別なキーワードが指定できます。 なお、この属性は<form>要素のtarget属性より優先されます。

<input formtarget="データを受け取るファイルを表示する場所" type="submitまたは、image">
属性値
ウインドウまたはタブの名前または、以下のアンダースコアから始まる特別なキーワード
  • "_blank"： 新しいウインドウまたはタブでリンク先のページを表示
  • "_self"： 現在のウインドウまたはタブでリンク先のページを表示（初期値）
  • "_parent"： <iframe>要素を使っていて親ページがある場合は親のウインドウまたはタブに表示。なければ_seftと同じ
  • "_top"： <iframe>要素を使っていて親ページがある場合は、最も上位の親のウインドウまたはタブに表示。なければ_seftと同じ
利用できる type属性の属性値
"submit"、 "image"
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<form>
  <p><input formtarget="_blank" type="submit" value="送信する"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

src属性

src（エスアールシー）属性は、source（ソース）の略で、 type属性に "image" を指定した際に、送信ボタンの画像ファイルの場所を指定する属性です。

<input type="image" src="画像のファイルパス" alt="画像の代替えテキスト">
属性値
  • この画像の代替えテキスト
利用できる type属性の属性値
"image"
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<p>
  <input type="image" src="images/btn-send.png" alt="送信する">
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

alt属性

alt（オルト）属性は、alternate（オルタネイト）の略です。 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で追加

width（ウィズ）属性は、 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で追加

height（ハイト）属性は、 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属性

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で廃止

ismap（イズマップ）属性は、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で廃止

usemap（ユーズマップ）属性は、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

関連する要素

関連するレッスン