35.HTML インプット タイプについて

  • 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2022年3月31日

この章では、<input>要素の入力タイプについて説明します。

この記事の概要
  1. HTML入力タイプ
  2. 入力タイプ：type=”text”
  3. 入力タイプ：type=”password”
  4. 入力タイプ：type=”submit”
  5. 入力タイプ：type=”reset”
  6. 入力タイプ：type=”radio”
  7. 入力タイプ：type=”checkbox”
  8. 入力タイプ：type=”button”
  9. HTML5の入力タイプ
  10. 入力タイプ：type=”color”
  11. 入力タイプ：type=”date”
  12. 入力タイプ：type=”datetime-local”
  13. 入力タイプ：type=”email”
  14. 入力タイプ：type=”file”
  15. 入力タイプ：type=”month”
  16. 入力タイプ：type=”number
  17. 入力制限
  18. 入力タイプ：type=”range”
  19. 入力タイプ：type=”search”
  20. 入力タイプ：type=”tel”
  21. 入力タイプ：type=”time”
  22. 入力タイプ：type=”url”
  23. 入力タイプ：type=”week”
  24. HTML入力タイプ属性

HTML入力タイプ

HTMLで使用できる入力タイプは次のとおりです。

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

入力タイプ：type=”text”

<input type="text"> 1行のテキスト入力フィールドを定義します。

例文

<form>

First name:<br>
<input type=”text” name=”firstname”><br>

Last name:<br>
<input type=”text” name=”lastname”>
</form>

上のHTMLコードがブラウザに表示されるとこんな感じ

First name:

Last name:

スポンサーリンク

入力タイプ：type=”password”

<input type="password"> パスワードファイルを定義します。

例文

<form>

User name:<br>
<input type=”text” name=”username”><br>

User password:<br>
<input type=”password” name=”psw”>
</form>

上のHTMLコードがブラウザに表示されるとこんな感じ

User name:

User password:

パスワードフィールドの文字はマスクされます（アスタリスクか円として隠して表示されます）

入力タイプ：type=”submit”

<input type="submit">は、フォームデータをフォームハンドラーに
送信するためのボタンを定義します。

フォームハンドラは通常、入力データを処理するためのスクリプトを備えたサーバーページです。

フォームハンドラーは、フォームのアクション属性で指定されます。

例文

<form action=”/action_page.php”>
First name:<br>
<input type=”text”
name=”firstname” value=”Mickey”><br>
Last name:<br>
<input
type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit”
value=”Submit”>
</form>

上のHTMLコードがブラウザに表示されるとこんな感じ

First name:

Last name:

送信ボタンの値属性を省略すると、ボタンはデフォルトのテキストを取得します。

例文

<form action=”/action_page.php”>
First name:<br>
<input type=”text”
name=”firstname” value=”Mickey”><br>
Last name:<br>
<input
type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit”>
</form>
スポンサーリンク

入力タイプ：type=”reset”

<input type="reset"> defines a reset button
that will reset all form values to their default values:

例文

<form action=”/action_page.php”>
First name:<br>
<input type=”text”
name=”firstname” value=”Mickey”><br>
Last name:<br>
<input
type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit”
value=”Submit”>
<input type=”reset”>
</form>

上のHTMLコードがブラウザに表示されるとこんな感じ

First name:

Last name:


入力値を変更してから「リセット」ボタンをクリックすると、フォームデータがデフォルト値にリセットされます。

入力タイプ：type=”radio”

<input type="radio">はラジオボタンを定義します。

ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つだけを選択できます。

例文

<form>
<input type=”radio” name=”gender” value=”male”
checked> Male<br>
<input
type=”radio” name=”gender” value=”female”> Female<br>
<input
type=”radio” name=”gender” value=”other”> Other
</form>

上のHTMLコードがブラウザに表示されるとこんな感じ

Male
Female
Other

スポンサーリンク

入力タイプ：type=”checkbox”

<input type="checkbox">はチェックボックスを定義します。

チェックボックスを使用すると、ユーザーは限られた選択肢のオプションを選択できます。

例文

<form>
<input type=”checkbox” name=”vehicle1″ value=”Bike”> バイクを所有している<br>

<input type=”checkbox” name=”vehicle2″ value=”Car”> 車を所有している
</form>

上のHTMLコードがブラウザに表示されるとこんな感じ

バイクを所有している

車を所有している

入力タイプ：type=”button”

<input type="button">はボタンを定義します。

例文

<input type=”button” onclick=”alert(‘Hello World!’)” value=”クリック して!”>

上のHTMLコードがブラウザに表示されるとこんな感じ

スポンサーリンク

HTML5の入力タイプ

HTML5では、以下のいくつか新しい入力タイプが使えます。

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

古いWebブラウザでサポートされていない新しい入力タイプは、<input type="text">として動作します。

入力タイプ：type=”color”

<input type="color">は、色を含む必要がある入力フィールドに使用されます。

ブラウザのサポートに応じて、入力フィールドにカラーピッカーが表示される場合があります。

例文

<form>

Select your favorite color:
<input type=”color” name=”favcolor”>
</form>

スポンサーリンク

入力タイプ：type=”date”

<input type="date">日付を含む必要がある入力フィールドに使用されます。

ブラウザのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例文

<form>

Birthday:
<input type=”date” name=”bday”>
</form>

min と max属性を使用して、日付に制限を追加することもできます。

例文

<form>
Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″><br>
Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″><br>
</form>

入力タイプ：type=”datetime-local”

<input type="datetime-local"> は、タイムゾーンのない日付と時刻の入力フィールドを指定します

ブラウザのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例文

<form>

Birthday (date and time):
<input type=”datetime-local” name=”bdaytime”>
</form>

スポンサーリンク

入力タイプ：type=”email”

<input type="email">は、電子メールアドレスを含む必要がある入力フィールドに使用されます。

ブラウザのサポートに応じて、送信時に電子メールアドレスを自動的に検証できます。

一部のスマートフォンはメールの種類を認識し、キーボードに “.com” を追加してメールの入力に一致させます。

例文

<form>

E-mail:
<input type=”email” name=”email”>
</form>

入力タイプ：type=”file”

<input type="file"> は、ファイル選択フィールドと、ファイルのアップロード用の
“ブラウズ”ボタンを定義します。

例文

<form>
Select a file: <input type=”file” name=”myFile”>
</form>
スポンサーリンク

入力タイプ：type=”month”

<input type="month">を使用すると、ユーザーは月と年を選択できます。

ブラウザのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

<form>

Birthday (month and year):
<input type=”month” name=”bdaymonth”>
</form>

入力タイプ：type=”number

<input type="number"> は
数値入力フィールドを定義します。

入力規則を指定して受け入れられる番号に制限を設定することもできます。

次の例では、1〜5の値を入力できる数値入力フィールドを表示します。

例文

<form>

Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>
</form>

スポンサーリンク

入力制限

一般的な入力制限のリストを示します。

属性 説明
disabled 入力フィールドを無効にすることを指定します
max 入力フィールドの最大値を指定します
maxlength 入力フィールドの最大文字数を指定します
min 入力フィールドの最小値を指定します
pattern 入力値をチェックする正規表現を指定します
readonly 入力フィールドが読み取り専用であることを指定します（変更できません）
required 入力フィールドが必須であることを指定します（記入する必要があります）
size 入力フィールドの幅（文字数）を指定します
step 入力フィールドの有効な番号間隔を指定します
value 入力フィールドのデフォルト値を指定します

入力制限の詳細については、次の章で説明します。

次の例では、数値入力フィールドを表示します。10のステップで0〜100の値を入力できます。デフォルト値は30です。

例文

<form>
Quantity:

<input type=”number” name=”points”
min=”0″ max=”100″ step=”10″ value=”30″>
</form>

入力タイプ：type=”range”

<input type="range"> は、正確な値が重要ではない数値を入力するためのコントロール（スライダーコントロールなど）を定義します。 デフォルトの範囲は0〜100です。ただし、
min, max, と step 属性を使用して、受け入れられる数値に制限を設定できます。

例文

<form>

<input type=”range” name=”points” min=”0″ max=”10″>
</form>

スポンサーリンク

入力タイプ：type=”search”

<input type="search"> は検索フィールドに使用されます（検索フィールドは通常のテキストフィールドのように動作します）

例文

<form>

Search Google:
<input type=”search” name=”googlesearch”>
</form>

入力タイプ：type=”tel”

<input type="tel"> は、電​​話番号を含む必要がある入力フィールドに使用されます。

例文

<form>
Telephone:
<input type=”tel” name=”phone”
pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}”>
</form>

入力タイプ：type=”time”

<input type="time">を使用すると、ユーザーは時間を選択できます（タイムゾーンなし）

ブラウザのサポートに応じて、タイムピッカーが入力フィールドに表示される場合があります。

例文

<form>

Select a time:
<input type=”time” name=”usr_time”>
</form>

入力タイプ：type=”url”

<input type="url"> は、URLアドレスを含む必要がある入力フィールドに使用されます。

ブラウザのサポートに応じて、送信時にurlフィールドを自動的に検証できます。

一部のスマートフォンはURLタイプを認識し、キーボードに「 “.com” tを追加してURL入力に自動一致させます。

例文

<form>

Add your homepage:
<input type=”url” name=”homepage”>
</form>

入力タイプ：type=”week”

<input type="week">を使用すると、ユーザーは週と年を選択できます。

ブラウザのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例文

<form>

Select a week:
<input type=”week” name=”week_year”>
</form>

HTML入力タイプ属性

タグ 説明
<input type=””> 表示する入力タイプを指定します
タグ: , , , ,

コメントを残す