HTMLタグの中に、inputタグというものが登場します。 このタグはどのような時に使えるのか、また複数種類があるけれど、どれを使うのかという基礎をこの記事では紹介します。
HTMLを学習中の方、またinputタグに関して再確認したい際にぜひお読みください。
- inputタグの使い所
- inputタグの種類
- inputタグを使用した入力欄の作り方
inputタグとは
inputタグは、フォーム作成時などに、ユーザーに入力をしてもらうことができるタグです。テキスト入力だけでなく、ラジオボタンやチェックボックス、送信ボタンまで複数種類があり、type属性という部分でこれらの見た目を設定することができます。
inputタグを使用するケース
お問い合わせフォーム
もっとも一般的でよく使用されているのはお問い合わせのフォームを作成するときではないでしょうか。ユーザーの名前やメールアドレスなど、さまざまな情報を入力してもらうために、inputタグを使用することがほとんどです。
検索窓サイト内の情報量が多くなってきた時、ユーザーの利便性のためにもHTMLの検索機能があると便利です。
ZeroPlusメディアでも使われていますね。
このような場合でも、inputタグを使って検索のキーワードを入力する部分を作成することができます。
ファイルのアップロード
画像を添付して欲しいときなど、Webアプリケーション内でファイルの添付機能をつけたい場面があるかもしれません。
そのような場合もinputタグを使用して簡単に設置することができます。全てのブラウザに対応しており、iPhoneやAndoroid端末から見ても問題なく端末内の画像を選択することができます。
labelタグに関して
inputタグと頻繁に一緒に使用されるものにlabelタグがあります。
labelタグは、inputタグが何を入力する場所なのかがわかるように、項目名や説明を入れるために使用します。
入力欄をクリックしなくても、labelタグの部分をクリックするだけで入力モードにしたり、チェックができたりするなどメリットが大きいため、基本的にセットで使うことが多いです。
例としては以下のように記述します。
<label>
<input type="text" name="username">
名前
</label>
よく使用するinputタグの紹介
以下では、フォーム作成を中心に、頻繁に使うことが多いinputタグについて解説します。
text
<input type="text">テキスト入力欄を作成したい時に使用する一番シンプルな形のinputです。type属性にはtextを指定しますが、指定しない場合もデフォルトはtextになります。名前など文字情報に使用します。
<input type="email" placeholder="example@example.com">Eメールアドレスを入力して欲しい時に使用します。type属性はemailです。
見た目はtextに似ていますが、@マークの有無を判断し、間違っていると送信ボタンを押した際にエラーを表示してくれます。
placeholder
上記の例に登場しているplaceholderは入力欄にあらかじめ表示させておくことができるテキストです。どのタイプのinputタグでも使用できます。
tel
<input type="tel" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="080-1234-5678">電話番号を入力する場合はtypeにtelを指定します。そのままだとtextと全く同じになるため、決まったフォーマットでないとエラーが出るようにpattern属性を指定することもあります。
pattern属性
pattern属性は、正規表現というものを使用して、入力できる値を制限しています。
pattern属性に使用する正規表現に関してはこちらのサイトが参考になります。
submit
<input type="submit" value="送信">typeをsubmitにすると、入力した内容を送信することができます。
value属性
typeがsubmitの場合、value属性の中に記述した内容が実際にボタンの中のテキストとなります。
radio
<label>
<input type="radio" name="radio" value="radio1">radio1
</label>
<label>
<input type="radio" name="radio" value="radio2">radio2
</label>複数選択肢から一つを選択するラジオボタンを作成できるのがradioタイプです。
同じラジオボタンのグループとするために、name属性を同じにする必要があります。
上の例では、「radio1」と「radio2」という選択肢を作成しています。
name属性
name属性は、入力された内容の種類を識別できるようにするためのHTMLでいうid属性のようなものです。基本的には、入力して欲しい内容（種類）を表す英単語を入力することが多いです。
value属性
実際に入力されたデータがサーバーに送信される時、radioや以下で説明するcheckboxに関してはこのvalueの値が送信されます。そのため、valueの中に、各選択肢の値を指定する必要があります。
checkbox
<label>
<input type="checkbox" name="checkbox" value="checkbox1">checkbox1
</label>
<label>
<input type="checkbox" name="checkbox" value="checkbox2">checkbox2
</label>
checkboxタイプは、複数選択できる選択肢であるチェックボックスを作ることができます。こちらも、ラジオボタンと同じように、同じname属性を設定することで、同一のグループとなります。そして、value属性に各ボックスの値を指定します。
まとめ
この記事では、inputの基本を紹介しました。
使っていくうちに、type属性や、それぞれの書き方は覚えていけるようになると思います。
今回は
- 入力フォームなど、ユーザーに入力してもらう箇所はinputタグを使用できる
という知識を頭の中に入れておければばっちりです。
適切なinputの属性を学び、フォームなど入力部分をWebサイト内に作る際に生かしてみてください。
