كار با فرم ها - بخش سوم

checkbox

براي درست کردن انتخاب چند گزينه اي checkboxes بايد type=”checkbox” قرار دهيم . براي مواقعي که ما ميخواهيم بيننده يک يا چند گزينه را انتخاب کند از آن استفاده ميکنيم. براي هر گزينه در اين قسمت بايد يکبار اين کد را نوشت و اگر ميخواهيد به صورت پيش فرض يک گزينه تيک خورده باشد بايد کلمه checked  را به تگ اضافه کنيد:

Item 01 Item 02 Item 03

radio button

براي انتخاب تک گزينه اي از type=”radio” استفاده ميشود و به آنها radio button ميگويند ،  در مواردي کاربرد دارد که کاربر حق انتخاب يک گزينه را دارد.

Item 01 Item 02 Item 03 Item 04

drop-down list

يکي ديگر از اجزاي فرم، ليستهاي انتخابي است که در مرورگر بشکل ليستهاي پايين آمدني (drop-down list) ظاهر ميشوند. با تگ  <select> آغاز ميشود و براي هر گزينه داخل اين ليست بايد تگ  <option> را بنويسيد و در انتهاي آنها تگ پايان دهنده اين ليست يعني </select> را مينويسيم. در ليست ساخته شده، بيننده و کاربر ميتواند يک گزينه را انتخاب کند ولي اگر خصوصيت multiple را به تگ <select> اضافه کنيد، کاربر ميتواند با پايين نگه داشتن دکمه هاي Ctrl يا Shift بر روي کيبورد، چند گزينه را از آن ليست بطور همزمان انتخاب کند.   

<select name="selectList01" multiple>
<option value="item1">Item 01</option>
<option value="item2">Item 02</option>
<option value="item3">Item 03</option>
<option value="item4">Item 04</option>
<option value="item5">Item 05</option>
</select>

Item 01 Item 02 Item 03 Item 04 Item 05

تگ select  داراي خصوصيت size هم ميباشد که اگر آنرا برابر با عدد يک قرار دهيم بصورت زير ظاهر ميشود که در اين حالت بهتر است خصوصيت multiple را حذف کنيد. بصورت پيش فرض اولين گزينه در ليست نمايان ميشود ولي اگر خصوصيت selected را به يکي ديگراز تگهاي option اضافه کنيد، در مرورگر آن گزينه نمايش داده ميشود.

Item 01 Item 02 Item 03 Item 04 Item 05

fieldset

بمنظور مرتب کردن و نظم دادن به اجزاي داخل يک فرم ميتوان از تگ<fieldset> در ابتداي کد يکي از اجزاي مورد نظراستفاده کرد و در انتهاي همان کد تگ </fieldset> را نوشت که با اين تگ يک کادر مستطيل نازک دور آن درست خواهد شد و اجزاي يک فرم را از هم جدا خواهد کرد. شما حتي ميتوانيد براي آن قسمت يک اسم بگذاريد که در بالاي آن کادر در مرورگر نمايان ميشود که براي اين کار بعد از تگ <fieldset> بايد تگ <legend> NAME </legend> را بکار برد که هر اسمي را ميتوانيد بجاي کلمه NAME بکار بريد.