ساخت فرم در HTML | انواع 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 میتوان از صفات محدود کننده برای کنترل ورودی کاربر استفاده کرد.به مثال زیر توجه کنید:

<form>
  <label for="grade">به این آموزش از ۰ تا ۱۰۰ نمره دهید:</label>
  <input type="number" id="grade" name="grade" min="0" max="100" value="50" step="10">
  <input type="submit" value="ارسال">
</form>

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

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

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

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

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

placeholder

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

value

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

autofocus

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

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

<form>
  <label for="phone">شماره تماس شما:</label>
  <input type="tel" id="phone" name="phone"
 placeholder="09121234567"
>
  <label for="subject">موضوع تماس:</label>
  <input type="text" id="subject" name="subject" value="درخواست همکاری">
</form>

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

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

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

<label for="langs">زبان مورد علاقه شما؟</label>
<select id="langs" name="langs">
  <option value="Cplus">C++</option>
  <option value="PHP">PHP</option>
  <option value="JAVA">JAVA</option>
</select>

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

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

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

<textarea name="message" rows="3" cols="20">
</textarea>

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

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

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

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

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

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

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

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