HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで要素の期待値を示す短いヒントを表示するにはどうすればよいですか？

HTMLでは、placeholder属性を使用することで、入力欄に期待される値を説明する短いヒントを表示できます。ユーザーが何を入力すればよいのかを視覚的に伝えられるため、フォームの使いやすさを向上させるのに非常に便利です。

placeholder属性は<input>タグや<textarea>タグに指定でき、ユーザーが入力を始めるとヒントは自動的に消えます。

サンプルコード

以下のコードを実行して、placeholder属性の実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <h2>Login</h2>
      <form action = "/new.php">
         <input type = "text" placeholder = "Student UserName" name = "name"/><br>
         <input type = "password" placeholder = "Password" name = "password"> <br><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

ポイント

上記の例では、テキスト入力欄に「Student UserName」、パスワード欄に「Password」というヒントが表示されます。なお、placeholderはあくまで入力例を示す補助的なものであり、ラベル（label要素）の代わりにはなりません。アクセシビリティを考慮する場合は、必ずlabel要素も併用しましょう。

  1. HTMLでinput要素の値を正規表現でチェックする方法（pattern属性の使い方）

    HTMLでは、<input>要素にpattern属性を指定することで、入力値を正規表現で検証できます。フォーム送信時に、入力内容が指定したパターンに一致しているかどうかをブラウザが自動的にチェックし、一致しない場合はエラーメッセージを表示します。以下のコードでは、国名コードの入力欄に対して「半角英字3文字」というパターンを設定しています。サンプルコード<!DOCTYPE html> <html>    <head>       <title>HTML novalidate attrib

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値