HTML 輸入佔位符
- 王林原創
- 2024-09-04 16:54:24950瀏覽
HTML 輸入佔位符作為給定元素的提示，有助於識別給定輸入欄位所需的值。這可用於使用者實際輸入輸入之前的輸入文字欄位或文字區域。它從作為佔位符文字包含的相應選擇器元素中選擇值，並在使用者將輸入輸入到輸入欄位時將其顯示為建議。將佔位符放入輸入欄位使用戶可以輕鬆地在給定的輸入欄位中輸入所需的值。因此它最大限度地減少了用戶的努力。基本上，佔位符是淺灰色的，但我們也可以透過使用一些 CSS 屬性來更改其顏色。
文法：
讓我們看看佔位符的語法，以及它將如何在輸入欄位中使用。
<element placeholder="placeholder_text">
可以使用以下一些 CSS 程式碼來設定佔位符的樣式：
::placeholder{
//CSS code;
}
佔位符可以透過使用對比度等功能來實現，它描述了您的佔位符顏色比輸入欄位的背景更亮，可用性定義了您用作佔位符的文字在輸入欄位中輸入內容時必須消失.
在輸入欄位之外定義佔位符也被視為在輸入欄位中使用佔位符的最佳方式。
這些輸入欄位將與一些偽類一起使用，例如啟用、停用、只讀、讀寫、顯示佔位符、預設、檢查、不確定、有效、無效、在範圍內、超出範圍-範圍、必填、可選、空白以及更多其他類別。
像類別一樣，也會使用許多屬性，例如 max、maxlength、min、minlength、pattern、required、step、type 等。
讓我們看看如何將佔位符與輸入文字一起使用：
<input type="text " placeholder="placeholder-text">
此語法適用於簡單的輸入文字字段，因此您將幫助使用者使用佔位符屬性將正確的輸入添加到輸入字段中。佔位符 - 文字只不過是關於使用者實際要在此輸入欄位中輸入的內容的建議。
我們使用佔位符的另一件事是輸入文字區域。在這個輸入欄位中，我們可以透過使用佔位符來建議人們到底可以提供什麼作為輸入，因此這對於為適當的輸入值進行輸入的人和為獲得更好的用戶體驗而輸入輸入的用戶都有幫助。
<input type="textarea" placeholder="placeholder-text">
佔位符中有兩種不同的東西，一種是:placeholder-shown ，它的含義是透過輸入字段中可用的佔位符文字來完成輸入的選擇，而另一種是::placeholder ，它是使用的為佔位符賦予樣式。
佔位符不能用作標題或標籤屬性，也不能將其視為兩者的替代品。
可以更改佔位符的樣式，以在任何瀏覽器中顯示相同的佔位符，對於這種情況，我們必須為特定瀏覽器應用CSS 程式碼，以便它在每個瀏覽器中顯示相同的內容。
HTML 輸入佔位符範例
以下是下面提到的以下範例。
範例#1
在此範例中，我們將建立一個登入表單和一個註冊表單，其中我們對所有輸入欄位使用佔位符，因此 HTML 程式碼和輸出如下：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
padding: 2px 12px;
}
.card {
border: 1px solid blue;
border-radius: 5px;
padding-left: 5%;
}
</style>
</head>
<body >
<div class="card">
<h4>Login Form</h4>
<form action="#">
<label for="username">User Name : </label><br>
<input type="text" name="username" placeholder="Enter User Name"><br>
<label for="pw">Password : </label><br>
<input type="password" name="pw" placeholder="Enter Password" ><br><br>
<input type="submit" value="Login"><br><br>
</form>
</div>
<br><hr>
<div class="card">
<h4>Registration Form</h4>
<form>
<label for="fname">First Name</label><br>
<input type="text" name="fname" placeholder="Enter First Name here"><br>
<label for="lname">Last Name</label><br>
<input type="text" name="lname" placeholder="Enter Last Name here"><br>
<label for="email">Email_ID</label><br>
<input type="email" name="email" placeholder="Enter Email ID here"><br>
<label for="mobileno">Contact No</label><br>
<input type="number" name="fname" placeholder="Enter Contact No"><br>
<label for="address">Address</label><br>
<input type="textarea" name="address" placeholder="Enter Address Here"><br><br>
<input type="submit" value="Register"><br><br>
</form>
</div>
</body>
</html>
輸出：
範例#2
在此範例中，我們將了解如何變更佔位符的顏色。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Placeholder Color Demo</title>
</head>
<style>
::placeholder{
color: coral;
}
</style>
<body>
<center>
<h3> Changing Color of Placeholder </h3>
<h5>Enter Course Details Here</h5>
<form action="#">
<input type="text" name="cname" placeholder="Course Name">
<br> <br>
<input type="text" name="duration" placeholder="Course Durations
(in Months)">
<br> <br>
<textarea placeholder="Course Details (Syllabus)"></textarea>
<br><br> <input type="submit" value="Get Details">
</form>
</center>
</body>
</html>
輸出：
範例 #3
這是 HTML 佔位符的另一個範例，它也適用於輸入欄位以及文字區域。
代碼：
<html> <head> <title>HTML Placeholder</title> </head> <body> <form > <table border="2" align="center" width="500" bgcolor="lightblue" > <caption><b>We help jobseeker for getting better Jobs!</b></caption> <tr> <th>Enter First Name</th> <td><input type="text" name="fn" placeholder="John" required/></td> </tr> <tr> <th>Enter Last Name</th> <td><input type="text" placeholder="Smith" required/ ></td> </tr> <tr> <th>Enter Email ID</th> <td><input type="email" placeholder="[email protected]" required/></td> </tr> <tr> <th>Enter Password</th> <td><input type="password" placeholder="JSJS123" required/></td> </tr> <tr> <th>Confirm Password</th> <td><input type="password" placeholder="JSJS123" required/></td> </tr> <tr> <th>Enter Mobile Number</th> <td><input type="number" placeholder="9867986798" required/></td> </tr> <tr> <th>Select Date of Birth</th> <td><input type="date" placeholder="30-04-1994"/></td> </tr> <tr> <th>Enter City</th> <td><input type="city" placeholder="Eg. Pune"/></td> </tr> <tr> <th>Enter Address</th> <td><textarea rows="3" cols="20" placeholder="Enter address details"></textarea></td> </tr> <tr> <th>Select Gender</th> <td> male<input type="radio" name="g" /> female<input type="radio" name="g" /> other<input type="radio" name="o"/> </td> </tr> <tr> <th>Position Applied for</th> <td> <select name="position"> <option value="" selected="selected" disabled="disabled">Select Position</option> <option value="1">.NET Developer</option> <option value="2">UX-UI Designer</option> <option value="3">Full Stack Developer</option> <option value="4">Digital Marketing</option> </select> </td> </tr> <tr> <th>Additional skills or Certifications</th> <td><textarea rows="5" cols="20" placeholder="Enter your master skills as well as certification you completed"></textarea></td> </tr> <tr> <th>Upload Resume Here</th> <td><input type="file"/ ></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Save Details"/> <input type="reset" value="Reset Details"/> </td> </tr> </table> </form> </body> </html>
輸出：
結論
從上述資訊來看，我們可以說 HTML 佔位符只不過是輸入欄位（如文字輸入欄位或文字區域）中的一種相關文字、建議或提示。因此，使用者可以輕鬆地從佔位符中捕獲內容，並在輸入欄位中提供適當的輸入。
以上是HTML 輸入佔位符的詳細內容。更多資訊請關注PHP中文網其他相關文章！