ساخت فرم در 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 میتوان از صفات محدود کننده برای کنترل ورودی کاربر استفاده کرد.به مثال زیر توجه کنید:
1 2 3 4 5 | <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:
| خصیصه | توضیحات |
| max | تعیین حداکثر مقدار مجاز یک ورودی |
| min | تعیین حداقل مقدار مجاز یک ورودی |
| step | تعیین سطح تغییرات در فیلد number ، با هر + عدد درون فیلد چقدر تغییر کند. |
| maxlength | تعیین حداکثر تعداد کارکترهای مجاز در یک ورودی |
| readonly | مشخص می‌کند که فیلد فقط قابلیت خواندن دارد و نمی‌توان مقدار را تغییر داد. |
| required | تکمیل فیلد را اجباری می‌کند، اگر فیلد مدنظر تکمیل نشود فرم ارسال نخواهدشد. |
| checked | این خصیصه را در یکی از checkbox یا radio ها قرار دهید آن را به صورت پیش فرض گزینه انتخاب شده در نظر می‌گیرد. |
| disabled | فیلد را غیرفعال می‌کند. |
برای تست کردن هر مورد کافیست یک input در فرم خود قرار دهید و این خصیصه‌ها را درون input قرار دهید.
سایر خصیصه‌های Input
خصیصه‌های قابل تعریف برای input به محدودکننده‌ها ختم نمی‌شوند. میتوان از خصیصه‌های دیگری همچون موارد زیر هم بهره برد:
placeholder
به کمک placeholder میتوان یک مقدار یا توضیح اولیه درون فیلد قرار داد که کاربر را برای ورود مقدار صحیح راهنمایی می‌کند.
value
این خصیصه به فیلد یک مقدار اولیه اختصاص می‌دهد. کاربر برای تکمیل فیلد باید ابتدا مقدار value را پاک کند تا بتواند مقدار دلخواه را وارد نماید.
autofocus
اگر از این خصیصه در یک فیلد استفاده شود، هنگام لود صفحه در آن فیلد مشخص فوکوس اتفاق می‌افتد.
به مثال زیر توجه کنید تا خروجی کار را به خوبی مشاهده و تست کنید.
1 2 3 4 5 6 7 8 | <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 استفاده میشود که برای معرفی گزینه‌های انتخابی کاربرد دارد.
1 2 3 4 5 6 | <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 استفاده می‌کنیم. نمونه‌ای از آن را میتوانید در فرم ثبت نظر در پایین صفحه مشاهده نمایید.
1 2 | <textarea name="message" rows="3" cols="20"> </textarea> |
به کمک خصیصه rows میتوانید مشخص کنید که ارتفاع این باکس ورودی به اندازه‌ی چند خط باشد. همچنین به کمک cols عرض textarea را مشخص می‌کنید:
جمع‌بندی بحث فرم در HTML
به کمک تمام فیلد‌ها و خصیصه‌هایی که طی این دو جلسه آموختیم، میتوان یک فرم کامل و صحیح ایجاد کرد. اما ممکن است در این جا دو سوال برای شما مطرح شود:
۱- چگونه ارسال فرم را تکمیل کنیم؟
شما اکنون در حال طراحی بخش فرانت‌اند کار هستید پس فقط باید به طراحی بخش ظاهری، ایجاد فیلدهای مناسب فکر کنید. بعد از اینکه یک فرم را به شکل صحیح ساختید کافیست در action آن آدرس یک صفحه برای پردازش فرم را وارد کنید و کار را به برنامه‌نویس بک‌اند بسپارید. با کلیک بر روی submit تمامی اطلاعات فرم به آدرس مدنظر ارسال می‌شوند.
۲- چگونه فرم زیباتری داشته باشیم؟
خب همانطور که تاکنون متوجه شدید، آرایش صفحات با CSS است! پس دست به کار شوید و فرم‌های ایجاد شده را به کمک CSS زیباتر کنید. میتوانید به کمک دستورات width، height، color، border-color، padding و margin در CSS به بهبود ظاهر فرم‌ها کمک کنید.
خب دوستان عزیز، در این دو جلسه سعی کردم مبحث مربوط به فرم را به خوبی بیان کنیم. سوالات و نقطه نظرات خود را از طریق بخش کامنت برای ما ارسال کنید.
سلام خیلی ممنون از توضیحات خوبتون برای اینکه در select بتونیم باکس کشویی بزاریم که به صورت دایره های رنگی قابل انتخاب به عنوان رنگ مورد نظر باشه باید چه کدی بزنیم
سلام وقت بخیر
با تگ select نمیتونید همچین کاری کنید. باید با استفاده از javascript اینکارو انجام بدید که در قالب یک کامنت نمیشه توضیح داد.
موفق باشید
سلام خانم جعفرپور
وقتتون بخیر
بین مطالبی که ر این مورد سرچ کردم و خوندم. مطلب شما خیلی خوب طبقه بندی و توضیح داده شده بود و لذت بردم از دقتتون در این زمینه
سلام آیناز جان، ممنون از حضورت در این سایت ، پیام محبت آمیز و انرژی مثبتت.
سلام من یک سوال داشتم آیا میتونیم جلوی ورودی یا همان input @ بگذاریم یا # یا & اگر میشود چرا یا اگر نمیشود چرا
جلو منظورتون کجاست؟ داخل تگ input ؟ خیر نمیشه چون این کارکترها در html معنایی ندارند.
سلام ممنون بابت آموزش خوبتون خیلی مفید بود
مرسی که وقت گذاشتید و مطالعه کردید
سلام ممنون بابت اموزش های خوبتون.
میخوام بدونم تو قسمت فرم سایت شما که عنوان ها مثلا کلمه نام یا ایمیل در قسمت بالا و روی کادر ها قرار گرفتن چجوریه؟؟
ممنون ..
با css به کمک position ها لیبل رو اوردیم روی فیلد قرار دادیم
من میخواستم بدونم من برای گرفتن سفارش کالا چه کدیور بنویسم که فرم فرد مورد نظر را مشاهده کنم
متوجه سوالتون نشدم! با این کد نمیتونید یه فرم کامل بنویسید چون این بخش فقط برای فرانت هستش بخ پردازشی کار به زبان برنامه نویسی نیاز داره.
سلام
با استفاده از این تگ ها چطوری میشه قابلیت کامنت گذاشتن رو اضافه کرد؟
سلام دوست عزیز شما با Html css فقط میتونید فرم کامنت گذاشتن رو طراحی کنید. مراحل پردازش و ثبت در دیتابیس باید با زبان برنامه نویسی بک‌اند انجام بشه
سلام من برای اینپوت تکست یک بوردر معرفی کردم و اون رو با کمک بوردر ردیوس کمی گرد کردم.
حالا مشکلم اینجاست که وقتی در صفحه html روی تکست کلیک میکنم یک بوردر عادی روی اون بوردری که من طراحی کردم میندازه لطفا راهنمایی کنید اون رو چجوری عوض کنم.ممنون
سلام دوست عزیز، برای اینکار باید از شبه کلاس‌ها استفاده کنید که در درسهای جلوتر بررسی کردیم. برای این موضوع کافیه به input:focus استایل بدید. یعنی استایل زمانی اعمال میشه که روی فیلد کلیک شده.