【inputタグ】フォームの中で入力や編集、ボタンなどのフォームコントロールを作成してみよう！- ノブレコ

★<input>タグの特徴

<input>の説明

<input>とは

<form>タグの中で使用する要素で、データの入力欄や編集、ボタンの設置などに使用す「フォームコントロールを作成」するためのタグで、主に<form>タグの中で使用されます。

フォームコントロールはフォーム内で使う様々な部品の総称ですが、この部品を<input>要素の中に指定し、それが何を表して、どんな動作にするのかを決めるには、「type属性」を使って指定することになります。

例えば、<input>要素にtype属性で部品を指定すれば、テキストボックス、チェックボックス、送信ボタン、リセットボタン、実行ボタンなどを作成することができるようになります。

そして<input>要素に入力された情報内容は、サーバーに送信されます。

■使用目的

<input>タグは、<form>タグの中に記述し、フォーム内で様々な役割や動作を持った「構成部品」を作成するために使います。

構成部品にはテキストボックス、チェックボックス、送信ボタン、リセットボタン、実行ボタンなどの機能をもったものがありますが、これらに入力されたデータはサーバーに送られます。

また、サーバーへ送るようにするには、<input>タグのname属性に付けているデータ名と値をまとめ合わせ、<form>タグのaction属性で指定したサーバー上のファイルに、<form>タグのmethod属性で指定した転送方法で送信できるようになります。

■使われる属性

使用上の注意点

① 基本的には<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>タグで作成したのであれば、その都度学んでみるという方法が良いかもしれません。

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん(❁´◡`❁)