Menu
Coddy logo textTech

入力属性

CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 37/60。

テキスト入力用のその他の便利な属性をいくつか紹介します:

  • placeholder: 入力フィールドに期待される値を説明する短いヒントを提供します(例: "Enter your name")。
  • value: 入力フィールドの初期値を設定します。
  • maxlength: 入力フィールドで許可される最大文字数を指定します。

プレースホルダー付きのテキスト入力を作成する例を以下に示します。

<input type="text" name="username" placeholder="Enter username">

この例では、"username" という名前と "Enter username" というプレースホルダーを持つテキスト入力があります。入力フィールドが空のとき、プレースホルダーのテキストがフィールド内に表示されます。ユーザーが入力を開始すると、プレースホルダーのテキストは消えます。

challenge icon

チャレンジ

簡単

以下のテキスト入力フィールドを持つフォームを含むHTMLドキュメントを作成してください:

  1. nameが "firstname" で、プレースホルダーに "Enter your first name" と表示されるテキスト入力。
  2. nameが "lastname" で、プレースホルダーに "Enter your last name" と表示されるテキスト入力。
  3. nameが "email" で、プレースホルダーに "Enter your email" と表示されるテキスト入力。この入力の最大文字数を 50 文字に設定してください。

チートシート

テキスト入力に便利な属性:

  • placeholder: 入力フィールドに期待される値を説明する短いヒントを表示します
  • value: 入力フィールドの初期値を設定します
  • maxlength: 入力フィールドに許可される最大文字数を指定します

プレースホルダー付きのテキスト入力の例:

<input type="text" name="username" placeholder="Enter username">

プレースホルダーのテキストは、入力フィールドが空のときに表示され、ユーザーが入力を開始すると消えます。

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <!-- ここにコードを記述してください -->
    </body>
</html>
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Fundamentalsのすべてのレッスン