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

فرم ها در HTML4

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

فرم ها در  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 بخش فرم ها رجوع کنید .

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

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین