inputタグとは?|入力フォームの部品を作成する

inputタグとは?|入力フォームの部品を作成する
博士
リンゴくん、以前<form>タグを使ってページ内にフォームを作成する方法を解説したが、その後活用できておるかの?
リンゴ
はい!問い合わせフォームの他にアンケートフォームなんかも作ってみたりしてます。
でも、フォームの部品って本当にたくさんありますよね〜。
博士
そうじゃな。
部品の組み合わせ次第であらゆるフォームを作ることも可能じゃ。
今回は、そのフォーム部品を作成する際に使用する<input>タグについて解説しようかの。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<input>タグとは

 

<input>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / [type=”hidden”]以外の場合:インタラクティブ・コンテンツ、フォーム関連要素(リストされた要素、ラベル付け可能要素、送信可能要素、リセット可能要素) / パルパブル・コンテンツ / [type=”hidden”]の場合:フォーム関連要素(リストされた要素、送信可能要素、リセット可能要素)
利用場所 フレージング・コンテンツが期待される場所
内容


 
 
<input>タグは、フォームを構成するさまざまなコントロール(部品)を作成する際に使用します。

input要素をはじめとするフォームの各部品には、共通して指定できる属性があります。
ただし、input要素のtype属性の値や要素の種類によって、指定できるかどうかが変わってくるので注意が必要です。
 
 

type属性

type属性を指定することで、さまざまな形状のコントロールを作成することができます。
 
 

博士
type属性の値と意味は以下を参考にしてくれ。

type属性の値

ボタン

type=”submit”
送信ボタンを作成する

type=”reset”
リセットボタンを作成する

type=”button”
汎用ボタンを作成する

type=”image”
画像ボタンを作成する

ファイル
隠しデータ

type=”hidden”
画面上には表示されない隠しデータを送信する

type=”file”
ファイルを選択してアップロードする

テキスト

type=”text”
一行の入力欄を作成する

type=”search”
検索用の入力欄を作成する

type=”tel”
電話番号の入力欄を作成する

type=”url”
URLの入力欄を作成する

type=”email”
メールアドレスの入力欄を作成する

type=”password”
パスワード用の入力欄を作成する

 
 

年月日・週・時間

type=”datetime-local”
UTC(協定世界時)によらないローカル日時の入力欄を作成する

type=”date”
日付の入力欄を作成する

type=”month”
月の入力欄を作成する

type=”week”
週の入力欄を作成する

type=”time”
時間の入力欄を作成する

数値・色

type=”number”
数値の入力欄を作成する

type=”range”
特定範囲の数値の入力欄を作成する

type=”color”
色の入力欄を作成する

選択肢・チェック

type=”checkbox”
チェックボックスを作成する

type=”radio”
ラジオボタンを作成する

 
 
type属性やその値が指定されていないinput要素は、「type=”text”」として扱われます。
 
 

accept属性

サーバー側で受け取ることができるファイルの種類のヒントとして、選択可能なファイルのMIMEタイプを指定します。
「,(カンマ)」で区切れば、複数のMIMEタイプを指定することも可能です。
 
 

スポンサーリンク

alt属性

画像が表す内容をテキストで指定します。
このテキストは、何らかの理由で画像が表示されなかった場合に、画像の代わりに表示されるものです。
そのため、あえて画像表示をオフにしているユーザーや、そもそも画像を見ることのできない検索ロボット(クローラー)であっても、画像と同じ意味が伝わるテキストを指定する必要があります。
 
 

autocomplete属性

テキスト入力フィールドなどで、オートコンプリート機能を有効にするかどうかを指定します。

オートコンプリート
以前に入力した内容をブラウザが覚えておき、次回同じフォームにアクセスしたときに、入力候補を予測して自動的に表示する機能。
 
 
指定できる値は、「on」「off」のどちらかです。

  • on
    オートコンプリート機能を有効にする(デフォルト)
  • off
    オートコンプリート機能を無効にする

 
 
autocomplete属性がない場合は、デフォルトの「autocomplete=”on”」(有効)として扱われますが、form要素に「autocomplete=”off”」(無効)が指定されているときは、input要素のオートコンプリート機能も無効になります。
 
 

checked属性

checked属性を指定すると、そのボタンがあらかじめ選択された状態で表示されるようになります。
こちらは、以下のいずれかの形式で指定します。

  • checked
  • checked=”checked”
  • checked=””

 
 

スポンサーリンク

dirname属性

入力値の表記方向を示す情報を、サーバーに送信するための名前を指定します。
例えば、ユーザーが右から左へテキストを入力した場合、右から左の方向を示す情報が、dirname属性に指定された名前とともにサーバーへ送信されます。
 
 

formaction属性

フォームに入力されたデータを処理する、PHPやCGIなどのプログラムのURLを指定します。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたaction属性よりも優先されます。
 
 

formenctype属性

データを送信するときに、どのような形式にエンコードするのかを、MIMEタイプで指定します。
指定できる値は以下の3種類です。

  • application/x-www-form-urlencoded
    デフォルト
  • multipart/form-data
    ファイルを添付するようなフォーム
  • text/plain
    テキストのみのフォーム

 
 
formenctype属性がない場合は、デフォルトの「formenctype=”application/x-www-form-urlencoded”」として扱われます。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたenctype属性よりも優先されます。
 
 

スポンサーリンク

formmethod属性

データをどのような方法で送信するかを指定します。
指定できる値は以下の2種類です。

  • get
    action属性で指定したURLの後に「?」とフォームのデータを追加して送信(デフォルト)
  • post
    フォームのデータのみを本文として送信

 
 
formmethod属性がない場合は、「get」として扱われます。

送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたmethod属性よりも優先されます。
 
 

formnovalidate属性

フォームを送信するときに、入力されたデータが適切かどうかの検証を無効にすることができます。
こちらは、以下のいずれかの形式で指定します。

  • formnovalidate
  • formnovalidate=”formnovalidate”
  • formnovalidate=””

 
 
送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたnovalidate属性よりも優先されます。
 
 

formtarget属性

データの送信結果をどのウィンドウ(またはフレーム)に表示するかを指定できます。
指定できる値は以下の通りです。

_blank 新規のウィンドウ(フレーム)に表示
_self 現在のウィンドウ(フレーム)に表示
_parent 現在のウィンドウ(フレーム)に親があれば、その親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示
ターゲット名 任意の名前を付けたウィンドウ(フレーム)で表示

 
 
送信ボタンを作成するinput要素(「type=”submit”」や「type=”image”」のとき)やbutton要素にこの属性が指定されている場合は、form要素に指定されたtarget属性よりも優先されます。
 
 

スポンサーリンク

height属性

画像の高さを指定します。
 
 

list属性

テキストフィールドなどで、あらかじめ定義しておきたい入力候補の項目を表示させるための属性です。
ユーザーは表示された候補から選択するだけでなく、任意の値を入力することもできます。

入力候補の値はdatalist要素で定義します。
 
 

maxlength属性

コントロールに入力できる最大の文字数を指定します。
 
 

スポンサーリンク

min属性 / max属性

min属性はコントロールに入力できるデータの最小値を、max属性は最大値を指定します。
指定できる値はtype属性の値によって異なり、それぞれ規定の書式で指定します。

type属性の値 書式 指定例
datetime YYYY-MM-DDThh:mm:ssZ 2016-08-15T09:30Z
2016-08-15T09:30:00Z
date YYYY-MM-DD 2016-08-15
week YYYY-Www 2016-W25
month YYYY-MM 2016-08
time hh:mm:ss 09:30
09:30:00
datetime-local YYYY-MM-DDThh:mm:ss 2016-08-15T09:30
2016-08-15T09:30:00
number 数値 5
range 数値 5

 
 
例えば、次のようになります。
 
 

「type=”date”」で値を1990年より前に制限したい場合

 
 

「type=”number”」で値を2以上に制限したい場合

 
 

multiple属性

そのコントロールで2つ以上の値を指定、または入力できるようにします。
こちらは、以下のいずれかの形式で指定します。

  • multiple
  • multiple=”multiple”
  • multiple=””

 
 

pattern属性

コントロールに入力されたデータのチェックに使うパターン(書式)を、JavaScriptと同じ正規表現で指定します。
pattern属性がある場合、入力されたデータが指定されたパターンと完全に一致しない限り、送信できないようになります。

なお、pattern属性を指定したinput要素では、title属性に正規表現のパターンの説明を記述します。
このtitle属性の内容は、データが指定されたパターンに一致しなかった場合に表示されるエラーメッセージや、コントロールにマウスカーソルを合わせたときに表示されるツールチップとして利用されます。
 
 

スポンサーリンク

placeholder属性

ユーザーに対して、テキストフィールドに何を入力したらいいのか、簡単なヒントとして表示させるテキストを指定します。
この属性に対応したブラウザでは、placeholder属性に指定した値が、ヒントとしてあらかじめテキストフィールドに表示されます。

 
 

readonly属性

読み取り専用にして、ユーザーが入力値を編集できないようにします。
こちらは、以下のいずれかの形式で指定します。

  • readonly
  • readonly=”readonly”
  • readonly=””

 
 

required属性

そのコントロールへの入力が必須であることを指定します。
こちらは、以下のいずれかの形式で指定します。

  • required
  • required=”required”
  • required=””

 
 
required属性がある場合、コントロールにデータが入力されない限り、送信できないようになります。
 
 

スポンサーリンク

size属性

入力フィールドの幅を、表示される文字数(整数)で指定します。
 
 

src属性

画像ファイル名(url)を指定します。
 
 

step属性

コントロールに入力できるデータが、いくつずつ変化するのかを指定します。
例えば、min属性の値が5でstep属性に3が指定されている場合は、入力可能なデータは「5、8、11…」と変化します(min属性が指定されていない場合は、最小値は「0」として処理されます)。

step属性に指定できる値は、type属性の値によって異なり、以下のようになります。

type属性の値 ステップの単位 デフォルトのステップ
datetime 60秒
date 1日
week 1週間
month 1ヶ月
time 60秒
datetime-local 60秒
number 1 1
range 1 1

 
 

スポンサーリンク

width属性

画像の横幅を指定します。
 
 

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 

value属性

コントロールのデフォルト値、またはボタンに表示するテキストを指定します。
value属性の値は、name属性の値とセットで送信されます。
 
 

入力欄のデフォルト値

入力欄に表示されるデフォルト値として使用されます。
入力欄の内容が書き換えられた場合は、そちらが送信されます。
デフォルト値を設定しない場合、value属性は不要です。

 
 

ボタンに表示するテキスト

ボタンに表示するテキストとして使用されます。
この値を送信する必要がない場合は、name属性を省略して次のように記述します。

 
 

まとめ

フォームのコントロール(部品)を作成する際は、<input>タグを使用します。
 
 

博士
フォームを作成する際は、ぜひこのページを参考にしてくれ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








inputタグとは?|入力フォームの部品を作成する