入力属性
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 37/60。
テキスト入力用のその他の便利な属性をいくつか紹介します:
placeholder: 入力フィールドに期待される値を説明する短いヒントを提供します(例: "Enter your name")。value: 入力フィールドの初期値を設定します。maxlength: 入力フィールドで許可される最大文字数を指定します。
プレースホルダー付きのテキスト入力を作成する例を以下に示します。
<input type="text" name="username" placeholder="Enter username">この例では、"username" という名前と "Enter username" というプレースホルダーを持つテキスト入力があります。入力フィールドが空のとき、プレースホルダーのテキストがフィールド内に表示されます。ユーザーが入力を開始すると、プレースホルダーのテキストは消えます。
チャレンジ
簡単以下のテキスト入力フィールドを持つフォームを含むHTMLドキュメントを作成してください:
- nameが "firstname" で、プレースホルダーに "Enter your first name" と表示されるテキスト入力。
- nameが "lastname" で、プレースホルダーに "Enter your last name" と表示されるテキスト入力。
- nameが "email" で、プレースホルダーに "Enter your email" と表示されるテキスト入力。この入力の最大文字数を 50 文字に設定してください。
チートシート
テキスト入力に便利な属性:
placeholder: 入力フィールドに期待される値を説明する短いヒントを表示しますvalue: 入力フィールドの初期値を設定しますmaxlength: 入力フィールドに許可される最大文字数を指定します
プレースホルダー付きのテキスト入力の例:
<input type="text" name="username" placeholder="Enter username">プレースホルダーのテキストは、入力フィールドが空のときに表示され、ユーザーが入力を開始すると消えます。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを記述してください -->
</body>
</html>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。