در این جلسه در طراحی سایت با ادامه کار با فرم ها در HTML پیش می رویم:


required:

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


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

<form>
<input type="text" name="user_name" required="required" />
<input type="submit" />
</form>


listbox وcombobox ایجاد


از جمله مھمترین و البته پرکاربردترین عناصر فرم، 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را نشان می دھد.

 <select name="cars" id="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </select>


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

 <select name="cars" id="cars" multiple="multiple">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </select>

تگ <optgroup>:

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

صفت ھای این تگ به شرح زیر است:


label:

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


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

 <select>
 <optgroup label="Swedish Cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 </optgroup>
 <optgroup label="German Cars">
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
 </optgroup>
 </select>


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

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

  • بهینه سازی موتور جستجو(SEO)

    بهینه سازی موتور جستجو(SEO) چیست؟ سئو یک رشته بازاریابی است که در آن تمرکز بر روی قابلیت د…
  • طراحی سایت شخصی جناب آقای دکتر خرسندی

    طراحی سایت شخصی جناب  آقای دکتر خرسندی نام وب سایت : خرسندی تاریخ تحویل :تیر ۹۶ آدرس وب سا…
  • تاثیر سئو وبلاگ در طراحی سایت

    امروز می خواهیم در مورد موضوع تاثیر وبلاگ در طراحی سایت باهم صحبت کنیم. در طراحی سایت که ا…
  • الگوریتم Rank Brain گوگل

      مقاله ای که در طراحی سایت اسپیناس می خواهیم در مورد آن صحبت کنیم در مورد الگوریتم R…
  • CRM چیست ؟

    Crm چیست ؟ امروز در طراحی وب سایت اسپیناس به این موضوع میپردازیم یک شرکت برای بیزنس خود عل…
  • کمپین تبلیغاتی Advertising Campaign در طراحی وب سایت

      امروز در طراحی سایت اسپیناس می خواهیم در مورد یک موضوع داغ امروز صحبت کنیم. بیشتر م…
بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Html در طراحی سایت

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

نشانی ایمیل شما منتشر نخواهد شد.

بررسی کنید

آموزش HTML5 (جلسه دوم) – تگ های ساختار صفحه

در دومین جلسه از طراحی سایت با HTML5 به تگ ھای ساختار صفحه خواھیم پرداخت. این تگ ھا ھمانطو…