آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

فرم ها در HTML4

فرم ها در  HTML4

فصل سوم ( معرفی ساختار  HTML4 )

جلسه یازدهم ( فرم ها در  HTML4)

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

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

برای ارسال مطالب ، ثبت نام ، ورود به سایت ، اپلود فایل ها ، ارسال نظرات ، پرداخت ها و … از فرم استفاده می کنیم . عنصر اصلی فرم <form> هست که اجزای فرم درون این عنصر قرار میگیرند .

 ساختار کلی :

 

خوب حالا تک تک element های فرم و براتون توضیح میدم و بعد یک مثال براتون میزنم :

Input : چند نوع input در html4 داریم که به شرح زیر هست :

  •  Button : برای ایجاد دکمه
  •  Checkbox : برای ایجاد گزینه هایی که حق انتخاب چند گزینه رو داریم .
  •  File : برای ایجاد browse آپلود فایل .

Hidden : برای فیلدهایی که پنهان هستند و میخوایم مقادیری رو درون این فیلدها نگه داریم .

Password : برای فیلدهایی که قراره رمز عبور وارد کنیم .

Radio : برای ایجاد گزینه هایی که حق انتخاب فقط یک گزینه رو داریم .

Reset : برای پاک کردن مقادیر ورودی درون فرم از این دکمه استفاده می کنیم .

Submit : برای ایجاد دکمه ثبت اطلاعات فرم استفاده میشه . زمانی که شما دکمه  submit رو فشار میدید ، اطلاعات ارسال و صفحه رفرش میشه.

Text : برای فیلدهای متنی

Textarea : برای توضیحات و متون طولانی از این فیلد استفاده می کنیم .

Button : این عنصر شامل سه نوع هست : button , submit , reset

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

Label : برای درج نام برای فیلدها از لیبل استفاده می کنیم .

Fieldset : برای گروه بندی عناصر مرتبط از فیلدست استفاده می کنیم .

Legend : عنصری هست که برای نام گذاری گروه هایی که توسط fieldset ایجاد کردید ، استفاده میشه .

Select : با استفاده از این عنصر شما میتونید ، منوی کشویی ایجاد کنید . این عنصر شامل عنصر های option  و  optgroup هست که با استفاده از عنصر option گزینه های درون منوی کشویی رو تعریف می کنید و با استفاده از optgroup گزینه های منوی کشویی رو گروه بندی می کنید .

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

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

خوب برای نام و نام خانوادگی و نام کاربری از input نوع text ، برای ثبت تصویر از file ، برای جنسیت از radio ، برای ورزش های مورد علاقه از checkbox ، برای نحوه آشنایی با سایت از select و برای پسورد از input نوع password استفاده می کنیم .

به کد زیر توجه کنید :

 نتیجه ی کد بالا :

فرم ها

همونطور که ملاحظه کردید ، تمامی المنت هایی که توضیح داده شد ، درون فرم پیاده سازی شد . به همین راحتی 🙂

تنها یک نکته باقی میمونه ، اون هم این هست که ، زمانی که شما در فرمتون فایلی جهت آپلود قرار میدید حتما باید خاصیت enctype رو برای فرمتون در نظر بگیرید ؛ در غیر اینصورت فایل مورد نظر آپلود نمیشه .

حالا چطور میتونید مقادیر این فرم و دریافت کنید ؟ روی یک صفحه نمایش بدید یا در بانک اطلاعاتی ذخیره کنید ؟ برای آموزش این مبحث به بخش آموزش فصلی php بخش فرم ها رجوع کنید .

میتونید فایل این جلسه رو هم دانلود کنید .

جلسه ی امروزمونم به پایان رسید ، امیدوارم مفید واقع شده باشه .

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • mh

    عالی بود
    نوحه ساخت فرم پیشرفته رو هم بذارید
    ممنون

  • آیت

    ممنون از مطالب ارزشمند شما

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟