خانه / مقالات اموزشی / html / آموزش form HTML‏
آموزش HTML5
آموزش HTML5

آموزش form HTML‏

کار با فرم ها در HTML

یادآوری : در جلسه قبل با مقادیر مختلف صفت type برای تگ input در فرم آشنا شدیم که حال همه آن ها را مروری سریع خواهیم کرد. گفتیم که از مقدار:text برای جعبه متن یک خطی، password برای جعبه متن رمزی، radio برای ایجاد دکمه های رادیویی، checkbox برای ایجاد چک باکس ها، submit برای ارسال فرم به صفحه پردازشگر، reset برای پاک کردن محتویات فیلدهای فرم، file برای آپلود یک فایل، image برای دکمه submit تصویری، email برای جعبه متن ایمیلی، url برای جعبه متن آدرس اینترنتی، number و range برای فیلدهای حاوی اعداد، color برای فیلدهای امکان انتخاب رنگ، date برای فیلدهای امکان انتخاب تاریخ و مقدار search برای ایجاد فیلدهای جستجو استفاده می کنیم.حال در این جلسه با بقیه ی صفات تگ input آشنا خواهیم شد.

size: از این صفت هنگامی استفاده می شود که صفت type برابر با یکی از مقادیر password , text یا fiel باشد استفاده می شود و به وسیله آن عرض این نوع عناص را می توان کنترل کرد، این صفت مقداری عددی را می پذیرد و به اندازه همان تعداد کاراکتر به این نوع عناصر عرض می دهد. به عنوان مثال اگر برای این صفت ۵۰ را در نظر بگیریم عنصر مورد نظر به اندازه ۵۰ کاراکتر عرض خواهد داشت.

 

maxlength: این مقدار هم عددی صحیح را می پذیرد و حداکثر تعداد کاراکتری را که کاربر می تواند در عناصری از نوع  password , text یا file وارد کند را مشخص می کند.

checked: هنگامی استفاده می شود که صفت type برابر checkbox یا radio باشد. این صفت بولین موجب می شود. که عناصر از این نوع به صورت پیشفرض به حالت انتخاب شده درآیند.

 

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

src : این صفت آدرس عکسی که قرار است به عنوان دکمه submit ایجاد شود را مشخص می کند. از این صفت هنگامی استفاده می شود. که مقدار type برابر image است استفاده می شود.

accept : از این صفت هنگامی استفاده می شود که صفت type برابر file باشد استفاده می شود. و میتوان نوع فایلهایی که کابر از کامپیوتر خود برای آپلود انتخاب کند را مشخص می کند. این صفت لیستی از MimeType  فایل های مورد نظر را به عنوان مقدار می پذیرد و به عنوان مثال در صورتی که بخواهیم کاربر فقط بتواند فایل هایی از نوع gif یا jpg را انتخاب کند کد آن به صورت زیر است:

 

readonly: از این صفت برای فقط خواندنی کردن عناصر فرم استفاده می شود. این صفت که جزء صفت های boolean است در صورتی که برای عناصر فرم استفاده شود، کاربر امکان تغییر محتویات آن عنصر را نخواهد داشت.

disabled : این صفت بولین عناصر را به حالت غیر فعال در می آورد.

صفات readonly و disabled تفاوت ها و شباهت هایی دارند که در تصویر زیر توضیح داده شده است:

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

صفت های جدید برای تگ input

همانند مقادیر جدیدی که برای صفت type در تگ input در HTML5 ارائه شده است در این نسخه صفت های جدیدی نیز برای این تگ در نظر گرفته شده است که در ادامه با آنها آشنا خواهیم شد:

autofocus : اعمال این صفت بولین بر روی یک تگ input موجب می شود تا در هنگام بارگزاری صفحه focus به صورت پیشفرض بر روی آن قرار گیرد. به این نکته توجه داشته باشید که در هر صفحه فقط یک تگ input می تواند این صفت را اختیار کند.

 

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

placeholder : سرچ از متداولترین کارهایی که در مورد کادرهای متنی انجام می شود قرار دادن متنی به صورت پیشفرض در داخل آن هاست که در هنگام اعمال focus بر روی آن ها پاک می شود. این کار تا قبل از این به دشواری و با استفاده از جاوااسکریپت انجام میشد. اما اکنون با ارائه صفت placeholder در HTML5 این کار به آسانی انجام می شود. این صفت مقداری که قرار است به صورت پیشفرض در داخل کادر متنی نمایش داده شود را می پذیرد. از این صفت معمولا در کادرهای جستجو استفاده می شود:

 

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

required : از این صفت بولین برای آن دسته از عناصری که نمی توان آن ها را خالی رها کرد و در واقع وارد کردن آن الزامی است لستفاده می شود. از این صفت می توان در تگ های textarea و اغلب تگ های input استفاده کرد. مرورگر هایی که از این صفت پشتیبانی می کنند. در صورت خالی رها کردن فیلدهایی که این صفت را اختیار کرده اند پیغام خطا نمایش می دهند.

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

ایجاد combobox و listboxها

از جمله مهمترین و البته پرکاربردترین عناصر فرم، comboboxها و listboxها هستند. این عناصر با استفاده از ترکیب تگ های select و option ایجاد می شوند. همچنین از تگ optgroup در داخل تگ select برای گروه بندی آیتم های عناصر فوقالذکر استفاده می شود.

تگ <select> : برای ایجاد عناصر combobox یا listbox استفاده میشود. این تگ از صفت های زیر استفاده  میکند.

  • name : نامی برای عنصر انتخاب می کند.
  • size :یزای ایجاد listboxها استفاده میشود. و عددی صحیح زرا میپذیرد و تعداد آیتم های نمایشی در listbox را مشخص مسی کند.
  • multiple : این صفت بولین امکان انتخاب چندین گزینه در یک listbox را برای کاربر فراهم می کند. برای اینکار کاربر باید دکمه CTRL صفحه کلید را نگه دارد.

تگ <option> : همیشه داخل تگ <select> استفاده می شود و آیتم های داخل آن را مشخص می کند. مقداری که بین این تگ قرار میگیرد عنوان هر آیتم خواهد بود. صفت های این تگ به شرح زیر است:

  • value : یمقداری را برای هر آیتم مشخص می کند. value مقداری خواهد بود که در صورت انتخاب آیتم توسط کاربر برای صفحه پردازشگر ارسال می شود. زمانیکه این صفت تعیین نشود محتوای عنصر option به عنوان value در نظر گرفته می شود.
  • selected :  در صورت استفاده از این صفت بولین برای یک option آن آیتم به صورت پیشفرض به حالت انتخاب شده در خواهد آمد.
نکته : در یک combobox فقط یک آیتم می تواند این صفت را اختیار کند ولی در listbox چندین آیتم می تواند این صفت را داشته باشند.

مثال زیر نحوه ایجاد یک comboboxرا نشان می دهد.

 

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

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

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

تگ <optgroup> : از این تگ برای گروه بندی optionهای listbox یا combobox استفاده می شود. برای اینکار می بایست optionهای موردنظر را داخل تگ باز و بسته optgroup قرار دهیم. صفت های این تگ به شرح زیر است:

label : عنوان هر گروه را مشخص می کند.

کد زیر نحوه گروه بندی عناصر یک combobox را با استفاده از این تگ نمایش می دهد.

 

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

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

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

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

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

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

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

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

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