آموزش ساختن فرم HTML با استفاده از تگ Form
تگ form از عناصر مهم و بسیار کاربری HTML است که امروز قرار است در این آموزش با نحوه ی استفاده از آن آشنا شویم. در آموزش امروز به همراه مسترکد می آموزیم که چگونه فرم HTML بسازیم و با تگ form و سایر عناصر موجود برای ایجاد فرم ها در اچ تی ام ال کار کنیم. کارمان را با شرح بخش های مختلف یک فرم شروع خواهیم کرد و سپس در پایان، برای آشنایی بیشتر شما با نحوه ی کار فرم ها، یک فرم HTML نمونه نیز به شما نشان خواهیم داد تا به خوبی موارد اصلی که در این آموزش می آموزید را تمرین کرده و به خاطر بسپارید. توجه داشته باشید که در این آموزش تنها بخش هایی را مورد بررسی قرار میدهیم که برای ساخت هر فرمی به آنها نیاز خواهید داشت و در برخی موارد بر اساس نیاز از شرح برخی صفات و … که ممکن است برای شروع کارتان کاربرد کمتری داشته باشند خودداری میکنیم.
ایجاد فرم در HTML
برای ایجاد یک فرم HTML کارمان را با استفاده از تگ form شروع میکنیم. تگ فرم به صورت ساده و در حالت کلی، شکلی مشابه کد زیر خواهد داشت :
1 2 3 | <form action="url" method="GET|POST"> عناصر فرم را در اینجا قرار میدهیم </form> |
همانطور که مشاهده میکنید در تگ form از دو attribute با عناوین action و method استفاده کرده ایم. هر دوی این صفات در کار کردن صحیح یک فرم، مهم و حائز اهمیت هستند.
action : با استفاده از این صفت تعیین میکنید که اطلاعات فرم به چه آدرسی ارسال شود. کافی است آدرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند به عنوان مقدار action قرار دهید.
method : متد میتواند دارای دو حالت POST یا GET باشد. زمانی نوع GET را برای فرم خود انتخاب میکنیم که اطلاعاتی که توسط فرم ارجاع داده میشوند، دارای اهمیت (خصوصا اهمیت امنیتی) خاصی نیستند. مثلا یک کوئری جستجو و … وقتی از حالت GET استفاده کنید، متغیر ها و مقادیر آنها پس از ارسال فرم، در انتهای آدرسی که به عنوان action فرم قرار گرفته، قابل مشاهده خواهند بود. مانند آدرس زیر :
1 | actionpage.php?firstname=Little&lastname=Mouse |
همانطور که مشاهده میکنید، در آدرس بالا میتوان مقدار firstname و lastname را به طور کامل مشاهده کرد.
برعکس این حالت، زمانی که میخواهیم اطلاعات ارسالی در آدرس صفحه ی action مشخص نباشند، از متد POST استفاده میکنیم. مثلا زمانی که میخواهیم اطلاعاتی را به دیتابیس ارسال کرده و آپدیت کنیم، یا وقتی میخواهیم از کاربر رمز دریافت کنیم و کلیه ی حالات مشابه. هیچوقت نباید اجازه دهید اطلاعات حساب در url به نمایش در بیایند.
صفت name برای عناصر فرم
قبل از اینکه شروع کنیم و عناصر قابل استفاده در فرم را به شما معرفی کنیم، لازم است به این نکته اشاره کنیم که اگر میخواهید اطلاعاتی که در یک فرم از کاربر دریافت میکنید، به صورت صحیح ارسال شوند، تک تک عناصر فرم شما باید دارای attribute یا صفت name باشند. مشخص نکردن name برای یک عنصر میتواند منجر به عدم ارسال اطلاعات این عنصر به صفحه ی action فرم و ناقص شدن اطلاعات دریافتی شود. بنابراین نسبت دادم نام به عناصری که در فرمتان قرار خواهید داد را فراموش نکنید.
دریافت اطلاعات با عنصر input
input عنصر ارزشمندی است که بر اساس نیاز شما میتواند به شکل های گوناگونی در آمده و از کاربر اطلاعات دریافت کند. تغییر نوع input را با استفاده از صفت type انجام میدهیم. به کد زیر توجه کنید :
1 | <input type="neededtype" name="customname"> |
در کد بالا میتوانیم مقدار دلخواه خود را از قبیل text, radio, password و … بجای عبارت neededtype قرار دهیم تا نوع ورودی بر اساس type تعیین شده تغییر کند. بعضی از انواع پر کاربرد input را در ادامه شرح میدهیم :
text : استفاده از این تایپ برای شما یک خط ورودی متنی ایجاد میکند. مثلا استفاده از این تایپ در زمانی که میخواهید نام، نام خانوادگی و کلیه ی موارد مشابه را از کاربر دریافت کنید میتواند مناسب باشد. نمونه ی استفاده از این تایپ به شکل زیر است :
1 | <input type="text" name="firstname"> |
radio : این تایپ برای شما انتخاب های رادیویی ایجاد میکند. به این صورت که میتوانید با درج چندین input دارای تایپ radio به کاربر انتخاب های مختلفی بدهید که تنها یکی از آنها قابل انتخاب باشد. توجه داشته باشید که در این حالت در مورد هر گروه انتخاب، باید نام تمامی input های رادیویی که ایجاد میکنید را یکسان در نظر بگیرید :
1 2 | <input type="radio" name="subject" value="maths"> Maths <input type="radio" name="subject" value="physics"> Physics |
password : تفاوت این نوع با نوع text این است که در این حالت به محض اینکه کاربر هر کارکتر را وارد میکند، محتوای وارد شده mask میشود و بجای آن ستاره یا دایره به نمایش در می آید. به همین جهت استفاده از نوع password برای دریافت اطلاعات محرمانه مانند رمز عبور مناسب خواهد بود. در نمونه ی زیر ابتدا نام کاربری و سپس پسورد را از کاربر درخواست میکنیم :
1 2 | Username : <input type="text" name="username" > Password : <input type="password" name="password" > |
checkbox : چک باکس ها به کاربر این امکان را میدهند که در صورت تمایل به صورت همزمان بتواند چندین گزینه را انتخاب کند. (دقیقا برعکس radio) در اینجا هم مانند انتخاب های رادیویی، باید در نظر داشته باشید که برای یک گروه انتخاب، نام یکسانی در نظر بگیرید. مثلا در کد زیر، کاربر میتواند از بین سه نوع وسیله ی نقلیه، آنهایی که مایل است را انتخاب کند :
1 2 3 | <input type="checkbox" name="vehicle" value="Bike"> bike<br> <input type="checkbox" name="vehicle" value="Car" checked> car<br> <input type="checkbox" name="vehicle" value="Bus"> bus |
استفاده از مقدار checked در خط دوم ورودی درج شده در کد بالا، نشان میدهد که این انتخاب، از پیش تیک خورده و به صورت پیشفرض انتخاب شده است.
file : با استفاده از این تایپ میتوانید به کاربر اجازه بدهید که فایل دلخواه خود را بارگذاری کرده و به همراه فرم ارسال کند. برای این تایپ صفتی با عنوان accept وجود دارد که نشان میدهد که این ورودی فایل میتواند چه پسوند هایی از فایل را قبول کند. شکل کلی این نوع ورود به صورت زیر است :
1 | <input type="file" name="pic" accept="image/*"> |
درج عبارت image/* در بخش accept باعث میشود که ورود بالا تنها تصاویر را قبول کند. شما میتوانید برای accept مقادیر دیگری را نیز به شرح زیر تعریف کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | audio/* برای پذیرش فایل های صوتی video/* برای پذیرش فایل های ویدئویی image/* برای پذیرش تصاویر - امکان تعریف پسوند های دلخواه مانند مثال زیر میسر است : .gif, .jpg, .png, .doc media_type انواع مدیا طبق آنچه در لینک زیر درج شده : http://www.iana.org/assignments/media-types |
مثلا اگر میخواستیم ورودی داشته باشیم که همه ی فایل های صوتی، ویدئویی و عکس ها را قبول کند میتوانستیم از کد زیر استفاده کنیم :
1 | <input type="file" name="somename" accept="audio/*,video/*,image/*"> |
submit : این نوع input برای ارسال داده های فرم به صفحه ای که در پارامتر action تعیین کرده اید به کار میرود. در این حالت دکمه ی شما حالت نوشتاری خواهد داشت. در صورت تمایل میتوانید بجای این تایپ از تایپ image برای عنصر input استفاده کرده و تصویر دلخواه را در آن قرار دهید. تایپ image نیز دقیقا مانند submit عمل میکند با این تفاوت که در شکل ظاهری آن میتوان از تصویر استفاده کرد :
1 2 3 4 5 | <input type="submit" value="Submit"> یا <input type="image" src="imgsubmit.png" alt="Submit" width="48" height="48"> |
همانطور که مشاهده میکنید در حالت دوم، آدرس تصویر و اندازه ی آن را نیز تعیین کرده ایم. نکته ی خیلی جالبی که در رابطه با این نوع ورودی وجود دارد این است که، این دکمه به همراه ارسال اطلاعات فرم، مختصات دقیق محل کلیک کاربر روی تصویر را نیز به همراه اطلاعات فرم ارسال میکند!
ایجاد منوی دراپ داون با استفاده از عنصر Select
ایجاد منو های دراپ داون و قرار دادن آنها در فرم بسیار ساده است. در اینجا از تگی به نام select استفاده خواهیم کرد. هر تگ select میتواند تعدادی option یا انتخاب را در بر بگیرد که از میان این انتخاب ها، یکی به صورت پیشفرض انتخاب شده که با اضافه کردن مقدار selected به option مورد نظر مشخص میشود. به مثال زیر توجه کنید :
1 2 3 4 | <select name="subject"> <option value="Math" selected>Math</option> <option value="Physics">Physics</option> </select> |
البته select را میتوانید بر اساس نیاز خود به شکل های دیگری هم در آورید. مثلا اگر میخواهید کاربر قادر باشد بیش از یک آیتم را از لیست انتخاب کند میتوانید مانند مثال زیر از عبارت multiple استفاده کنید :
1 | <select multiple> |
به همین صورت اگر میخواهید لیست انتخاب ها اندازه ی خاصی داشته باشد و لازم باشد که کاربر برای دیدن بقیه ی انتخاب ها، اسکرول کند، میتوانید از حالت زیر استفاده کنید :
1 | <select size="3"> |
در مثال بالا، تنها سه تا از انتخاب ها به نمایش در می آیند و برای دیدن سایر انتخاب ها لازم است که در بین آپشن ها اسکرول کنید. طبعا میتوانید تعداد آیتم های به نمایش در آمده را بر اساس نیاز خود، کم و زیاد کنید.
قرار دادن دکمه در فرم با استفاده از عنصر button
مجموعا سه نوع دکمه ی مختلف وجود دارد که میتوانید آنها را در فرم های خود قرار داده و از آنها استفاده کنید. در ادامه به شرح انواع دکمه میپردازیم :
type = button : در این حالت تنها یک دکمه ی ساده داریم که تقریبا هیچ کاری نمیکند. (گاها در بعضی مرورگر ها ممکن است این حالت معادل نوع submit باشد) در این حالت میتوان با جاوااسکریپت عمل خاصی را به دکمه نسبت داد.
type = reset : این نوع دکمه میتواند اطلاعات درج شده در فرم را پاک کرده و فرم را به حالت اول برگرداند.
type = submit : در این حالت دکمه میتواند اطلاعات فرم را به آدرسی که در action تعیین شده ارسال کند. توجه داشته باشید که استفاده از این نوع دکمه در برخی مرورگرهای قدیمی تر باعث میشود که اطلاعات کلیه ی فرم های موجود در صفحه به صورت یکجا ارسال شود که این مسئله ایده آل نیست. بنابراین شاید بهتر باشد که بجای این نوع دکمه از همتای آن در عنصر input استفاده کنید.
در مورد دکمه ها چند نکته وجود دارد، اول اینکه یک دکمه میتواند خودش دارای محتوای html باشد و الزامی نیست که حتما فقط در آن نوشته قرار دهید. دوم اینکه باید این نکته را در نظر داشته باشیم که همیشه باید نوع آنها را تعیین کنیم. به این جهت که حالت پیشفرض یک دکمه ممکن است در هر مرورگر متفاوت بوده و به شکل متفاوتی با دکمه ای که در فرم در نظر گرفته ایم برخورد شود. سوم اینکه در حالتی که از دکمه برای ارسال اطلاعات فرم استفاده میکنیم الزامی نیست که خود دکمه در میان تگ های شروع و پایان فرم قرار گرفته باشد. کافی است id فرم ارسالی برای دکمه مشخص شده باشد. به مثالهایی که در ادامه درج شده توجه کنید :
1 2 | <button type="submit" value="Submit">Submit</button> <button type="reset" value="Reset">Reset</button> |
مثال بالا دو دکمه دارای تایپ های submit و reset را نشان میدهد.
1 2 3 4 5 6 | <form action="demoform.asp" method="get" id="form1"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> </form> <button type="submit" form="form1" value="Submit">Submit</button> |
مثال فوق حالتی را نشان میدهد که دکمه در بیرون فرم قرار گرفته ولی فقط محتوای فرم مورد نظر را به صفحه ی درج شده در action ارسال میکند. (یعنی محل فرم شما میتواند از محل قرارگیری دکمه ی ارسال در صفحه کاملا جدا باشد)
درج ناحیه نوشتاری یا textarea
با استفاده از تگ textarea میتوانید یک باکس چند خطی برای درج محتوای نوشتاری در اختیار کاربر قرار دهید. نمونه ای از این حالت، میتواند باکس های درج نظر یا باکس های درج توضیحات و کلیه ی موارد مشابه باشد. اندازه ی این ناحیه نوشتاری را میتوانیم با استفاده از صفات rows و cols مشخص کنیم. مقدار rows نمایانگر تعداد ردیف ها و cols نمایانگر تعداد ستون های ناحیه نوشتاری خواهد بود. مثلا :
1 2 3 | <textarea rows="5" cols="50" name="description"> دیدگاهتان را در اینجا درج کنید ... </textarea> |
قرار دادن ورودی های مخفی یا hidden در فرم
به دلایل مختلفی ممکن است مایل باشید اطلاعاتی را به طور اتوماتیک و بدون اینکه چیزی به کاربر نشان داده شود، از طریق فرم به سرور ارسال کنید. مثلا ممکن است فرم شما دارای توکن باشد و یا اینکه ممکن است شماره ی صفحه ی فعلی را در فرم ذخیره کرده باشید و بخواهید در هنگام ارسال فرم به سرور، با توجه به صفحه ی فعلی کاربر، صفحه ی جدیدی را در اختیارش قرار دهید و کلیه ی موارد از این دست. هر گاه مایلیم اطلاعاتی از طریق فرم ارسال شود ولی این اطلاعات برای کاربر نمای ظاهری نداشته باشد، از ورودی های مخفی یا hidden استفاده میکنیم. ورودی های مخفی یکی از انواع در دسترس برای عنصر input بوده و به شکل زیر مورد استفاده قرار میگیرند :
1 2 3 4 5 | <input type="hidden" name="pagename" value="11"> یا <input type="hidden" name="token" value="x983ujhkdf86732oikjeo9f8jh"> |
خوب، در اینجا دیگر تقریبا با تمامی عناصری که برای ساختن یک فرم HTML به آنها نیاز خواهید داشت، آشنا شده اید. بنابراین وقت آن رسیده که به همراه هم، عناصر مورد نیازمان را از آنچه در این مقاله توضیح داده شد، انتخاب کرده و با کنار هم قرار دادن آنها، یک فرم تماس ساده بسازیم.
ساختن فرم تماس HTML
در ساختن یک فرم تماس در ساده ترین حالت نیاز به یک فیلد برای دریافت نام، یک فیلد برای دریافت ایمیل و یک فیلد جهت دریافت پیام داریم. بنابراین با ترکیب آنچه آموختیم میتوانیم فرم زیر را ایجاد کنیم :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <form action="/yourpageaddress.php" method="post"> <div> <label for="name">نام شما :</label> <input type="text" id="name" name="user_name" /> </div> <div> <label for="mail">آدرس ایمیل :</label> <input type="email" id="mail" name="user_mail" /> </div> <div> <label for="msg">پیام شما :</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">ارسال پیام</button> </div> </form> |
ای وای! یادمان رفته بود به این نکته اشاره کنیم که input نوعی با عنوان email هم دارد؟ خوب بله این تایپ را هم میتوانید به لیستتان اضافه کنید.
در فرم بالا با عنصر جدیدی با نام label هم آشنا شدید. label همانطور که از نامش هم مشخص است، لیبل هر فیلد را نشان میدهد. و البته استفاده از ان الزامی نیست. ولی اگر آن را با صفت for ترکیب کنید، در صورتی که کاربر روی لیبل کلیک کند، فیلدی که در صفت for تعیین کرده اید، به صورت اتوماتیک انتخاب خواهد شد. در کد بالا هم دقیقا همین کار را انجام داده ایم. مقدار id فیلد مورد نظر را برای صفت for در لیبل مورد نظر قرار داده ایم تا با کلیک روی هر لیبل، فیلد مربوط به آن انتخاب شود.
راستی شاید بپرسید که دلیل استفاده از div چه چیزی بوده؟ تنها دلیل استفاده از div این است که در این حالت شکل پذیری و استایل پذیری فرمی که ایجاد کرده ایم را بالا میبریم و بعدا میتوانیم با استفاده از نوشتن استایل های دلخواه، فرم را به شکلی ساده تر، به حالت دلخواه در بیاوریم.
فرم تماسی که در بالا کد آن را درج کردیم، بدون اضافه کردن استایل به شکل زیر خواهد بود :
طبعا با اضافه کردن استایل های مورد نیاز و به کار گیری آن در محیط rtl میتوانید شکل و شمایل آن را با نیازهای خود تطبیق داده و نمایی زیبا به آن ببخشید.
در پایان نکته ای هست که هنوز به آن اشاره نکرده ایم. وقتی شما یک فرم ایجاد میکنید، فارق از اینکه چه نوع فرمی ایجاد کرده اید، باید صفحه ای در اختیار داشته باشید که بتواند اطلاعات فرم را پردازش کند. آدرسی که به صفت action فرم نسبت میدهیم دقیقا هدفش انجام همین کار است. بنابراین چه یک فرم تماس ساده ایجاد میکنید و چه یک فرم پیچیده، لازم است که صفحه ای که میتواند اطلاعات این فرم را مدیریت کرده، عملیات لازم را روی آنها انجام داده و پاسخ های لازم را به کاربر و … ارسال کند، در اختیار داشته باشید. در غیر این صورت یک فرم html تنها یک نمای ظاهری است که به تنهایی قادر به انجام کاری نخواهد بود. در آینده در رابطه با دریافت اطلاعات از فرم از طریق php و پردازش آن نیز صحبت خواهیم کرد.
امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید.
آموزش مرتبط : راهنمای پردازش فرم ها در PHP
سلام میشه ساخت منو رو هم اموزش بدین تشکر
انشالله حتما
سلام میخواستم بپرسم که این سایت با وردپرس ساخته شده؟؟؟؟
سلام
بله 🙂 منظورتون سایت مسترکده دیگه؟
بله دیگه
ببخشید من یک سوال دارم میخواستم بدونم این فرم تماس با که درست شده چگونه پیام میفرسته کجاش باید ایمیل خودمان را تایپ کنیم
پاراگراف آخر همین آموزش رو مطالعه کنید پاسخ سوالتون رو میگیرید.
عرض سلام و خسته نباشید دارم و امیدوارم که همیشه پیروز باشید سوالی داشتم در این خصوص،تمامی این فرم هایی که در سایت های مختلف وجود دارد اگر یک فیلد یا یک کادر خالی بماند یا مرتبط نباشد کاربر پیغامی مشاهده خواهد کرد(لطفا این قسمت را پر کنید) اگر ممکن هست بفرمایید برای این که کاربر این پیغام رو مشاهده کند چه کُدی (code) هست ممنون میشم و بابت طولانی شدن سوال عذرخواهی میکنم.
سلام
ممنون از شما
اعتبار سنجی فرم رو در سمت کاربر میتونید با جی کوئری انجام بدید و در سمت سرور با php.
با عرض پوزش این مبحث یه مقداری گسترده هست و امکان آموزش اون در بخش دیدگاه ها میسر نیست. انشالله بعدا در قالب یک آموزش جداگانه در سایت به اون خواهیم پرداخت.
سلام از صفت required داخل تگ input استفاده کنید ک احیانا کاربر اون فیلدو خالی گذاشت هشدار متنی می دهد required بمعنی ضروری و اجباری می باشد
امیدوارم کمکتون کرده باشم
نه اصلا به هیچ وجه عذرخواهی نکنید هیچ ایرادی نداره باز هم از این که راهنمایی کردید خیلی تشکر میکنم و امیدوارم که همیشه شاد و موفق باشید.
ممنون از لطف شما.
یه نگاهی به لینک های زیر هم بندازید احتمالا بهتون کمک میکنه :
https://www.w3schools.com/PhP/php_form_validation.asp
https://www.w3schools.com/js/js_validation.asp
سلام ممنون از مقاله جامعتون.
لطفا نحوه دریافت اطلاعات رو هم که تو پاراگراف اخر گفتید رو همینطوری تو یه مقاله کامل توضیح بدید. خیلی احتیاجه بهش هیچجا یه مقاله کامل ندیدم راجبش.
بینظیرو عالی،
لطفا اگه امکانش هست اموزش هارو تو یک فایل پی دی اف ارایه بدید
ممنون واقعا
عالی بود ممنون. گسترده ترش کنید عالی تر میشه
سلام من می خواستم ویژگی مثل bold و سایر این ویژگی ها رو اضافه کنم به textarea
سلام برای قالب دادن فرم چه کدی باید داد مثل صفحه یه لوگین اینستا که یوزر پیس اسم اینستاگرام و لوگین در یک قالب نازک هست
لطفا جواب رو به ایمیلم بفرستین منظرم
سلام..من یک فرم درست کردم داخل اون یک لیست هست با یک تکس باکس الان میخوام نتیجه این دوتا رو برام تو ی تکس باکس دیگه بنویسه…اگ میشه راهنماییم کنین چه کدی استفاده کنم
سلام و خدا قوت خدمت شما
سایت بسایر عالی و مفیدی هست.
این مطلب هم مانند بقیه مطالب سایت بسیار آموزنده و خوب توضیح داده شد.
فقط یک سوال دارم من میخوام اندازه ی textarea با فیلد های دیگه مثل تایپ text دقیقا (دقیقا) یکی باشه بدون استفاده از هیچ کد css(حتی inline css هم استفاده نشه)میشه راهنماییم کنید چطور انجامش بدم؟
سلام….
چطور اطلاعات ثبت شده‌را نگا کنیم؟؟؟؟
HTML به تنهایی قادر به ثبت اطلاعات نیست. باید در کنارش از برنامه نویسی php استفاده کنید.
میخواستم بدونم چطوری میشه عکس داخل تگ اضافه کرد
به حالت عادی ای که در هر جای دیگه ای از یک صفحه HTML از عکس استفاده میکنید. اینجا هم به همون صورته. با تگ img
سلام
اگه ما بخوایم اطلاعاتی که تو فرم یک کاربر پر میکنه برای ما ارسال بشه باید php کامل بلد باشیم؟
منظورم اون فایلیه که ادرسشو تو action میدیم.
سلام. خسته نباشید.
میشه لطفا بگین که چطوری می تونم توی فرم ها مثال بنویسم؟
ممنون.
سلام
به طور کلی توی تگ فرم میتونید به شکل عادی که تو هر جای دیگه ای از صفحه از HTML استفاده میکنید، به همون شکل محتوای مورد نظرتون رو درج کنید. فرقی با جاهای دیگه ی صفحه نداره.
سلام واقعا عالی و کاربردی توضیح دادین خدا خیرتون بده
اگه از عکس هم برای نتایج هر تیکه کد استفاده کنین رو دست آموزشتون نخواهد بود.
و اموزش های بیشتری برا html css بزارین لطفا
خسته نباشین
یک منو با عنوان ثبت نام ایجاد کنید و در صفحه ثبت نام فرمی را طراحی کنید و اطلاعات فرم ها را دریافت کنید.با کدhtmlوjava script
سلام میخواستم ببینم چطوری باید یه فرم رو به وسط صفحه انتقال بدیم یعنی از certer استفاده میشه