HTML入門 | HTML入力フォーム(Forms) | HTML input要素のタイプ(type)

Tags:

input要素のタイプ(type)

form要素はさまざまなタイプのinput要素を含めることができる。HTMLでよく使用されるinput要素の代表的なタイプは次のとおりである。

  1. text
  2. password
  3. submit
  4. reset
  5. image
  6. button
  7. radio
  8. checkbox
  9. file

HTML5で新しく追加されたinput要素のタイプは次のとおりである。

  1. 数値入力(number)
  2. 入力範囲指定(range)
  3. 色入力(color)
  4. 日付入力(date)
  5. 時刻入力(time)
  6. 日付と時刻入力(datetime-local)
  7. 年と月入力(month)
  8. 年と週入力(week)
  9. メール入力(email)
  10. URLアドレス入力(url)
  11. 電話番号入力(tel)
  12. 検索語入力(search)

テキスト入力 - text

<input>タグのtype属性値を"text"に設定すると、ユーザーから1行のテキストを入力してもらうことができる。

<form>
  제목 : <input type="text" name="title">
</form>

コード実行

パスワード入力 - password

<input>タグのtype属性値を"password"に設定すると、ユーザーからパスワードを入力してもらうことができる。パスワードを入力するため、画面には入力された文字や数字の代わりにアスタリスク(*)や小さな丸(•)が表示される。

<form>
  사용자명 : <input type="text" name="username"><br/>
  비밀번호 : <input type="password" name="password">
</form>

コード実行

送信ボタン - submit

<input>タグのtype属性値を"submit"に設定すると、ユーザーから入力されたデータ(data)をサーバーのフォームハンドラーへ送信するボタンになる。

フォームハンドラー(form-handler)とは、入力されたデータを処理するためのサーバーサイドのWebページを意味する。このフォームハンドラーのアドレスは、form要素のaction属性を使用して明示できる。

<form action="/">
  사용자명 : <input type="text" name="username"><br/>
  <input type="submit" value="전송">
</form>

コード実行

リセットボタン - reset

<input>タグのtype属性値を"reset"に設定すると、ユーザーが入力した値を初期値へリセットするボタンになる。

<form action="/">
  사용자명 : <input type="text" name="username" value="개발곰"><br/>
  <input type="reset" value="재설정">
</form>

コード実行

画像ボタン - image

<input>タグのtype属性値を"image"に設定すると、送信ボタン(Submit Button)の役割をしながら画像として出力されるボタンになる。

<form action="/">
  사용자명 : <input type="text" name="username"><br/>
  <input type="image" src="/resources/images/logo/64x64.png">
</form>

コード実行

送信ボタンではない一般的なボタンを画像として処理したい場合は、<img>タグを使用し、JavaScriptでアクションを指定する必要がある。

一般ボタン - button

<input>タグのtype属性値を"button"に設定すると、一般的なボタンになる。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

コード実行

buttonは<button>タグでも表現できる。参照

ラジオボタン - radio

<input>タグのtype属性値を"radio"に設定すると、ユーザーは複数のオプション(option)の中から1つだけを入力できる。

このとき、サーバーへ正確な入力を送信するには、すべてのinput要素のname属性が同じでなければならない。

<input type="radio" name="fruit" value="apple" checked> 사과
<input type="radio" name="fruit" value="banana"> 바나나
<input type="radio" name="fruit" value="orange"> 오렌지
<input type="radio" name="fruit" value="strawberry"> 딸기

コード実行

チェックボックス - checkbox

<input>タグのtype属性値を"checkbox"に設定すると、ユーザーは複数のオプションの中から複数のオプションを入力できる。

チェックボックスはラジオボタンとは異なり、複数のオプションを一度に入力できる。このとき、サーバーへ正確な入力を送信するには、すべてのinput要素のname属性が同じでなければならない。

<input type="checkbox" name="fruit" value="apple" checked> 사과
<input type="checkbox" name="fruit" value="banana"> 바나나
<input type="checkbox" name="fruit" value="orange"> 오렌지
<input type="checkbox" name="fruit" value="strawberry"> 딸기

コード実行

ファイル選択 - file

<input>タグのtype属性値を"file"に設定すると、ファイルを送信できる。

<input type="file" name="imageFile" accept="image/*">

コード実行

数値入力(number)

<input>タグのtype属性値を"number"に設定すると、input要素はユーザーが数値を入力できるようにする。

numberタイプが一般的なtextタイプと異なる点は、入力フィールドの右側に数値の大きさを調整できる上下ボタンが表示される点である。ブラウザの対応状況によっては、min属性とmax属性を使って数値選択に制限値を設定することもできる。

<input type="number" name="num" min="1" max="9">

コード実行

numberタイプはInternet Explorer 9以前ではサポートされない。

入力範囲指定(range)

<input>タグのtype属性値を"range"に設定すると、input要素はユーザーが一定範囲内の値だけを入力できるようにする。

ブラウザの対応状況によっては、値を選択するための水平スライダーを表示する。

0 <input type="range" name="favnum" min="1" max="9"> 9

コード実行

rangeタイプはInternet Explorer 9以前ではサポートされない。

色入力(color)

<input>タグのtype属性値を"color"に設定すると、input要素はユーザーが色を入力できるようにする。

選択された色は#を除いた6桁の16進数色値として送信される。ブラウザの対応状況によっては、色を選択するためのツールを表示する。

<input type="color" name="color" value="#FF0000">

コード実行

colorタイプはSafari 9.1以前、Internet Explorer 11以前ではサポートされない。

日付入力(date)

<input>タグのtype属性値を"date"に設定すると、input要素はユーザーが日付を入力できるようにする。

ブラウザの対応状況によっては、日付を選択するためのカレンダーを表示する。

<input type="date" name="day1">

また、min属性とmax属性を使用して日付選択に制限値を設定することもできる。

<input type="date" name="day2" min="1977-01-01" max="2020-12-31">

コード実行

dateタイプはFirefox、Internet Explorer 11以前ではサポートされない。

時刻入力(time)

<input>タグのtype属性値を"time"に設定すると、input要素はユーザーが時刻を入力できるようにする。

ブラウザの対応状況によっては、時刻を選択するためのツールを表示する。

<input type="time" name="time">

コード実行

timeタイプはFirefox、Internet Explorer 12以前ではサポートされない。

日付と時刻入力(datetime-local)

<input>タグのtype属性値を"datetime-local"に設定すると、input要素はユーザーが日付と時刻を入力できるようにする。

ブラウザの対応状況によっては、日付を選択するためのカレンダーと時刻を選択するためのツールを表示する。

<input type="datetime-local" name="time">

コード実行

datetime-localタイプはFirefox、Internet Explorer 12以前ではサポートされない。

年と月入力(month)

<input>タグのtype属性値を"month"に設定すると、input要素はユーザーが年と月を入力できるようにする。

ブラウザの対応状況によっては、年と月を選択するためのカレンダーを表示する。

<input type="month" name="month">

コード実行

monthタイプはFirefox、Internet Explorer 11以前ではサポートされない。

年と週入力(week)

<input>タグのtype属性値を"week"に設定すると、input要素はユーザーが年と何週目かを入力できるようにする。

ブラウザの対応状況によっては、年と週を選択するためのカレンダーを表示する。

<input type="week" name="week">

コード実行

weekタイプはFirefox、Internet Explorer 11以前ではサポートされない。

メール入力(email)

<input>タグのtype属性値を"email"に設定すると、input要素はユーザーがemailアドレスを入力できるようにする。

ブラウザの対応状況によっては、送信時に入力されたemailアドレスが有効なemailアドレスかどうかを自動で検査する。

<input type="email" name="email">

コード実行

emailタイプはSafari、Internet Explorer 9以前ではサポートされない。

URLアドレス入力(url)

<input>タグのtype属性値を"url"に設定すると、input要素はユーザーがURLアドレスを入力できるようにする。

ブラウザの対応状況によっては、送信時に入力されたURLアドレスが有効なURLアドレスかどうかを自動で検査する。

<input type="url" name="url">

コード実行

urlタイプはSafari、Internet Explorer 9以前ではサポートされない。

電話番号入力(tel)

<input>タグのtype属性値を"tel"に設定すると、input要素はユーザーが電話番号を入力できるようにする。

<input type="tel" name="tel">

コード実行

telタイプはSafari 8でのみサポートされる。

検索語入力(search)

<input>タグのtype属性値を"search"に設定すると、input要素はユーザーが検索語を入力できるようにする。この検索フィールドは通常のテキストフィールド(text field)と同じように動作する。

searchタイプが一般的なtextタイプと異なる点は、入力フィールドに検索語を入力すると、入力フィールドの右側に入力された検索語をすぐ削除できるX表示が出る点である。

<input type="search" name="keyword">

コード実行