HTMLプレースホルダー属性

要素のplaceholder属性は、その特定の入力で何が期待されるかについての簡単な説明を与える入力のヒントを設定するために使用されます。この属性は、テキスト、URL、検索、電子メール、パスワード、電話などの入力タイプで機能します。 HTML5で導入されました。

以下は構文です-

<input placeholder="placeholder_text">

ここで、placeholder_textは短いヒントです。つまり、ユーザーがそのWebページにアクセスするたびに表示されるプレースホルダーです。

要素-

のプレースホルダー属性を実装する例を見てみましょう。

例

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..."><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB − <input type="date" name="dob"><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email − <input type="email" name="email" placeholder="Enter email here..."><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

出力

HTML input プレースホルダー属性

上記の例では、いくつかのフィールドを持つフォームがあります-

<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..."><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..."><br>
   DOB − <input type="date" name="dob"><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
   Email − <input type="email" name="email" placeholder="Enter email here..."><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>

プレースホルダーは、-

のようなすべてのフィールドに設定されます

<input type="password" name="pwd" placeholder="Enter password here...">

プレースホルダー属性を使用して、短いヒントを設定するだけです-

placeholder="Enter password here..."

HTML<input>必須属性

HTML<nav>タグ

HTMLリスト属性
HTMLリスト属性は、HTMLドキュメントの要素の事前定義されたオプションを含む要素を参照します。構文以下は構文です- <input list=”text”> HTMLリスト属性の例を見てみましょう：例 <!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; background-colo
HTMLmaxlength属性
HTML maxlength属性は、HTMLドキュメントの入力HTML要素で許可される最大文字数を定義します。構文以下は構文です- <input maxlength=”text”> HTMLmaxlength属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; height: 100vh;