خصوصیت size در HTML

در HTML از خصوصیت size برای تعیین پهنای برخی از المان های <input> براساس تعداد کاراکتر آشکار و همچنین تعیین ارتفاع المان های <select> براساس تعداد آیتم قابل مشاهده استفاده می‌شود.

مقدار خصوصیت size باید یک عدد صحیح مثبت باشد. همچنین در صورت تعیین ابعاد المان‌ها با کمک CSS، این ابعاد نسبت به مقدار خصوصیت size اولویت بالاتری دارد. برای مثال اگر پهنای یک المان <input> در CSS با کمک ویژگی width مشخص شود مقدار خصوصیت size اهمیتی نخواهد داشت.

تعیین پهنای المان <input> براساس تعداد کاراکتر آشکار

اگر مقدار خصوصیت size را به صورت یک عدد برای یک المان <input> با نوع مناسب (فقط در صورت استفاده از مقادیر text, search, tel, url, email و password برای خصوصیت type) مشخص کنید این عدد پهنای المان موردنظر را براساس تعداد کاراکتر آشکار یا قابل مشاهده تعیین می‌کند.

مثال زیر یک تکست باکس (المان <input> با نوع text) را در HTML نشان می‌دهد که دارای خصوصیت size با مقدار 5 می‌باشد. به این ترتیب، تکست باکس حاصل تقریبا فضایی به اندازه 5 کاراکتر قابل مشاهده را اشغال می‌کند. در صورتی که محتوای داخل این تکست باکس بیشتر از 5 کاراکتر باشد کاربر می‌تواند با جابجایی کرسر متنی (برای مثال با فشردن کلیدهای پیکانی راست و چپ) کاراکترهای دیگر را مشاهده کند.

<label for="fname">First name: </label>
<input type="text" id="fname" name="fname" value="ABCDEFG" size="5">

در ادامه نتیجه المان‌های فوق را مشاهده می‌کنید:

First name:

فراموش نکنید مقدار خصوصیت size تأثیری روی تعداد کاراکتر قابل تایپ در تکست باکس ندارد. بنابراین اگر می‌خواهید حداکثر تعداد کاراکتر قابل تایپ (یا طول رشته ورودی) در یک المان <input> مناسب را مشخص کنید لازم است از خصوصیت maxlength کمک بگیرید.

تعیین ارتفاع المان های <select> براساس تعداد آیتم قابل مشاهده

خصوصیت size برای المان‌های <select> ارتفاع المان را براساس تعداد گزینه‌های قابل مشاهده توسط کاربر مشخص می‌کند.

مثال زیر یک لیست باکس (المان <select>) را در HTML نشان می‌دهد که دارای خصوصیت size با مقدار 3 می‌باشد. این لیست دارای 5 عنصر است اما در هر لحظه تنها 3 عنصر آن قابل مشاهده است. در چنین حالتی کاربر می‌تواند با کمک نوار اسکرول یا چرخ ماوس سایر عناصر لیست را مشاهده کند.

<select name="items" id="items" size="3">
  <option value="item1">Item1</option>
  <option value="item2">Item2</option>
  <option value="item3">Item3</option>
  <option value="item4">Item4</option>
  <option value="item5">Item5</option>
</select>

در ادامه نتیجه المان‌های فوق را مشاهده می‌کنید:

بازگشت به فهرست مجموعه آموزشی HTML