ZeroPlus Media > L_HTML/CSS > Step7 > よく使うinputタグの種類と使い方を学ぼう

よく使うinputタグの種類と使い方を学ぼう

2022/07/14

2022/09/30

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になります。名前など文字情報に使用します。

email

<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属性に各ボックスの値を指定します。