ساخت فرم در HTML | انواع input در فرم و آشنایی با المان‌های مجاز


نویسنده:
پنجشنبه ۳ مهر ۱۳۹۹
انواع input در فرم

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

هوجه: چنانچه هنوز درس قبلی را مطالعه نکرده‌اید بهتر است ابتدا به این درس مراجعه کنید و بحث کار با فرم‌ها در HTML را بیاموزید.

عناصر قابل استفاده در فرم

در یک تگ فرم می‌توان هر یک از تگ‌های زیر را استفاده کرد. در ادامه‌ی درس راجع به پرکاربردترین آنها به طور مجزا بحث خواهیم کرد.

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <output>
  • <option>

از انواع input در فرم ها بیشتر بدانید!

در جلسه قبلی گفتیم که Inputها به واسطه‌ی ویژگی type‌ از هم متمایز می‌شوند و می‌توان در موقعیت‌های مختلف از input با type متفاوت استفاده کرد. اما انواع input در فرم به مواردی که در درس قبل گفتیم ختم نمی‌شوند. در لیست زیر می‌توانید انواع مختلف inputها را مشاهده کنید.

در این جلسه قصد نداریم مجدد درباره‌ی typeها بحث کنیم پس شما می‌توانید هر فیلد را درون تگ form قرار داده و آزمایش کنید تا متوجه تفاوت آنها شوید.

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">

ایجاد محدودیت در inputها

در input میتوان از صفات محدود کننده برای کنترل ورودی کاربر استفاده کرد.به مثال زیر توجه کنید:


خب در مثال باید از فیلد با نوع Number استفاده شده که به کمک خصیصه min و max برای این مقدار یک بازه‌ی قابل قبول تعریف کرده‌ایم. کافیست یک عدد خارج از این رنج را در فیلد وارد کرده و روی ارسال کلیک کنید تا متوجه کاربرد این محدودکننده‌ها شوید.

انواع صفات محدودکننده در input:

خصیصهتوضیحات
maxتعیین حداکثر مقدار مجاز یک ورودی
minتعیین حداقل مقدار مجاز یک ورودی
step تعیین سطح تغییرات در فیلد number ، با هر + عدد درون فیلد چقدر تغییر کند.
maxlengthتعیین حداکثر تعداد کارکترهای مجاز در یک ورودی
readonlyمشخص می‌کند که فیلد فقط قابلیت خواندن دارد و نمی‌توان مقدار را تغییر داد.
requiredتکمیل فیلد را اجباری می‌کند، اگر فیلد مدنظر تکمیل نشود فرم ارسال نخواهدشد.
checkedاین خصیصه را در یکی از checkbox یا radio ها قرار دهید آن را به صورت پیش فرض گزینه انتخاب شده در نظر می‌گیرد.
disabledفیلد را غیرفعال می‌کند.

برای تست کردن هر مورد کافیست یک input‌ در فرم خود قرار دهید و این خصیصه‌ها را درون input قرار دهید.

سایر خصیصه‌های Input

خصیصه‌های قابل تعریف برای input به محدودکننده‌ها ختم نمی‌شوند. می‌توان از خصیصه‌های دیگری همچون موارد زیر هم بهره برد:

placeholder

به کمک placeholder می‌توان یک مقدار یا توضیح اولیه درون فیلد قرار داد که کاربر را برای ورود مقدار صحیح راهنمایی می‌کند.

value

این خصیصه به فیلد یک مقدار اولیه اختصاص می‌دهد. کاربر برای تکمیل فیلد باید ابتدا مقدار value را پاک کند تا بتواند مقدار دلخواه را وارد نماید.

autofocus

اگر از این خصیصه در یک فیلد استفاده شود، هنگام لود صفحه در آن فیلد مشخص فوکوس اتفاق می‌افتد.

به مثال زیر توجه کنید تا خروجی کار را به خوبی مشاهده و تست کنید.


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


معرفی select برای ساخت لیست کشویی

از select ها زمانی در فرم استفاده می‌کنیم که می‌خواهیم کاربر از لیست کشویی گزینه‌ای را انتخاب کند. دردرون تگ select از تگ‌های option استفاده می‌شود که برای معرفی گزینه‌های انتخابی کاربرد دارد.

همانطور که در خروجی بالا مشاهده می‌کنید کاربر فقط حق انتخاب یک گزینه را دارد. اما می‌توانید با اضافه کردن خصیصه Multiple به تگ select قابلیت چند انتخابی را ایجاد کنید.


معرفی textarea برای ایجاد فیلد متنی

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

به کمک خصیصه rows میتوانید مشخص کنید که ارتفاع این باکس ورودی به اندازه‌ی چند خط باشد. همچنین به کمک cols عرض textarea را مشخص می‌کنید:


جمع‌بندی بحث فرم در HTML

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

۱- چگونه ارسال فرم را تکمیل کنیم؟

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

۲- چگونه فرم زیباتری داشته باشیم؟

خب همانطور که تاکنون متوجه شدید، آرایش صفحات با CSS است! پس دست به کار شوید و فرم‌های ایجاد شده را به کمک CSS زیباتر کنید. می‌توانید به کمک دستورات width، height، color، border-color، padding و margin در CSS به بهبود ظاهر فرم‌ها کمک کنید.

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

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *