خانه » نحوه ایجاد لیست کشویی در HTML

نحوه ایجاد لیست کشویی در HTML

  • تاریخ :‌
  • دسته : ---
در جلسه قبل با ساخت فرم در HTML و برخی از اجزای فرم آشنا شدیم. در این جلسه با آموزش ساخت لیست کشویی  و texarea  و ساخت دکمه در فرم ها آشنا میشویم.

لیست های کشویی <select>
برای ایجاد لیست کشویی یا drop-down از تگ باز و بسته <select></select> استفاده می کنیم. کلیه آیتم های این لیست بایستی درون تگ باز و بسته <option></option> قرار بگیرند.

<select>
 <option> blue </option>
 <option> red </option>
 <option> yellow </option>
 <option> black </option>
</select>


نکته : لیست کشویی به صورت پیش فرض اولین آیتم را به عنوان "آیتم انتخاب شده" نمایش می دهد مگر اینکه صفت selected را برای یکی از <option> ها بنویسید. مثلا در لیست بالا برای انتخاب گزینه black به صورت "انتخاب پیش فرض" به صورت زیر عمل می کنیم.

<select>
 <option> blue </option>
 <option> red </option>
 <option> yellow </option>
 <option selected> black </option>
</select>


نکته : می توانیم برای هر آیتم مقداری جدا از نمایش نام آنها تعریف کنیم. این مقدار را برابر صفت value قرار می دهیم.

<select>
 <option value="color1"> blue </option>
 <option value="color2"> red </option>
 <option value="color3"> yellow </option>
 <option value="color4"> black </option>
</select>


خصوصیت multiple در تگ select
اگر خصوصیت multiple را برای تگ <select> بنویسیم ، لیست کشویی به صورت باز و انتخاب چند گزینه ای تبدیل می شود.

<select multiple>
 <option> blue </option>
 <option> red </option>
 <option> yellow </option>
 <option selected> black </option>
</select>


ساخت ورودی متن چند خطی textare
برای ساخت textarea جهت ورود متن به صورت چند خطی بایستی از تگ باز و بسته <textarea></textarea> استفاده کنیم.

همچنین می توانیم با تعیین مقدار صفت های rows )سطرها) و  cols (ستون ها) تعداد سطرها و ستون های این فیلد را مشخص کنیم.

در مثال زیر یک textarea با 4 سطر و 50 ستون ایجاد می کنیم :

<textarea rows="4" cols="50">
 This is sample text
</textarea>


ساخت دکمه <button>
توسط تگ بازو بسته <button></button> شما می توانید در فرم مورد نظر دکمه ایجاد کنید. با تعیین مقدار type در تگ button نوع دکمه مشخص می گردد.

مقدار type می تواند سه گزینه زیر باشد
Submit:  مانند دکمه ارسال عمل میکند و اطلاعات فرم را به آدرس action ارسال می کند.
Reset : مقادیر اجزا فرم را به حالت اول بر می گرداند.
Button : فقط دکمه ایجاد می کند.
 متنی که بین دو تگ <button></button> قرار می گیرد به عنوان متن روی دکمه در نظر گرفته می شود.

<button type="button">Button</button>
<button type="reset">Reset</button>
<button type="submit">Submit</button>


خب مبحث فرم ها در آموزش مقدماتی طراحی وب به پایان رسید. در جلسات آینده و معرفی HTML5 ویژگی های جدیدتری از فرم ها را یاد خواهید گرفت. در جلسه بعدی وارد مباحث CSS شده و صفحات وب را زیباتر می کنیم.



مطالب مشابه

ارسال نظر

عکس خوانده نمی‌شود





2018 © تمامی حقوق این وب‌سایت برای پیشروسافت محفوظ است.
انصراف
سوالی دارید؟ پاسخگو هستیم