ویژگی‌های ورودی

Main Page Tutorial
موارد آموزشی
فرم‌های HTML
۱	فرم‌ها
۲	عناصر فرم
۳	انواع ورودی
۴	ویژگی‌های ورودی
۵	ویژگی ورودی Form
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

ویژگی value (به فارسی: مقدار)

ویژگی value مقدار اولیه فیلد ورودی را تعیین می‌کند:

مثال

مقادیر اولیه (پیش فرض) در فیلدهای ورودی:

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe">
6 </form>

مشاهدهٔ نتیجه

ویژگی readonly (به فارسی: فقط‌خواندنی)

ویژگی readonly مشخص می‌کند که فیلد ورودی فقط‌خواندنی است.

یک فیلد ورودی فقط خواندنی را نمی توان تغییر داد (با این حال کاربر می تواند آن را نشانه‌گذاری کند، آن را برجسته (highlight) کند و متنی را از آن کپی کند).

مقدار فیلد فقط خواندنی در هنگام ارسال فرم (Submit) ارسال خواهد شد!

مثال

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John" readonly><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe">
6 </form>

مشاهدهٔ نتیجه

ویژگی disabled (به فارسی: غیرفعال)

ویژگی disabledمشخص می‌کند که یک فیلد ورودی باید غیرفعال شود.

یک فیلد ورودی غیرفعال غیرقابل استفاده و غیرقابل کلیک کردن است.

مقدار فیلد غیر فعال هنگام submit فرم ارسال نخواهد شد!

مثال

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John" disabled><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe">
6 </form>

مشاهدهٔ نتیجه

ویژگی size (به فارسی: اندازه)

ویژگی size عرض قابل مشاهده، به تعداد کاراکترها، فیلد ورودی را مشخص می‌کند.

مقدار پیش فرض size برابر با ۲۰ است.

توجه: ویژگی سایز با این انواع ورودی کار می‌کند: متن، جستجو، تلفن، url، ایمیل و کلمه عبور.

مثال

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" size="50"><br>
4   <label for="pin">PIN:</label><br>
5   <input type="text" id="pin" name="pin" size="4">
6 </form>

مشاهدهٔ نتیجه

ویژگی maxlength (به فارسی: حداکثر طول)

ویژگی maxlength حداکثر طول مجاز برای یک فیلد ورودی را مشخص می‌کند:

توجه: هنگامیکه ویژگی maxlength تظیم می شود، فیلد ورودی بیشتر از تعداد کاراکترهای مشخص شده را نمی پذیرد. با این حال، این ویژگی هیچ بازخوردی ارائه نمی‌ دهد. بنابراین اگر می خواهید به کاربر اخطار دهید، باید از کد جاوا اسکریپت استفاده کنید.

مثال

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" size="50"><br>
4   <label for="pin">PIN:</label><br>
5   <input type="text" id="pin" name="pin" maxlength="4" size="4">
6 </form>

مشاهدهٔ نتیجه

ویژگی‌های min و max

ویژگی‌های min و max مقدارهای حداقل و حداکثر را برای عنصر <input> مشخص می‌کنند.

ویژگی‌های min و max با انواع ورودی زیر کار می‌کنند:

عدد، محدود، تاریخ و زمان محلی، ماه، زمان و هفته.

نکته: از ویژگی های min و max با هم برای ایجاد یک محدود مقادیر مجاز استفاده کنید.

مثال

یک تاریخ max و یک تاریخ min و یک محدود مقادیر مجاز تعیین می کند:

 1 <form>
 2   <label for="datemax">Enter a date before 1980-01-01:</label>
 3   <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
 4 
 5   <label for="datemin">Enter a date after 2000-01-01:</label>
 6   <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
 7 
 8   <label for="quantity">Quantity (between 1 and 5):</label>
 9   <input type="number" id="quantity" name="quantity" min="1" max="5">
10 </form>>

مشاهدهٔ نتیجه

ویژگی multiple

ویژگی multiple مشخص می‌کند که کاربر مجاز است یک یا چند مقدار را در یک فیلد ورودی وارد کند.

ویژگی multiple با نوع های ایمیل و فایل کار می‌کند.

مثال

یک فیلد آپلود فایل که چند مقدار می‌پذیرد:

1 <form>
2   <label for="files">Select files:</label>
3   <input type="file" id="files" name="files" multiple>
4 </form>

مشاهدهٔ نتیجه

ویژگی pattern

ویژگی pattern عبارت منظمی را مشخص می‌کند که هنگام ارسال فرم مقدار فیلد ورودی با آن مقایسه می شود.

ویژگی pattern با انواع ورودی زیر کار می‌کند:

متن، جستجو، url، تلفن، ایمیل و کلمه عبور.

نکته: ویژگی title سراسری را، بمنظور توصیف pattern برای کمک به کاربر استفاده کنید.

نکته: در مورد عبارات با قاعده در آموزش جاوا اسکریپت ما بیشتر بیاموزید.

مثال

یک فیلد ورودی که فقط سه دارای سه حرف است (بدون عدد یا کاراکترهای خاص):

1 <form>
2   <label for="country_code">Country code:</label>
3   <input type="text" id="country_code" name="country_code"
4   pattern="[A-Za-z]{3}" title="Three letter country code">
5 </form>

مشاهدهٔ نتیجه

ویژگی placeholder

ویژگی placeholderیک راهنمای کوچک را مشخص می کند که مقدار مورد انتظار فیلد ورودی را توصیف می‌کند (یک مقدار نمونه یا توصیف کوتاهی از قالب بندی).

راهنما پیش از اینکه کاربر مقداری را وارد کند در فیلد ورودی نمایش داده می‌شود.

ویژگی placeholder با انواع ورودی زیر کار می‌کند: متن، جستجو، url، تلفن، ایمیل و کلمه عبور.

مثال

یک فیلد ورودی با متن placeholder:

1 <form>
2   <label for="phone">Enter a phone number:</label>
3   <input type="tel" id="phone" name="phone"
4   placeholder="123-4567-8901"
5   pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
6 </form>

مشاهدهٔ نتیجه

ویژگی required

ویژگی required مشخص می‌کند که یک فیلد ورودی باید قبل از submit شدن فرم پر شود.

ویژگی required با انواع ورودی زیر کار می‌کند: متن، جستجو، url، تلفن ایمیل، کلمه عبور، انتخابگرهای تاریخ، عدد، چک باکس، radio و فایل.

مثال

یک فیلد ورودی required:

1 <form>
2   <label for="username">Username:</label>
3   <input type="text" id="username" name="username" required>
4 </form>

مشاهدهٔ نتیجه

ویژگی Step

ویژگی step فاصله اعداد مجاز برای یک فیاد ورودی را تعیین می‌کند.

مثال: اگر step="3" باشد، فاصله اعداد مجاز می‌شود ۳-، ۰، ۳، ۶ و غیره.

نکته: ویژگی step را می‌توان با ویژگی‌های min و max برای ایجاد محدوده مقدارهای مجاز استفاده کرد.

ویژگی step با انواع ورودی زیر کار می‌کند:عدد، محدوده، تاریخ، تاریخ و زمان محلی، ماه، زمان و هفته.

مثال

یک فیلد ورودی با فاصله اعداد مجاز تعیین شده:

1 <form>
2   <label for="points">Points:</label>
3   <input type="number" id="points" name="points" step="3">
4 </form>

مشاهدهٔ نتیجه

توجه: محدودیت‌های ورودی محفوظ از خطا و شکست نیستند و جاوا اسکریپت راه‌های زیادی برای اضافه کردن ورودی غیرمجاز فراهم می‌کند. برای محدود کردن صحیح ورودی باید توسط گیرنده (سرور) هم بررسی شوند.

ویژگی autofocus

ویژگی autofocus مشخص می‌کند که هنگام بارگذاری صفحه focus باید بطور خودکار روی فیلد ورودی باشد.

مثال

هنگام بارگذاری صفحه Focus را بطور خودکار روی فیلد ورودی “First name” قرار می‌دهد:

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" autofocus><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname">
6 </form>

مشاهدهٔ نتیجه

ویژگی های height و width

ویژگی‌های height و width عرض و ارتفاع یک عنصر <input type="image"> را مشخص می‌کنند.

نکته: همیشه هردو ویژگی عرض و ارتفاع را برای تصویر تعیین کنید. اگر عرض و ارتفاع مشخص شده باشند، هنگام بارگذاری صفحه، فضای مورد نیاز تصویر رزرو خواهد شد. بدون این ویژگی‌ها مرورگر اندازه تصویر را نمی‌داند و نمی‌تواند فضای مناسب را برای آن اختصاص دهد. تأثیرش این خواهد بود که چیدمان صفحه در هنگام بارگذاری (درحالی که تصویر بارگذاری می‌شود) تغییر خواهد کرد.

مثال

تصویری را بصورت کلید submit یا ویژگی‌های عرض و ارتفاع تعریف می‌کند:

1 <form>
2   <label for="fname">First name:</label>
3   <input type="text" id="fname" name="fname"><br><br>
4   <label for="lname">Last name:</label>
5   <input type="text" id="lname" name="lname"><br><br>
6   <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
7 </form>

مشاهدهٔ نتیجه

ویژگی list

ویژگی list به عنصر <datalist> اشاره دارد که دارای گزینه‌های از پیش تعیین‌شده برای یک عنصر <input> است.

مثال

یک عنصر <input> با مقدارهای از پیش تعیین شده در یک <datalist>:

 1 <form>
 2   <input list="browsers">
 3   <datalist id="browsers">
 4     <option value="Internet Explorer">
 5     <option value="Firefox">
 6     <option value="Chrome">
 7     <option value="Opera">
 8     <option value="Safari">
 9   </datalist>
10 </form>

مشاهدهٔ نتیجه

ویژگی autocomplete

ویژگی autocomplete مشخص می‌کند آیا تکمیل خودکار برای یک فیلد ورودی فعال یا غیرفعال باشد.

autocomplete مرورگر را قادر می سازد که مقدار را پیش بینی کند. هنگامی که کاربر ضروع به تایپ در یک فیلد می کند، مرورگر باید گزینه هایی را براساس مقادیر تایپ شده قبلی برای پر کردن فیلد را نمایش دهد.

ویژگی autocomplete با <form> انواع <input> زیر کار می‌کند:

متن، جستجو، url، تلفن، ایمیل، کلمه عبور، datepicker، محدوده و رنگ.

مثال

یک فرم HTML با autocomplete فعال (و برای یک فیلد ورودی غیرفعال):

1 <form action="/action_page.php" autocomplete="on">
2   <label for="fname">First name:</label>
3   <input type="text" id="fname" name="fname"><br><br>
4   <label for="lname">Last name:</label>
5   <input type="text" id="lname" name="lname"><br><br>
6   <label for="email">Email:</label>
7   <input type="email" id="email" name="email" autocomplete="off"><br><br>
8   <input type="submit" value="Submit">
9 </form>

مشاهدهٔ نتیجه

نکته: در بعضی از مرورگرها ممکن است نیاز باشد تابع autocomplete را فعال (به انگلیسی: Activate) کنید تا اجرا شود. (به زیرمجموعه "Prefrences" در منوی مرورگر مراجعه کنید)

عنصرهای فرم و ورودی در HTML

تگ	تعریف
<form>	یک فرم HTML برای ورودی کاربر تعریف می‌کند
<input>	یک کنترل ورودی تعریف می‌کند.

برای دسترسی به مرجع کامل همهٔ تگ‌های موجود HTML به مرجع تگ HTML ما مراجعه کنید.

صفحهٔ بعد»

«صفحهٔ قبل