7.1 テキストフィールド
HTMLはユーザーがテキスト、メール、日付などの様々な形式でデータを入力するための多くのタイプを提供しているよ。各入力タイプの使い方について詳しく見ていこう。
要素 <input type="text"> は1行のテキスト入力に使うんだ。これは一番基本で、よく使われる入力タイプだね。
使用例:
<label for="name">名前:</label>
<input type="text" id="name" name="name">
属性
maxlength: 文字数の最大値を制限するplaceholder: 入力前に表示されるヒントテキストrequired: 入力が必須であることを示す
属性付きの例:
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="ユーザー名を入力" required>
7.2 数値フィールド
要素 <input type="number"> は数値入力に使うよ。数字しか入力できなくなって、値を増減させる矢印も表示されるよ。
使用例:
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
属性
min: 許可される最小値max: 許可される最大値step: 値の変化幅を決めるvalue: 初期値を設定する
7.3 メールアドレスフィールド
要素 <input type="email"> はメールアドレスの入力用だよ。入力したテキストがメールアドレスの形式に合っているかチェックするよ。
使用例:
<label for="email">メール:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
属性
multiple: カンマで区切ることで複数のメールアドレスを入力できるようにするpattern: 入力値の追加チェック用の正規表現を設定する
属性付きの例:
<label for="emails">メールアドレス (カンマで区切る):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 電話番号フィールド
要素 <input type="tel"> は電話番号の入力用だよ。フォーマットのチェックはしないけど、pattern属性を使ってマスクを設定できるんだ。
使用例:
<label for="phone">電話:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
属性
pattern: 入力した番号のフォーマットのチェック用の正規表現を設定する。
属性付きの例:
<label for="phone">電話:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 日付フィールド
要素 <input type="date"> は日付の入力用だよ。対応しているブラウザではカレンダーが表示されて選択しやすくなるんだ。
使用例:
<label for="birthday">誕生日:</label>
<input type="date" id="birthday" name="birthday">
属性
min: 許可される最小の日付max: 許可される最大の日付
属性付きの例:
<label for="appointment">面談の日付:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 時間入力フィールド
要素 <input type="time"> は時間入力用だよ。対応しているブラウザでは時間選択のウィジェットが表示されるよ。
使用例:
<label for="meeting_time">会議の時間:</label>
<input type="time" id="meeting_time" name="meeting_time">
属性
min: 許可される最小の時間max: 許可される最大の時間step: 時間の変化幅を定める
属性付きの例:
<label for="alarm">アラーム:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 URL入力フィールド
要素 <input type="url"> はウェブアドレス（URL）入力用だよ。入力したテキストがURLの形式に合っているかチェックするんだ。
使用例:
<label for="website">ウェブサイト:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
属性
pattern: 入力値の追加チェック用の正規表現を設定する。
属性付きの例:
<label for="personal_website">個人ウェブサイト:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 パスワード入力フィールド
要素 <input type="password"> はパスワード入力用だよ。入力内容は非表示になり、例えばアスタリスクやドットで表示されるんだ。
使用例:
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
属性
maxlength: 文字数の最大値を制限するplaceholder: ヒントテキストrequired: 入力が必須であることを示す
属性付きの例:
<label for="new-password">新しいパスワード:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="パスワードを入力" required>
7.9 値の範囲入力フィールド
要素 <input type="range"> は特定の範囲内の値を入力するために使うよ。スライダーとして表示されるんだ。
使用例:
<label for="volume">音量:</label>
<input type="range" id="volume" name="volume">
属性
min: 許可される最小値max: 許可される最大値step: 値の変化幅を決めるvalue: 初期値を設定する
属性付きの例:
<label for="brightness">明るさ:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 色選択フィールド
要素 <input type="color"> は色を選択するために使うよ。対応しているブラウザではカラーピッカーが表示されるんだ。
使用例:
<label for="favcolor">好きな色を選んでください:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
属性
value: 初期色を設定する。
7.11 検索入力フィールド
要素 <input type="search"> は検索クエリを入力するために使うよ。ほとんどのブラウザでは、クリアボタンやスタイルが標準で備わっているよ。
使用例:
<label for="search">検索:</label>
<input type="search" id="search" name="search" placeholder="検索クエリを入力">
GO TO FULL VERSION