آموزش فرم ها در html

آموزش فرم ها در html

آموزش فرم ها در html، آموزش تگ form، تگ input

 

تگ form

ما تمامی فرم های خود را در تگ form می نویسم. کاربرد فرم ها در html ساخت صفحاتی مثل ثبت نام و ورود، تماس با ما و… می باشد.

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

اگر جلسه ی ساخت جدول در html را مطالعه کرده باشید، می دانید که تمامی عناصر جدول، درون تگ table قرار می گیرند. فرم ها هم درست به همین شیوه هستند. اعضای فرم ها درون تگ form قرار می گیرند.

تگ input

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

در این تگ یک صفت تحت عنوان type وجود دارد که در ادامه توضیحات بیشتری در این واره داده ایم.

type چیست؟

type هم نوعی صفت است، که ما با استفاده از این صفت نوع فرمی را که قصد ساختن آن را داریم مشخص می کنیم. فرم ها متفاوت هستند مثلا فرم رمز عبور، فرم ایمیل، و…

ساخت فرم password

اگر ما مقدار type را password قرار دهیم در واقع به مرور گفته ایم که فرمی از نوع پسورد برای ما بساز.

این فرم همانطور که از نامش پیداست برای وارد کردن پسورد از سمت کاربر می باشد.

برای یاد گیری بهتر به کد زیر دقت کنید و آن را در ویرایشگر متن خود کپی کنید و خروجی بگیرید.

همان طور که متوجه شدید تگ input هم جایی بسته نمی شود.

توضیح کد بالا:

اول ما به مرورگر گفته ایم که از جدید ترین نسخه ی html استفاده می کنیم سپس تگ html را باز کرده ایم.

بعد از آن تگ head بخش اول زبان html را باز کرده ایم.

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

کار بعدی که انجام داده ایم این بوده است که تگ title و تگ head را بسته ایم و تگ body که بخش دوم زبان html را باز کرده ایم.

سپس تگ p وجود دارد، همانطور که در جلسه ی اول گفته شد این تگ برای نوشتن متن به کار می آید.

سپس تگ form باز شده است. که بیشتر برای ارسال اطلاعات به کار می رود.

بعد از آن تگ input وجود دارد که مقدار type آن password است.

بعد از آن هم تگ های زیر به ترتیب بسته شده اند.

form

body

html

کد بالا را خروجی بگیرید تصویر مطابق تصویر زیر را مشاهده خواهید کرد.

تگ input با تایپ password

اگر در این گونه فرم چیزی تایپ کنید به صورت زیر نمایش داده می شود.

نوشتن در تگ input با تایپ password

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

انواع تایپ input (ما در این جلسه تحت عنوان آموزش فرم ها در html پر کاربرد ترین آنها را نام بردیم)

  • password برای ساخت فرم های پسورد مورد استفاده قرار می گیرد یعنی هر آنچه که در فرمی با این تایپ نوشته شود به صورت ستاره نمایش داده میشود. مثال برای این تایپ در بالا زده شد.
  • text این فرم برای مواردی مورد استفاده قرار می گیرد که قصد دریافت نام فردی را داشته باشیمد. مانند کد زیر:

    خروجی:

    تگ input با تایپ textوقتی چیزی در آن تایپ می کنید:

  • نمایش نوشته ها در تگ input با تایپ textemail این نوع فرم خاص است و برای دریافت ایمیل از کاربر مورد استفاده قرار می گیرد. اگر ایمیل نا معتبری وارد کند به کاربر هشدار می دهد. مثال:

    خروجی:

    تگ input با تایپ email

  • submit با استفاده از این گزینه می توانید یک دکمه بسازید مثل جایی که اطلاعات ورود را وارد می کنید سپس روی دکمه ی ورود کلیک می کنید و اطلاعات ورود شما برسی می شود. مثال:

    خروجی:

    تگ input با تایپ Submit

Radio button ها در جلسه ی ساخت فرم ها در html

برای اینکه بخواهید از این نوع دکمه ها بسازید هم دوباره از تگ input  کمک می گیریم. و شما باید در این مرحله مقدار type را radio قرار دهید تا دکمه ی رادیویی شما ساخته شود…

خروجی   ⇓⇓⇓

تگ input با تایپ radio

وقتی که روی ان کلیک می کنید.

خروجی وقتی که کلیک می کنیم  ⇓⇓⇓

تگ input با تایپ radio هنگامی که کلیک می شود.

صفت value در input

صفت value مقدار یک فرم را معین می کند، یا به عبارت دیگر چیزی است که درون فرم مورد نظر شما نوشته می شود مثلا اگر شما یک input بسازید و مقدار type آن را text قرار دهید و سپس مقدار value را sarzamincode قرار دهید خواهید دید که بدون اینکه شما این فرم را پر کنید به صورت خودکار در آن عبارت sarzmaincode نوشته شده است. به کد زیرو خروجی آن دقت کنید.

خروجی:

تگ input با value = sarzamincode

value در هر نوع تایپی کار خاصی را انجام می دهد مثلا در تایپ submit اگر مقدار value را ورود قرار دهید یک دکمه با نام ورود خواهید داشت.

به نظر شما value در چه مواردی کاربرد دارد؟

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

صفت name

صفت  name بیشتر برای انتخاب فرم ها توسط زبان هایی مانند php مورد استفاده قرار می گیرد.

سخن پایانی جلسه ی آموزش فرم ها در html

ما انواع زیادی type داریم که شاید به صد ها برسند ولی من پر استفاده ترین انها را نام بردم شما می توانید با مراجعه به قسمت اموزش های html و در بخش تکمیلی اموزش انواع input را دنبال کنید. و می توانید در قسمت پروژه ها پروژه ی مربوط به فرم ها را انجام دهید.

در این جلسه چه چیز هایی آموختید؟

  • تگ form چیست؟
  • تگ input چیست؟
  • فهمیدید type چیست؟
  • پی بردید که value به چه معناست؟

پایان جلسه ی  آموزش فرم ها در html

 

 

نوشتهٔ قبلی
ساخت جدولی زیبا در html
نوشتهٔ بعدی
متا تگ ها در html

1 دیدگاه. ارسال دیدگاه جدید

  • پدرام ربیعی
    مارس 5, 2021 6:44 ب.ظ

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

    پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست