درج راهنمای فیلدهای متنی در HTML – خصوصیت placeholder
در HTML از خصوصیت placeholder برای تعیین عبارت راهنما در فیلدهای متنی استفاده میشود. از این خصوصیت میتوانید برای المان های <textarea> و همچنین المان های <input> با نوع text, search, url, tel, email و password استفاده کنید.
معمولا متنی که به عنوان مقدار خصوصیت placeholder مشخص میشود یک متن خلاصه و کوتاه است که در مورد نوع و فرمت قابل قبول برای داده، کاربر را راهنمایی میکند یا یک مثال ساده برای آن نمایش میدهد. به این ترتیب کاربر با مقادیر مجازی که میتواند در فیلد متنی موردنظر وارد کند آشنا میشود.
مثال زیر نمونه استفاده از خصوصیت placeholder در یک المان <input> با نوع text (تکست باکس) را نشان میدهد.
<form action="/action.php" method="post">
<label for="petname">Pet name: </label>
<input type="text" id="petname" name="petname" placeholder="e.g. Daisy">
<input type="submit" value="Send">
</form>کد فوق معمولا مشابه با تصویر زیر توسط مرورگرهای وب رندر میشود:
توجه داشته باشید مقدار خصوصیت placeholder صرفا زمانی روی فیلد نمایش داده میشود که فیلد خالی باشد. در این حالت، متن placeholder معمولا به شکل کم رنگ داخل فیلد ظاهر میشود. با وارد کردن محتوا داخل فیلد، متن placeholder بلافاصله ناپدید میشود و با حذف کامل محتویات فیلد مجددا نمایان میشود.
فراموش نکنید نباید از خصوصیت placeholder در HTML به عنوان جایگزینی برای المان <label> استفاده کنید. چرا که مقدار این خصوصیت همیشه برای کاربر آشکار نیست. از طرفی المان های <label> امکان دسترسی راحتتر به فیلدها را فراهم میکنند و با لمس یا کلیک روی متن لیبل، فوکس به فیلد متناظر منتقل میشود. به علاوه متن لیبل به کاربر نشان میدهد چه داده ای را باید در فیلد متناظر وارد کند و اسکرین ریدرها هم متن لیبل را برای کاربر میخوانند.
