LINEで現役エンジニアに直接質問してみよう!登録無料

HTML inputタグの使い方と23種類のtype属性を一覧でサンプル付き解説

この記事では<input>タグの種類について主に解説します。

inputの基礎知識: formとは?簡単に概要

formはユーザーからの情報をサーバーに送信する機能の1つです。情報を送信する先や送信方法を<form>で設定し、<input>で情報入力欄を設定します。

formは様々なところで使われています。

ログインフォーム

検索フォーム

このform内で使われているテキスト入力欄やチェックボックスの1つ1つは<input>で作られています。inputには実に様々な種類や機能があり、現在(2019年12月)では23種類あります。

  • button: 既定の動作を持たないプッシュボタン。
  • checkbox: 選択または未選択のうちひとつの値をとることができるチェックボックス。
  • color: HTML5 色を指定するためのコントロール。色を選択するユーザーインターフェイスは、単純な色を文字列で受け付ける以上の機能は要求されていません (詳細)。
  • date: HTML5 日付 (時刻を除く年、月、日) を入力するためのコントロール。
  • datetime-local: HTML5 タイムゾーン情報がない日付と時刻を入力するためのコントロール。
  • email: HTML5 電子メールアドレスを入力するための欄。
  • file: ユーザーにファイルを選択させるコントロール。コントロールで選択できるファイルの種類を定義するには、accept 属性をして下さい。
  • hidden: 非表示のコントロールですが、その値はサーバーに送信されます。
  • image: 画像による送信ボタン。画像のソースを定義するために src 属性を、また代替文字列を定義するために alt 属性を使用しなければなりません。 height および width 属性を使用して、画像の寸法をピクセル値で定義できます。
  • month: HTML5 タイムゾーン情報がない年と月を入力するためのコントロール。
  • number: HTML5 数値を入力するためのコントロール。
  • password: 入力値を隠す1行テキストフィールド。入力可能な最大文字数を指定するには、 maxlength 及び minlength 属性を使用してください。
    • メモ: パスワードなどの機密情報を扱うフォーム (例えばログインフォーム) は HTTPS で提供するべきです。 Firefox は、安全でないログインフォームに対して警告を表示する仕組みを複数実装しています。安全でないパスワードをご覧ください。他のブラウザーも、同様の仕組みを実装しています。
  • radio: 複数の選択肢からひとつの値を選択できるラジオボタン。
  • range: HTML5 正確な値であることが重要ではない数値を入力するためのコントロール。
  • reset: フォームのコントロールを既定値にリセットするボタン。
  • search: HTML5 検索文字列を入力するための1行入力フィールド。改行は自動的に入力値から取り除かれます。
  • submit: フォームを送信するボタン。
  • tel: HTML5 電話番号を入力するためのコントロール。
  • text: 1行入力フィールド。改行は自動的に入力値から取り除かれます。
  • time: HTML5 タイムゾーン情報がない時刻を入力するためのコントロール。
  • url: HTML5 URL を入力するための欄。
  • week: HTML5 年と週番号で構成される日付を入力するためのコントロール。週番号はタイムゾーンを伴いません。

引用: https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

inputの基本的な使い方

<input>には必須の属性が2つあります。

  • type属性: テキスト、チェックボックスといったユーザーからの見た目を変化させます。
  • name属性: サーバーに送信する名前(キー又は索引名)を設定します。

type属性とは?

type属性は、テキストやチェックボックスといったユーザーが操作するパーツの見た目を変化させます。 type="password"と設定すれば、「●」で隠されたテキストとして入力できるようになりますし、type="checkbox"とすれば同意画面などでよく使われるチェックボックスになります。

name属性とは?

name属性は、サーバー側にデータを送った後、正しく効率よくユーザーが入力してくれたデータを処理するためのキーや索引のことです。 name属性が指定されなかったり、空欄だったりした場合は、その入力欄の値はフォームと共に送信されません。

inputのよく使うパーツ一覧紹介(基本編)

inputでよく使われるパーツを紹介します。まず覚えるべきはこの〇〇種類です。これらが特に多く使われます。

text: テキスト

ソースコード

ブラウザ表示

1行のテキスト入力欄を作成します。

MEMO

複数行テキスト入力欄には<textarea>という、別のタグを使用します。

checkbox: チェックボックス

ソースコード

ブラウザ表示

チェックボックスを作成します。何個でも作成でき、複数選択が可能です。

radio: ラジオボタン

ソースコード

ブラウザ表示

ラジオボタンを作成します。name属性の同じラジオボタンから1つしか選択できません。

password: パスワード

ソースコード

ブラウザ表示

パスワード入力欄を作成します。表示上、全て「●」で塗りつぶされて、文字数しかわからなくなります。

hidden: 閲覧、編集不可のデータ

ソースコード

ブラウザ表示

hiddenを選択すると、ユーザーのブラウザ上にデータは表示されません。フォームデータ改善を防ぐトークン(ランダムな文字列)を入れたり、更新する情報idを入れたりといった使い方をされます。

見えないですがかなり重要な役割を果たしています。

file: ファイルのアップロード

ソースコード

ブラウザ表示

ファイルをアップロードするためのパーツを設置できます。

accept属性を使えば、アップロードできるファイルの種類を制限することができます。具体的には、下記のようにします。

ソースコード

ブラウザ表示

注意

送信されたデータはサーバー側で必ずバリデーション(値が正しいか検証)してください。ブラウザ側からはデータ形式を一応制限できますが、データ内容を偽装しようと思えば簡単にできてしまうことも忘れないでください。

submit: フォームを送信するボタン

ソースコード

ブラウザ表示

inputで情報を送信するボタンを作成することができます。しかし、扱いやすさから<botton>タグの方がよく使われます。

image: 画像送信ボタン

ソースコード

ブラウザ表示

submitの画像バージョンです。src属性に画像のURLを入れることで画像を選択でき、送信ボタンにすることができます。

button: ボタン

ソースコード

ブラウザ表示

機能がない、見かけだけのボタンを作成することができます。押してもデータは送信されません。submitと同じように送信する役割をもたせたいなら、javascriptを使う必要があります。

reset: 入力欄を全て空白にする

ソースコード

ブラウザ表示

リセットボタンを作成します。ボタンがおされると、form内の情報がすべて削除され、まっさらな状態に戻ります。 使い所が難しく、殆どのformで使われることはありません。

inputのよく使うパーツ一覧紹介(応用編)

「inputのよく使うパーツ一覧紹介(基本編)」で紹介したパーツでは、機能不足だった場合に使うといいでしょう。

email: メールアドレス

ソースコード

ブラウザ表示

<input type="text">をメールアドレス入力専用にしたパーツです。メールアドレスの形式でない文字列を送信しようとすると、アラートが出て誤送信を防ぐことができます。 今まではjavascriptで検証やアラートを表示しなくてはいけなかったのが、簡単に設置できるようになりました。

number: 半角数字(数値を入力)

ソースコード

ブラウザ表示

<input type="text">を数値入力専用にしたパーツです。数値以外を送信しようとすると、アラートが出て誤送信を防ぐことができます。

range: 範囲を選択

ソースコード

ブラウザ表示

rangeを使うと、minからmaxまでの値をスライドバーをドラッグすることで設定できるようになります。 直感的に操作することができますが、細かい調節は不得意です。細かい調節も行いたいなら、<input type="number">とjavascriptを組み合わせる必要があるでしょう。

search: 検索入力欄

ソースコード

ブラウザ表示

<input type="text">を検索ワード(クエリ)入力専用欄にしたパーツです。基本は<input type="text">と同じですが、主に下記の2点の機能が追加されています。

  • 検索欄右側に「✖」のマークが出て、押せば入力したワードをリセットできる
  • datalistを組み合わせることで、入力候補を一覧で表示させることができる

tel: 電話番号

ソースコード

ブラウザ表示

<input type="text">を電話番号専用にしたパーツです。電話番号以外を送信しようとすると、アラートが出て誤送信を防ぐことができます。 電話番号の桁数、形式は世界中に複数存在します。そこで、patternという属性を同時につかうことで、日本の電話番号だけ入力できるように出来ます。

url: URL

ソースコード

ブラウザ表示

<input type="text">をURL専用にしたパーツです。「http://」又は「https://」から始まるURL以外を送信しようとすると、アラートが出て誤送信を防ぐことができます。

date: カレンダーから年月日を入力する

ソースコード

ブラウザ表示

年月日を入力できるパーツです。

month: 年月

ソースコード

ブラウザ表示

年月だけを入力できるパーツです。

time:時間+分

ソースコード

ブラウザ表示

時間と分だけを入力できるパーツです。

week: 週

ソースコード

ブラウザ表示

月と週を入力できるパーツです。週の初めは月曜日です。

datetime-local: 年月日 + 時間

ソースコード

ブラウザ表示

年月日と時間を一気に入力出来ます。

color: カラー入力欄(カラーパレット)

ソースコード

ブラウザ表示

例えば、下記のようにブログのテーマカラーやキャラクターの色をユーザーに選択させるときなどに使われます。

ソースコード

ブラウザ表示

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。