【inputタグ】フォームの中で入力や編集、ボタンなどのフォームコントロールを作成してみよう!- ノブレコ
★<input>タグの特徴
・タグのカテゴリ ―― インライン要素、空要素。
・コンテンツモデル ―― フローコンテンツ、フレージングコンテンツ、さらにリスト化・サブミット可能・リセット可能なフォーム関連要素。(type属性値がhiddenでない場合は、ラベル付け可能要素、パルパブルコンテンツ、インタラクティブコンテンツ)
・タグの省略 ―― 開始タグが必要。(終了タグは記述してはいけない)
・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― type属性の値によって変化する。
・type=button
→ buttonロール
・type=checkbox
→ checkboxロール
・type=email list
属性なし → textboxロール
list
属性あり → comboboxロール
・type=image
→ buttonロール
・type=number
→ spinbuttonロール
・type=radio
→ radioロール
・type=range
→ sliderロール
・type=reset
→ buttonロール
・type=search list
属性なし → searchboxロール
list
属性あり → comboboxロール
・type=submit
→ buttonロール
・type=tel list
属性なし → textboxロール
list
属性あり → comboboxロール
・type=text list
属性なし → textboxロール
list
属性あり → comboboxロールtype=url list
属性なし → textboxロール
list
属性あり → comboboxロールtype=color・date・datetime・local・file・hidden・month・password・time・week
→ 対応するロールは無し。
<input>の説明
<input>とは
<form>タグの中で使用する要素で、データの入力欄や編集、ボタンの設置などに使用す「フォームコントロールを作成」するためのタグで、主に<form>タグの中で使用されます。
フォームコントロールはフォーム内で使う様々な部品の総称ですが、この部品を<input>要素の中に指定し、それが何を表して、どんな動作にするのかを決めるには、「type属性」を使って指定することになります。
例えば、<input>要素にtype属性で部品を指定すれば、テキストボックス、チェックボックス、送信ボタン、リセットボタン、実行ボタンなどを作成することができるようになります。
そして<input>要素に入力された情報内容は、サーバーに送信されます。
■使用目的
<input>タグは、<form>タグの中に記述し、フォーム内で様々な役割や動作を持った「構成部品」を作成するために使います。
構成部品にはテキストボックス、チェックボックス、送信ボタン、リセットボタン、実行ボタンなどの機能をもったものがありますが、これらに入力されたデータはサーバーに送られます。
また、サーバーへ送るようにするには、<input>タグのname属性に付けているデータ名と値をまとめ合わせ、<form>タグのaction属性で指定したサーバー上のファイルに、<form>タグのmethod属性で指定した転送方法で送信できるようになります。
■使われる属性
・accept
・alt
・autocomplete
・capture
・checked
・dirname
・disabled
・form
・formacrion
・formmethod
・formnovalidate
・formtarget
・height
・list
・max
・maxlength
・min
・minlength
・multiple
・name
・pattern
・placeholder
・readonly
・required
・size
・src
・step
・type
・value
・width
使用上の注意点
① 基本的には<form>タグの中で使用する。
<input>タグはフォーム関連にだけに使用するので、<form>~/form>に内包して使用します。
② type属性の使用は必須。
<input>タグには、基本的にtype属性を指定し、その属性値でフォーム内でなにを表して、どういう動作をさせるのかを決める重要なものですので、必ず記述するようにしましょう。
またname属性は必須ではありませんが、サーバーと送信のやり取りが必要な場合に必要な属性で、このname属性で指定したデータ名や値で各項目を識別させる際には使用します。
③ <input>タグはtype属性やその属性値にとって、大きく見た目が違う。
type属性にはそれぞれフォームの型のようなものが複数あり、使用用途に応じてその見た目と機能が変化します。
内容モデル
<input>要素の内容モデルは「nothing」です。
空要素のため、内容をもつことはできませんし、終了タグの記述も必要ありません。
このことは、どんなtype属性を組み合わせても変わることはありません。
アクセシビリティでの注意点
<input>要素は、標準でのARIAロールがtype属性の値によって変化します。
ロールの一覧は、上に前述していますが、どれもスクリーンリーダーなどの読み上げに影響するロールもあれば、影響しないロールもあります。
例を挙げると、「type="submit"」「type="reset"」「type="button"」の属性値がありますが、これらのARIAロールは「buttonロール」に該当します。このbuttonロールを持っている場合、スクリーンリーダーはvalue属性の値を読み上げたあとに「送信ボタン」または「ボタン」などと読み上げます。
<input>の記述例
■1行のプレーンテキストを表す例
★HTML
★実行結果
type="text"とtype="search"は一行の入力欄を表すもので、改行をすることはできません。
value属性で初期値の変更は可能ですが、その値に改行が含まれているとエラーになってしまい、改行部分が取り消されます。
ちなみにtype="text"とtype="search"の違いは、検索に適したインターフェイスを提供するかどうかというところで、例えば、入力ミスをした場合で、入力欄にテキストをクリアにする「×」が付いているかなどの違いがあります。
まとめ
この記事では、<input>タグについての解説をいたしました。
この要素は、扱える属性が多く、必要な機能がたくさんあるので、webサイトを作成するときにとても強力な要素となります。
今回は、その多岐に渡る内容の一端だけを解説していますが、もし自身のホームページ作成などで、入力欄や各種ボタンなどの部品を<input>タグで作成したのであれば、その都度学んでみるという方法が良いかもしれません。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(❁´◡`❁)