سایر کنترل‌های فرم

مقدمه

در درس قبل با کنترل‌هایی که توسط عنصر input ایجاد می‌شوند، آشنا شدیم و در این درس، قصد داریم سایر کنترل‌های فرم را معرفی و بررسی کنیم. کنترل‌هایی که در این درس با نحوه‌ی ایجاد آنها آشنا خواهیم شد، توسط عناصری به جز input ایجاد می‌شوند.

ایجاد فیلد ورود متن چندخطی

برای ایجاد یک کنترل یا فیلد چندخطی (multi-line) برای ورود و ویرایش متن، می‌توانیم از عنصری به نام textarea استفاده کنیم. این عنصر برای مواقعی که بخواهیم به کاربر امکان وارد کردن مقدار قابل توجهی محتوای متنی داده شود، مناسب است. برای مثال، در کد زیر یک فیلد متنی چندخط با استفاده از عنصر textarea ایجاد شده و از کاربر خواسته شده روایتی از زندگی خود را در آن وارد کند.

HTML

<form action="#">
  <label for="story">Tell us your story:</label>
  <textarea id="story" name="story">
    It was a dark and stormy night ....
  </textarea>
</form>

صفت spelcheck یکی از صفت‌های عمومی است که معمولاً همراه عنصر textarea استفاده می‌شود. با استفاده از این صفت، می‌توانیم تعیین کنیم که عنصر مورد نظر (در اینجا textarea) مجهز به قابلیت بررسی بررسی املای کلمات باشد یا خیر.

اما علاوه بر صفت‌های عمومی، عنصر textarea از تعدادی صفت دیگر نیز پشتیبانی می‌کند که البته اکثر آنها را قبلاً هنگام بررسی عناصر input از نوع‌های مختلف دیده‌ایم. به هر حال، صفت‌های مورد پشتیبانی عنصر textarea عبارتند از:

• cols: از این صفت برای تعیین عرض قابل مشاهده‌ی فیلد مربوط به عنصر textarea بر حسب عرض متوسط کاراکترها استفاده می‌شود.
• rows: از این صفت برای تعیین ارتفاع فیلد مربوط به عنصر textarea بر حسب تعداد خطوط استفاده می‌شود.
• wrap: این صفت، نحوه‌ی نمایش متن درون فیلد textarea را مشخص می‌کند.
• maxlength: این صفت مشخص‌کننده‌ی تعداد حداکثر کاراکترهایی است که کاربر می‌تواند درون فیلد textarea وارد کند.
• minlength: این صفت مشخص‌کننده‌ی حداقل تعداد کاراکترهایی است که کاربر باید درون فیلد وارد کند.
• autocomplete: این صفت تعیین‌کننده‌ی نحوه‌ی مدیریت قابلیت تکمیل خودکار متن درون فیلد textarea توسط مرورگر است.
• autofocus: این صفت بولین برای اعطای فوکوس به کنترل مورد نظر پس از بارگذاری صفحه کاربرد دارد.
• required: با استفاده از این صفت، می‌توانیم ارسال فرم را مشروط به وارد کردن متن درون فیلد مورد نظر کنیم و به عبارت دیگر، فیلد را اجباری کنیم.
• readonly: با ستفاده از این صفت بولین می‌توانیم امکان ویرایش محتوای فیلد را از کاربر بگیریم.
• disabled: با استفاده از این صفت بولین می‌توانیم امکان هرگونه تعامل با کنترل را از کاربر سلب کنیم.
• placeholder: با استفاده از این صفت می‌توانیم یک راهنمایی کوتاه در مورد محتوایی که کاربر باید درون فیلد وارد کند، برای کاربر نمایش دهیم.
• form: با استفاده از این صفت، می‌توانیم تعلق کنترل مورد نظرمان را به یک فرم اعلام کنیم.

بسیاری از این صفت‌ها را قبلاً و به طور خاص هنگام بررسی عناصر input مختلف دیده‌ایم و صفت‌های cols، rows و warp تنها صفاتی هستند که قبلاً با آنها مواجه نشده‌ایم.

صفت‌های cols و rows برای تعیین ابعاد فیلد ایجاد شده با استفاده از عنصر textarea کاربرد دارند. صفت cols تعیین‌کننده‌ی اندازه‌ی عرض فیلد است و مقدار این صفت یک عدد صحیح مثبت است که بر حسب میانگین عرض کاراکترها در نظر گرفته می‌شود. مقدار پیش فرض این صفت در اکثر مرورگرها برابر با 20 است. صفت rows نیز اندازه‌ی ارتفاع فیلد را مشخص می‌کند و عدد صحیحی که به عنوان مقدار دریافت می‌کند، معرف تعداد خطوط متنی است.

صفت wrap می‌تواند یکی از دو مقدار hard یا soft را دریافت کند. استفاده از مقدار hard باعث می‌شود که مرورگر به طور خودکار شکست‌خط‌هایی (line breaks) را ایجاد کند تا تعداد کاراکترهای هیچ خطی بیشتر از تعداد مشخص شده با استفاده از صفت col نباشد. به عبارت دیگر، اگر مقدار n را برای صفت col تعیین کرده باشیم، مرورگر به طور خودکار در هر خط بعد از کاراکتر n ام یک شکست‌خط ایجاد می‌کند. اما مقدار soft که مقدار پیش‌فرض این صفت هم هست، باعث می‌شود که مرورگر تنها شکست خط هایی را که در متن وجود دارد اعمال کند و هیچ شکست خطی را اضافه نکند.

ایجاد یک منوی چند گزینه‌ای

یکی دیگر از عناصر HTML که برای ایجاد کنترل‌های تعاملی کاربرد دارد، عنصر select است که یک منوی drop-down متشکل از چند گزینه را ایجاد می‌کند. گزینه‌های منو با استفاده از عنصر option ایجاد می‌شوند.

HTML

<form action="#">
  <label for="pet-select">Choose a pet:</label>
  <select name="pet" id="pet-select">
    <option value="">Please choose an option</option>
    <option value="dog">Dog</option>
    <option value="Cat">Cat</option>
    <option value="Hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option>Goldfish</option>
  </select>
</form>

ایجاد یک نوار پیشرفت

برای ایجاد یک نوار پیشرفت (progress bar) که در واقع، شاخصی است که نشان‌دهنده‌ی میزان پیشرفت یک فرایند یا کار مشخص است، از عنصری به نام progress استفاده می‌شود.

HTML

<form action="#">
  <label for="file">File progress:</label>
  <progress id="file" max="100" value="70">70%</progress>
</form>

کاربرد صفت‌های max و value برای یک عنصر progress از این قرار است:

• max: با استفاده از صفت max برای یک عنصر progress می‌توانیم مقدار کاری را که تکمیل فرایند مورد اشاره‌ی عنصر progress نیاز دارد، مشخص کنیم. مقپدار پیش‌فرض این صفت برابر با 1 است اما می‌توان هر عدد اعشاری مثبت را به آن اختصاص داد.
• value: این صفت، مشخص‌کننده‌ی مقدار کار انجام شده از کل فرایند مورد نظر است. مقدار این صفت باید یک عدد اعشاری بین صفر و مقدار max باشد. بدیهی است که در غیاب صفت max مقدار صفت value باید عددی بین صفر و یک باشد. اگر برای یک عنصر progress از صفت value استفاده نشود، نوار پیشرفت دارای وضعیت نامشخص خواهد بود. یعنی به یک فعالیت در حال انجام اشاره می‌کند که فاقد هرگونه نشانه‌ای از مدت زمانی است که برای تکمیل آن فعالیت لازم است.

دقت داشته باشید که مقدار حداقل یک عنصر progress همواره برابر با صفر است و استفاده از صفت min برای این عنصر مجاز نیست. در ضمن، شکل ظاهری یک progress bar نیز به مرورگر و پلتفرم بستگی دارد.