HTMLを学んでいると、多くの場面で見かける<input>タグ。画像表示やチェックボックス、日付表示など様々な範囲で使用されています。
inputタグはどんな使い方ができる？
今回は、inputタグの
・基本的な使い方
・inputタグとlabelタグを組み合わせる方法
について説明します。この記事で<input>タグの使い方を、徹底的にマスターしましょう！
目次
inputタグとは
inputタグの読み方
inputタグは「インプットタグ」と読みます。inputは英語で『入力』という意味を表します。
inputタグの説明
inputタグは、Webページのフォーム内で表示される、チェックボックスや入力のためのテキストエリア、送信ボタンなど、フォームの部品を定義するタグです。
inputタグで利用できる属性
inputタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| accept | サーバーが受け取ることのできるファイルの種類を表す属性です。MINEタイプ（文書や画像など）やファイルの拡張子を指定することができます。 |
| alt | HTML文中のimg要素などが何らかの原因によって表示されなかったときに、その要素の代わりにブラウザに反映される代わりのテキストを指定する属性です。 |
| autocomplete | 要素に入力される内容をブラウザ側で自動補完するのを許可するかどうかを指定する属性です。 |
| autofocus | ブラウザが読み込みをしたときに、要素に自動でフォーカスをあてるかどうかを決める事ができる属性です。 |
| capture | ユーザーがカメラやビデオ、音声レコーダーなどのデバイスを用いて要素のキャプチャを許可するための属性です。accept属性と共に用いられます。 |
| checked | ページ読み込み時に要素にチェックを入れておくかどうかを指定する属性です。 |
| dirname | input要素で、入力されるテキストの文字方向を右書き・左書きのどちらかに指定する属性です。 |
| disabled | ユーザーによる操作を無効にするかどうかを指定する属性です。 |
| form | input要素が所属するform要素を指定する属性です。 |
| formaction | その要素の送信先を指定する属性で、form要素で定義された送信先を上書きします。 |
| formmethod | 送信ボタンの要素で、送信メソッド(GET, POST)を指定する属性です。method属性で定義された送信メソッドを上書きします。 |
| formnovalidate | 送信ボタンの要素で、送信されるデータの入力状態に関するチェックを行わないようにする属性です。novalidate属性で定義された条件を上書きします。 |
| height | 要素の高さを指定する属性です。 |
| list | input要素でテキストを入力する際、入力候補としてdatalist要素を割り当てるための属性です。datalistのid属性と紐つきます。 |
| max | 要素の最大値を指定する属性です。 |
| maxlength | 要素の最大文字数を指定する属性です。 |
| min | 要素の最小値を指定する属性です。 |
| minlength | 要素の最小文字数を指定する属性です。 |
| multiple | 複数の値を指定出来るかどうかを定義する属性です。 |
| name | 要素の名前を定義する属性です。 |
| pattern | input要素で送信されるデータのチェック時に使う正規表現を定義する属性です。 |
| placeholder | フォームの入力例や入力内容の説明を指定する属性です。 |
| readonly | 入力できる要素を読み取り専用にしてユーザーが入力できないようにする属性です。 |
| required | 入力が必須の要素かどうかを定義する属性です。 |
| size | 要素の幅を指定する属性です。要素のtype 属性がtextもしくはpasswordのときは、文字数を指定します。 |
| src | 画像やスクリプトなど、要素の参照場所を指定する属性です。 |
| step | input属性で入力可能なデータがいくつおきに変化するのかを指定する属性です。 |
| type | 要素の型を指定する属性です。 |
| value | その要素で表示する初期値を指定する属性です。 |
| width | 要素の幅を指定する属性です。 |
inputタグで使用できる型
inputタグではtype属性で以下の型を使用できます。記述方法と表示例は以下の通りです。
|
1 |
<input type="使用する型"> |
See the Pen
dyXQybQ by rabbittyu (@rabbittyu)
on CodePen.
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 1 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 1 |
| Samsung Internet | 完全対応 |
inputタグの基本的な使い方
inputタグの使い方
inputタグで使用できる型にもありましたが、inputタグはtype属性と組み合わせて使われることがほとんどです。
ここではtype属性を利用して、ラジオボタンを利用したアンケートを作成してみました。inputタグの属性でnameを指定しているため、「ア」か「イ」を必ず1つ選択しなければなりません。
See the Pen
input by rabbittyu (@rabbittyu)
on CodePen.
複数の回答を可能にする、チェックボックスを作成することもできます。ユーザーに好きな季節を訪ね、「春」「夏」「秋」「冬」の中から選択を促します。チェックボックスなので複数選択可能です。
inputタグを使用する場合は<ul>タグと<li>タグでリストを作成し、inputタグごとに<li></li>の中に入れると、扱いやすくなります。その場合は、必ずCSSでlist-style: none;を適用し、先頭の・を削除するようにしてください。
See the Pen
input 2 by rabbittyu (@rabbittyu)
on CodePen.
inputタグの応用的な使い方
Webページを作成する際は、ユーザーにとっての使いやすさを意識しなければなりません。これがユーザビリティとアクセシビリティの向上です。
アクセシビリティ：近づきやすさ・利用のしやすさ
labelタグを使わない場合は、ラジオボタン本体しかクリックすることができませんが、labelタグを設定することで「女」「男」の選択肢の部分をクリックしても、ラジオボタンに影響を与えるようになりました。
See the Pen
input３ by rabbittyu (@rabbittyu)
on CodePen.
今回はinputタグについてご紹介しました。
- inputタグはtype属性とセットで使用することが多い
- inputタグはフォームの部品を作成する
- ユーザビリティ・アクセシビリティ向上のためにlabelタグと関連付けて使う
この3つのポイントさえ覚えておけば、フォームの中身は作成できます。ですが最後の使いやすさについても意識して作成することで、より良いサイトが作成できるでしょう。
参考文献：
MDN web docks <input>:入力(フォーム入力)要素
ユーザビリティ – Wkipedia
アクセシビリティ – Wikipedia
