آموزش ساختن فرم HTML با استفاده از تگ Form

29

آموزش ساختن فرم HTML با استفاده از تگ Form

تگ form از عناصر مهم و بسیار کاربری HTML است که امروز قرار است در این آموزش با نحوه ی استفاده از آن آشنا شویم. در آموزش امروز به همراه مسترکد می آموزیم که چگونه فرم HTML بسازیم و با تگ form و سایر عناصر موجود برای ایجاد فرم ها در اچ تی ام ال کار کنیم. کارمان را با شرح بخش های مختلف یک فرم شروع خواهیم کرد و سپس در پایان، برای آشنایی بیشتر شما با نحوه ی کار فرم ها، یک فرم HTML نمونه نیز به شما نشان خواهیم داد تا به خوبی موارد اصلی که در این آموزش می آموزید را تمرین کرده و به خاطر بسپارید. توجه داشته باشید که در این آموزش تنها بخش هایی را مورد بررسی قرار میدهیم که برای ساخت هر فرمی به آنها نیاز خواهید داشت و در برخی موارد بر اساس نیاز از شرح برخی صفات و … که ممکن است برای شروع کارتان کاربرد کمتری داشته باشند خودداری میکنیم.

ایجاد فرم در HTML

برای ایجاد یک فرم HTML کارمان را با استفاده از تگ form شروع میکنیم. تگ فرم به صورت ساده و در حالت کلی، شکلی مشابه کد زیر خواهد داشت :

همانطور که مشاهده میکنید در تگ form از دو attribute با عناوین action و method استفاده کرده ایم. هر دوی این صفات در کار کردن صحیح یک فرم، مهم و حائز اهمیت هستند.
action : با استفاده از این صفت تعیین میکنید که اطلاعات فرم به چه آدرسی ارسال شود. کافی است آدرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند به عنوان مقدار action قرار دهید.
method : متد میتواند دارای دو حالت POST یا GET باشد. زمانی نوع GET را برای فرم خود انتخاب میکنیم که اطلاعاتی که توسط فرم ارجاع داده میشوند، دارای اهمیت (خصوصا اهمیت امنیتی) خاصی نیستند. مثلا یک کوئری جستجو و … وقتی از حالت GET استفاده کنید، متغیر ها و مقادیر آنها پس از ارسال فرم، در انتهای آدرسی که به عنوان action فرم قرار گرفته، قابل مشاهده خواهند بود. مانند آدرس زیر :

همانطور که مشاهده میکنید، در آدرس بالا میتوان مقدار firstname و lastname را به طور کامل مشاهده کرد.
برعکس این حالت، زمانی که میخواهیم اطلاعات ارسالی در آدرس صفحه ی action مشخص نباشند، از متد POST استفاده میکنیم. مثلا زمانی که میخواهیم اطلاعاتی را به دیتابیس ارسال کرده و آپدیت کنیم، یا وقتی میخواهیم از کاربر رمز دریافت کنیم و کلیه ی حالات مشابه. هیچوقت نباید اجازه دهید اطلاعات حساب در url به نمایش در بیایند.

صفت name برای عناصر فرم

قبل از اینکه شروع کنیم و عناصر قابل استفاده در فرم را به شما معرفی کنیم، لازم است به این نکته اشاره کنیم که اگر میخواهید اطلاعاتی که در یک فرم از کاربر دریافت میکنید، به صورت صحیح ارسال شوند، تک تک عناصر فرم شما باید دارای attribute یا صفت name باشند. مشخص نکردن name برای یک عنصر میتواند منجر به عدم ارسال اطلاعات این عنصر به صفحه ی action فرم و ناقص شدن اطلاعات دریافتی شود. بنابراین نسبت دادم نام به عناصری که در فرمتان قرار خواهید داد را فراموش نکنید.

دریافت اطلاعات با عنصر input

input عنصر ارزشمندی است که بر اساس نیاز شما میتواند به شکل های گوناگونی در آمده و از کاربر اطلاعات دریافت کند. تغییر نوع input را با استفاده از صفت type انجام میدهیم. به کد زیر توجه کنید :

در کد بالا میتوانیم مقدار دلخواه خود را از قبیل text, radio, password و … بجای عبارت neededtype قرار دهیم تا نوع ورودی بر اساس type تعیین شده تغییر کند. بعضی از انواع پر کاربرد input را در ادامه شرح میدهیم :

text : استفاده از این تایپ برای شما یک خط ورودی متنی ایجاد میکند. مثلا استفاده از این تایپ در زمانی که میخواهید نام، نام خانوادگی و کلیه ی موارد مشابه را از کاربر دریافت کنید میتواند مناسب باشد. نمونه ی استفاده از این تایپ به شکل زیر است :

radio : این تایپ برای شما انتخاب های رادیویی ایجاد میکند. به این صورت که میتوانید با درج چندین input دارای تایپ radio به کاربر انتخاب های مختلفی بدهید که تنها یکی از آنها قابل انتخاب باشد. توجه داشته باشید که در این حالت در مورد هر گروه انتخاب، باید نام تمامی input های رادیویی که ایجاد میکنید را یکسان در نظر بگیرید :

password : تفاوت این نوع با نوع text این است که در این حالت به محض اینکه کاربر هر کارکتر را وارد میکند، محتوای وارد شده mask میشود و بجای آن ستاره یا دایره به نمایش در می آید. به همین جهت استفاده از نوع password برای دریافت اطلاعات محرمانه مانند رمز عبور مناسب خواهد بود. در نمونه ی زیر ابتدا نام کاربری و سپس پسورد را از کاربر درخواست میکنیم :

checkbox : چک باکس ها به کاربر این امکان را میدهند که در صورت تمایل به صورت همزمان بتواند چندین گزینه را انتخاب کند. (دقیقا برعکس radio) در اینجا هم مانند انتخاب های رادیویی، باید در نظر داشته باشید که برای یک گروه انتخاب، نام یکسانی در نظر بگیرید. مثلا در کد زیر، کاربر میتواند از بین سه نوع وسیله ی نقلیه، آنهایی که مایل است را انتخاب کند :

استفاده از مقدار checked در خط دوم ورودی درج شده در کد بالا، نشان میدهد که این انتخاب، از پیش تیک خورده و به صورت پیشفرض انتخاب شده است.

file : با استفاده از این تایپ میتوانید به کاربر اجازه بدهید که فایل دلخواه خود را بارگذاری کرده و به همراه فرم ارسال کند. برای این تایپ صفتی با عنوان accept وجود دارد که نشان میدهد که این ورودی فایل میتواند چه پسوند هایی از فایل را قبول کند. شکل کلی این نوع ورود به صورت زیر است :

درج عبارت image/* در بخش accept باعث میشود که ورود بالا تنها تصاویر را قبول کند. شما میتوانید برای accept مقادیر دیگری را نیز به شرح زیر تعریف کنید :

مثلا اگر میخواستیم ورودی داشته باشیم که همه ی فایل های صوتی، ویدئویی و عکس ها را قبول کند میتوانستیم از کد زیر استفاده کنیم :

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

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

 

ایجاد منوی دراپ داون با استفاده از عنصر Select

ایجاد منو های دراپ داون و قرار دادن آنها در فرم بسیار ساده است. در اینجا از تگی به نام select استفاده خواهیم کرد. هر تگ select میتواند تعدادی option یا انتخاب را در بر بگیرد که از میان این انتخاب ها، یکی به صورت پیشفرض انتخاب شده که با اضافه کردن مقدار selected به option مورد نظر مشخص میشود. به مثال زیر توجه کنید :

البته select را میتوانید بر اساس نیاز خود به شکل های دیگری هم در آورید. مثلا اگر میخواهید کاربر قادر باشد بیش از یک آیتم را از لیست انتخاب کند میتوانید مانند مثال زیر از عبارت multiple استفاده کنید :

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

در مثال بالا، تنها سه تا از انتخاب ها به نمایش در می آیند و برای دیدن سایر انتخاب ها لازم است که در بین آپشن ها اسکرول کنید. طبعا میتوانید تعداد آیتم های به نمایش در آمده را بر اساس نیاز خود، کم و زیاد کنید.

قرار دادن دکمه در فرم با استفاده از عنصر button

مجموعا سه نوع دکمه ی مختلف وجود دارد که میتوانید آنها را در فرم های خود قرار داده و از آنها استفاده کنید. در ادامه به شرح انواع دکمه میپردازیم :

type = button : در این حالت تنها یک دکمه ی ساده داریم که تقریبا هیچ کاری نمیکند. (گاها در بعضی مرورگر ها ممکن است این حالت معادل نوع submit باشد) در این حالت میتوان با جاوااسکریپت عمل خاصی را به دکمه نسبت داد.

type = reset : این نوع دکمه میتواند اطلاعات درج شده در فرم را پاک کرده و فرم را به حالت اول برگرداند.

type = submit : در این حالت دکمه میتواند اطلاعات فرم را به آدرسی که در action تعیین شده ارسال کند. توجه داشته باشید که استفاده از این نوع دکمه در برخی مرورگرهای قدیمی تر باعث میشود که اطلاعات کلیه ی فرم های موجود در صفحه به صورت یکجا ارسال شود که این مسئله ایده آل نیست. بنابراین شاید بهتر باشد که بجای این نوع دکمه از همتای آن در عنصر input استفاده کنید.

در مورد دکمه ها چند نکته وجود دارد، اول اینکه یک دکمه میتواند خودش دارای محتوای html باشد و الزامی نیست که حتما فقط در آن نوشته قرار دهید. دوم اینکه باید این نکته را در نظر داشته باشیم که همیشه باید نوع آنها را تعیین کنیم. به این جهت که حالت پیشفرض یک دکمه ممکن است در هر مرورگر متفاوت بوده و به شکل متفاوتی با دکمه ای که در فرم در نظر گرفته ایم برخورد شود. سوم اینکه در حالتی که از دکمه برای ارسال اطلاعات فرم استفاده میکنیم الزامی نیست که خود دکمه در میان تگ های شروع و پایان فرم قرار گرفته باشد. کافی است id فرم ارسالی برای دکمه مشخص شده باشد. به مثالهایی که در ادامه درج شده توجه کنید :

مثال بالا دو دکمه دارای تایپ های submit و reset را نشان میدهد.

مثال فوق حالتی را نشان میدهد که دکمه در بیرون فرم قرار گرفته ولی فقط محتوای فرم مورد نظر را به صفحه ی درج شده در action ارسال میکند. (یعنی محل فرم شما میتواند از محل قرارگیری دکمه ی ارسال در صفحه کاملا جدا باشد)

درج ناحیه نوشتاری یا textarea

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

قرار دادن ورودی های مخفی یا hidden در فرم

به دلایل مختلفی ممکن است مایل باشید اطلاعاتی را به طور اتوماتیک و بدون اینکه چیزی به کاربر نشان داده شود، از طریق فرم به سرور ارسال کنید. مثلا ممکن است فرم شما دارای توکن باشد و یا اینکه ممکن است شماره ی صفحه ی فعلی را در فرم ذخیره کرده باشید و بخواهید در هنگام ارسال فرم به سرور، با توجه به صفحه ی فعلی کاربر، صفحه ی جدیدی را در اختیارش قرار دهید و کلیه ی موارد از این دست. هر گاه مایلیم اطلاعاتی از طریق فرم ارسال شود ولی این اطلاعات برای کاربر نمای ظاهری نداشته باشد، از ورودی های مخفی یا hidden استفاده میکنیم. ورودی های مخفی یکی از انواع در دسترس برای عنصر input بوده و به شکل زیر مورد استفاده قرار میگیرند :

خوب، در اینجا دیگر تقریبا با تمامی عناصری که برای ساختن یک فرم HTML به آنها نیاز خواهید داشت، آشنا شده اید. بنابراین وقت آن رسیده که به همراه هم، عناصر مورد نیازمان را از آنچه در این مقاله توضیح داده شد، انتخاب کرده و با کنار هم قرار دادن آنها، یک فرم تماس ساده بسازیم.

ساختن فرم تماس HTML

در ساختن یک فرم تماس در ساده ترین حالت نیاز به یک فیلد برای دریافت نام، یک فیلد برای دریافت ایمیل و یک فیلد جهت دریافت پیام داریم. بنابراین با ترکیب آنچه آموختیم میتوانیم فرم زیر را ایجاد کنیم :

ای وای! یادمان رفته بود به این نکته اشاره کنیم که input نوعی با عنوان email هم دارد؟ خوب بله این تایپ را هم میتوانید به لیستتان اضافه کنید.

در فرم بالا با عنصر جدیدی با نام label هم آشنا شدید. label همانطور که از نامش هم مشخص است، لیبل هر فیلد را نشان میدهد. و البته استفاده از ان الزامی نیست. ولی اگر آن را با صفت for ترکیب کنید، در صورتی که کاربر روی لیبل کلیک کند، فیلدی که در صفت for تعیین کرده اید، به صورت اتوماتیک انتخاب خواهد شد. در کد بالا هم دقیقا همین کار را انجام داده ایم. مقدار id فیلد مورد نظر را برای صفت for در لیبل مورد نظر قرار داده ایم تا با کلیک روی هر لیبل، فیلد مربوط به آن انتخاب شود.

راستی شاید بپرسید که دلیل استفاده از div چه چیزی بوده؟ تنها دلیل استفاده از div این است که در این حالت شکل پذیری و استایل پذیری فرمی که ایجاد کرده ایم را بالا میبریم و بعدا میتوانیم با استفاده از نوشتن استایل های دلخواه، فرم را به شکلی ساده تر، به حالت دلخواه در بیاوریم.

فرم تماسی که در بالا کد آن را درج کردیم، بدون اضافه کردن استایل به شکل زیر خواهد بود :

نمونه فرم html

طبعا با اضافه کردن استایل های مورد نیاز و به کار گیری آن در محیط rtl میتوانید شکل و شمایل آن را با نیازهای خود تطبیق داده و نمایی زیبا به آن ببخشید.

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

امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید.

آموزش مرتبط : راهنمای پردازش فرم ها در PHP

دسترسی آسان به این مطلب لینک کوتاه :
شاید از اینها هم خوشتان بیاید!
29 دیدگاه
  1. sara می گوید

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

    1. MrCode می گوید

      انشالله حتما

  2. محمد می گوید

    سلام میخواستم بپرسم که این سایت با وردپرس ساخته شده؟؟؟؟

    1. MrCode می گوید

      سلام
      بله 🙂 منظورتون سایت مسترکده دیگه؟

      1. محمد می گوید

        بله دیگه

  3. سلام می گوید

    ببخشید من یک سوال دارم میخواستم بدونم این فرم تماس با که درست شده چگونه پیام میفرسته کجاش باید ایمیل خودمان را تایپ کنیم

    1. MrCode می گوید

      پاراگراف آخر همین آموزش رو مطالعه کنید پاسخ سوالتون رو میگیرید.

  4. فرید صادقی می گوید

    عرض سلام و خسته نباشید دارم و امیدوارم که همیشه پیروز باشید سوالی داشتم در این خصوص،تمامی این فرم هایی که در سایت های مختلف وجود دارد اگر یک فیلد یا یک کادر خالی بماند یا مرتبط نباشد کاربر پیغامی مشاهده خواهد کرد(لطفا این قسمت را پر کنید) اگر ممکن هست بفرمایید برای این که کاربر این پیغام رو مشاهده کند چه کُدی (code) هست ممنون میشم و بابت طولانی شدن سوال عذرخواهی میکنم.

    1. MrCode می گوید

      سلام
      ممنون از شما
      اعتبار سنجی فرم رو در سمت کاربر میتونید با جی کوئری انجام بدید و در سمت سرور با php.
      با عرض پوزش این مبحث یه مقداری گسترده هست و امکان آموزش اون در بخش دیدگاه ها میسر نیست. انشالله بعدا در قالب یک آموزش جداگانه در سایت به اون خواهیم پرداخت.

    2. Basir می گوید

      سلام از صفت required داخل تگ input استفاده کنید ک احیانا کاربر اون فیلدو خالی گذاشت هشدار متنی می دهد required بمعنی ضروری و اجباری می باشد
      امیدوارم کمکتون کرده باشم

  5. فرید صادقی می گوید

    نه اصلا به هیچ وجه عذرخواهی نکنید هیچ ایرادی نداره باز هم از این که راهنمایی کردید خیلی تشکر میکنم و امیدوارم که همیشه شاد و موفق باشید.

    1. MrCode می گوید

      ممنون از لطف شما.
      یه نگاهی به لینک های زیر هم بندازید احتمالا بهتون کمک میکنه :
      https://www.w3schools.com/PhP/php_form_validation.asp
      https://www.w3schools.com/js/js_validation.asp

  6. mohammad می گوید

    سلام ممنون از مقاله جامعتون.
    لطفا نحوه دریافت اطلاعات رو هم که تو پاراگراف اخر گفتید رو همینطوری تو یه مقاله کامل توضیح بدید. خیلی احتیاجه بهش هیچجا یه مقاله کامل ندیدم راجبش.

  7. ابوالفضل می گوید

    بینظیرو عالی،
    لطفا اگه امکانش هست اموزش هارو تو یک فایل پی دی اف ارایه بدید
    ممنون واقعا

  8. amirhossein می گوید

    عالی بود ممنون. گسترده ترش کنید عالی تر میشه

  9. Ali می گوید

    سلام من می خواستم ویژگی مثل bold و سایر این ویژگی ها رو اضافه کنم به textarea

  10. مهدی می گوید

    سلام برای قالب دادن فرم چه کدی باید داد مثل صفحه یه لوگین اینستا که یوزر پیس اسم اینستاگرام و لوگین در یک قالب نازک هست

    لطفا جواب رو به ایمیلم بفرستین منظرم

  11. morteza می گوید

    سلام..من یک فرم درست کردم داخل اون یک لیست هست با یک تکس باکس الان میخوام نتیجه این دوتا رو برام تو ی تکس باکس دیگه بنویسه…اگ میشه راهنماییم کنین چه کدی استفاده کنم

  12. محمد می گوید

    سلام و خدا قوت خدمت شما
    سایت بسایر عالی و مفیدی هست.
    این مطلب هم مانند بقیه مطالب سایت بسیار آموزنده و خوب توضیح داده شد.
    فقط یک سوال دارم من میخوام اندازه ی textarea با فیلد های دیگه مثل تایپ text دقیقا (دقیقا) یکی باشه بدون استفاده از هیچ کد css(حتی inline css هم استفاده نشه)میشه راهنماییم کنید چطور انجامش بدم؟

  13. امیرحسین می گوید

    سلام….
    چطور اطلاعات ثبت شده‌را نگا کنیم؟؟؟؟

    1. MrCode می گوید

      HTML به تنهایی قادر به ثبت اطلاعات نیست. باید در کنارش از برنامه نویسی php استفاده کنید.

  14. درفش کاویان می گوید

    میخواستم بدونم چطوری میشه عکس داخل تگ اضافه کرد

    1. MrCode می گوید

      به حالت عادی ای که در هر جای دیگه ای از یک صفحه HTML از عکس استفاده میکنید. اینجا هم به همون صورته. با تگ img

    2. محمد علی بیاتی می گوید

      سلام
      اگه ما بخوایم اطلاعاتی که تو فرم یک کاربر پر میکنه برای ما ارسال بشه باید php کامل بلد باشیم؟
      منظورم اون فایلیه که ادرسشو تو action میدیم.

  15. کوروش می گوید

    سلام. خسته نباشید.
    میشه لطفا بگین که چطوری می تونم توی فرم ها مثال بنویسم؟
    ممنون.

    1. MrCode می گوید

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

  16. shaqayegh می گوید

    سلام واقعا عالی و کاربردی توضیح دادین خدا خیرتون بده
    اگه از عکس هم برای نتایج هر تیکه کد استفاده کنین رو دست آموزشتون نخواهد بود.
    و اموزش های بیشتری برا html css بزارین لطفا
    خسته نباشین

  17. مطهره می گوید

    یک منو با عنوان ثبت نام ایجاد کنید و در صفحه ثبت نام فرمی را طراحی کنید و اطلاعات فرم ها را دریافت کنید.با کدhtmlوjava script

  18. پرنیان می گوید

    سلام میخواستم ببینم چطوری باید یه فرم رو به وسط صفحه انتقال بدیم یعنی از certer استفاده میشه

ارسال پاسخ

آدرس ایمیل شما منتشر نخواهد شد.