خانه / مقالات اموزشی / html / checkbox در html
آموزش HTML5
آموزش HTML5

checkbox در html

کار با فرم در HTML

یادآوری : در جلسه اول کار با فرم ها با طریقه ایجاد یک فرم و ارسال آن به صفحه پردازشگر از طریق دو متد post و get و تفاوت این دو روش آشنا شدیم.گفتیم که با اسفاده از تگ <form> میتوان یک فرم را ساخت. و با استفاده از صفت method و یکی از دو مقدار post یا get آن را به صفحه پردازشگر فرستاد. گفتیم که برای آدرس دهی صفحه پردازشگر از صفت action استفاده میکنیم و مقدار آن برابر با آدرس صفحه پردازشگرمان خواهد بود. حال میخواهیم که با تگ <input> و صفت های آن برای ایجاد تکست باکس ها و دکمه ها برای گرفتن اطلاعات از کاربر آشنا شویم.

تگ <input> : از این تگ برای ایجاد انواع و اقسام عناصر فرم همچون دکمه ها و فیلد های متنی و رمزی و… استفاده می شود. این تگ صفت های زیر را پشتیبانی می کند:

name: برای نام گذاری عناصر استفاده می شود و می بایست در کل صفحه یکتا باشد

type : این صفت چندین مقدار می گیرد که هر کدام وظیفه ی خاصی دارند که در ادامه بررسی می کنیم.

  • text : برای ایجاد یک textfield ساده متنی به کار می رود.
 

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • password: برای ایجاد یک textfield رمزی به کار می رود.
 

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • radio : برای ایجاد دکمه های رادیویی به کار می رود. توجه داشته باشید که radioها معمولا به صورت گروهی به کار می روند و می بایست نام آنها در گروه یکسان بوده اما valueهای متفاوتی داشته باشند. کاربر فقط می تواند یک radio (گزینه) را از هر گروه انتخاب کند.
 

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  •  checkbox : از این مقدار برای ایجاد checkbox ها استفاده می شود.
1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • submit : برای ایجاد دکمه های از نوع submit (ارسال) استفاده می شود. در واقع این نوع دکمه ها وظیفه ارسال فرم به صفحه پردازشگر را دارند.
  •  

    1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

    • reset : برای ایجاد دکمه های پاک کننده ی form به کار می روند. این نوع دکمه ها محتویات فرم را به مقدار اولیه (پیشفرض) بر می گردانند.
    • button :از این مقدار برای ایجاد دکمه هایی که رفتار پیشفرضی ندارند، استفاده می شود. یعنی اینکه این دکمه ها کاری انجام نمی دهند. و باید خودمان برای آن ها رفتاری را کدنویسی کنیم.
    • file : از این مقدار برای ایجاد امکان آپلود فایل برای کاربران استفاده می شود. در صورت استفاده از این مقدار یک کادر متنی به همراه دکمه ای با عنوان Browse  و یا در مرورگر chrome با عنوان Choose File ایجاد خواهد شد که کاربر خواهد توانست با استفاده از آن فایلی را از کامپیوتر خود انتخاب کند.
 

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • hidden : گاهی اوقات طراح فرم می خواهد مقداری را به دور از چشم کاربر و بدون دخالت آن برای صفحه پردازگر ارسال کند. در این صورت می توان از مقدار hidden استفاده کرد. می توانیم از تمامی صفت های تگ img برای کنترل خصوصیات تصویر استفاده کنیم.
  • image : از این مقدار برای ایجاد دکمه های تصویری از نوع submit استفاده می شود. در واقع با این مقدار می توان تصویری ایجاد کرد که کاربر با کلیک بر روی آن می تواند form را ارسال کند. باید به این نکته توجه که زمانی که از مقدار image| برای صفت type استفاده می توانیم از تمامی صفت های تگ img برای کنترل خصوصیات تصویر استفاده کنیم.
 

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • email : از این مقدار برای آن دسته از فیلدهایی که می بایست حاوی یک آدرس ایمیل معتبر باشند استفاده می شود. مقدار این فیلد قبل از ارسال فرم خطایابی خواهد شد و چنانچه آدرس ایمیل معتبر وارد نشده باشد یک پیغام خطا نمایش داده می شوذ:
  •  

تصویر زیر نحوه نمایش پیغام خطا در مرورگر کروم را نشان می دهد:

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

 

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

تصویر زیر نحوه نمایش پیغام خطا در مرورگر کروم را نشان می دهد:

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • number : از این مقدار برای آن دسته از فیلدهایی که می بایست حاوی یک مقدار عددی باشند استفاده می شود. ما همچنین می توانیم محدودیت هایی روی اعداد قابل قبول نیز اعمال کنیم :
 

نتیجه کد فوق در مرورگر کروم به صورت زیر خواهد بود:

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

  • range :از این مقدار برای آن دسته از فیلدهایی که می توانند حاوی مقدار مشخصی از بازه خاصی از اعداد باشند استفاده می شود. ما همچنین می توانیم محدودیت هایی روی اعداد قابل قبول نیز اعمال کنیم.
  •  

    حاصل اجرای کد فوق در مرورگر کروم به صورت زیر است:

    1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

    همانطور که اشاره شد می توان محدودیت هایی بر روی اعداد قابل قبول اعمال کرد. هنگامی که از مقدار number یا range برای صفت type استفاده می شود. می توان از صفت های زیر برای اعمال محدودیت ها بهره برد:

    • max: حداکثر مقدار قابل قبول را مشخص می کند.
    • min: حداقل مقدار قابل قبول را مشخص می کند.
    • step: فواصل بین مقادیر عددی قابل قبول را مشخص می کند. به عنوان مثال اگر این صفت را برابر ۳ قرار دهیم، مقادیر قابل قبول اعدادی همچون ۶،۳،۰،-۳ و …خواهند بود.
    • value: مقدار پیشفرض را مشخص می کند.
  • color :از این مقدار برای ایجاد فیلدهایی که امکان انتخاب رنگ را به کاربر می دهند استفاده می شود. مرورگر opera از یک جعبه رنگ برای اینکار استفاده  می کند. در حالی که کروم فقط امکان وارد کردن مقادیر hexadecimal را می دهد و در غیر اینصورت پیغام خطا را نمایش می دهد.
  •  

    حاصل اجرای کد فوق در مرورگر opera به صورت زیر خواهد بود:

    1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه دوم)

    • date :در HTML5 چندین مقدار جدید به منظور امکان انتخاب تاریخ و زمان فراهم آورده شده است، یکی از این مقادیر date می باشد که امکان انتخاب تاریخ خاصی را برای یک فیلد می دهد.
 

سایر مقادیری که می توان برای انتخاب زمان و تاریخ استفاده کرد شامل مقادیری همچون month , week , time , datetime و datetime-local می باشد.

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

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net