ویژگی های ورودی (Input Attributes)
اینجا با «ویژگی های ورودی» آشنا می شویم. «ویژگی (Attribute)» یعنی تنظیمات فیلد. مثلا مقدار اولیه، حداقل، حداکثر، یا الگو. آرام جلو می رویم و هرکدام را با مثالی کوتاه می بینیم.
value: مقدار اولیه فیلد
«value» مقدار شروع را مشخص می کند. مثل پرکردن نام پیش فرض.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
readonly: فقط خواندنی
«readonly» تغییر را غیرفعال می کند. اما مقدار ارسال می شود.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John" readonly>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
disabled: کاملاً غیرفعال
«disabled» کلیک پذیر نیست و ارسال هم نمی شود.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John" disabled>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
size: عرض نمایشی کاراکتری
«size» پهنای نمایشی را تعیین می کند. پیش فرض 20 کاراکتر است.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" size="50">
<br>
<label for="pin">PIN:</label>
<br>
<input type="text" id="pin" name="pin" size="4">
</form>
maxlength: سقف کاراکتر
«maxlength» تعداد کاراکتر مجاز را محدود می کند. برای پیام، اسکریپت بنویسید.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" size="50">
<br>
<label for="pin">PIN:</label>
<br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
min و max: محدوده مجاز
«min» و «max» کمینه و بیشینه را می گذارند. با انواع عددی و تاریخی کار می کنند.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<br>
<input type="date" id="datemax" name="datemax" max="1979-12-31">
<br>
<br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<br>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
<br>
<br>
<label for="quantity">Quantity (between 1 and 5):</label>
<br>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
multiple: چند مقدار
«multiple» چند مقدار می پذیرد. برای فایل و ایمیل کاربرد دارد.
<form>
<label for="files">Select files:</label>
<br>
<input type="file" id="files" name="files" multiple>
</form>
pattern: الگوی منظم
«pattern» الگوی «عبارت منظم (Regex)» تعیین می کند. با «title» توضیح بدهید.
<form>
<label for="country_code">Country code:</label>
<br>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
placeholder: راهنمای کوتاه
«placeholder» نمونه مقدار را نشان می دهد. قبل از تایپ دیده می شود.
<form>
<label for="phone">Enter a phone number:</label>
<br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
required: پرکردن اجباری
«required» فیلد را ضروری می کند. بدون آن فرم ارسال نمی شود.
<form>
<label for="username">Username:</label>
<br>
<input type="text" id="username" name="username" required>
</form>
step: گام های مجاز
«step» فاصله اعداد را تعیین می کند. با min و max ترکیب کنید.
<form>
<label for="points">Points:</label>
<br>
<input type="number" id="points" name="points" step="3">
</form>
هشدار: محدودیت های ورودی ضدتقلب نیستند. حتماً سمت سرور هم بررسی کنید.
autofocus: فوکوس خودکار
«autofocus» هنگام بارگذاری، فوکوس را روی فیلد می گذارد.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" autofocus>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname">
</form>
height و width برای input image
برای «input type=image» اندازه را تعیین کنید. چیدمان پایدار می ماند.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname">
<br>
<br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
list: اتصال به datalist
«list» ورودی را به «datalist» وصل می کند. پیشنهادهای آماده می دهد.
<form>
<input list="browsers">
<br>
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
autocomplete: تکمیل خودکار
«autocomplete» پرکردن خودکار را روشن یا خاموش می کند. مرورگر مقدارها را پیشنهاد می دهد.
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname">
<br>
<br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email" autocomplete="off">
<br>
<br>
<input type="submit" value="Submit">
</form>
تمرین سه مرحله ای: ویژگی های ورودی
- یک ورودی متن با placeholder بسازید.
- روی ورودی عددی min، max و step بگذارید.
- با required و pattern اعتبارسنجی را تست کنید.
نکته: برای راهنمای الگو، از ویژگی title استفاده کنید.
جمع بندی سریع
- value مقدار آغازین را تعیین می کند.
- readonly ارسال می شود؛ disabled ارسال نمی شود.
- min و max محدوده می سازند.
- pattern فرمت ورودی را کنترل می کند.
- step فاصله اعداد را مشخص می کند.
بیشتر بخوان: انواع ورودی و ویژگی های ورودی. برای فهرست گزینه ها، سراغ datalist بروید.