HTML でテキストボックスのスタイルを設定する方法
Web デザインでは、テキスト ボックスは、ユーザーがページに情報を入力できるようにするためによく使用される要素です。この記事ではHTMLでテキストボックスを設置する方法を紹介します。
- タグの使用
テキスト ボックスを作成するには、 タグを使用し、そのタイプを「text」に設定します。基本的な例を次に示します。
<input type="text" name="username">
ログイン後にコピー
この例では、テキスト ボックスを作成し、「username」という名前を付けます。
- テキスト ボックスのサイズと最大長を設定する
「size」属性を使用して、テキスト ボックスのサイズを設定できます。例:
<input type="text" name="username" size="30">
ログイン後にコピー
この例では、テキスト ボックスのサイズを 30 文字幅に設定します。
さらに、「maxlength」属性を使用してテキスト ボックスの最大長を設定することもできます。例:
<input type="text" name="username" maxlength="20">
ログイン後にコピー
この例では、テキストの最大長を設定します。ボックスは 20 文字までです。
- デフォルト値とプレースホルダーの設定
「value」属性を使用して、テキスト ボックスのデフォルト値を設定できます。例:
<input type="text" name="username" value="请输入用户名">
ログイン後にコピー
この例では、テキストボックスのデフォルト値を「ユーザー名を入力してください」に設定しています。
さらに、「placeholder」属性を使用して、テキスト ボックスのプレースホルダーを設定することもできます。例:
<input type="text" name="username" placeholder="请输入用户名">
ログイン後にコピー
この例では、テキスト ボックスのプレースホルダーを次のように設定します。 「ユーザー名を入力してください。」ユーザーがテキスト ボックスに入力すると、プレースホルダーは自動的に消えます。