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

علیرضا حاتمی نیا 11567

عرض سلام دارم خدمت شما همراهان گرامی مخصوصا علاقه مندان به مباحث آموزش طراحی وب. علیرضا حاتمی نیا هستم با آموزش قسمت دهم طراحی وبHTML  و CSS از سری آموزش های برنامه نویسی در خدمت شما هستم.

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

لیست های کشویی <select>

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

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

 

 

ساخت لیست کشویی در HTML

 

نکته : لیست کشویی به صورت پیش فرض اولین آیتم را به عنوان "آیتم انتخاب شده" نمایش می دهد مگر اینکه صفت 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>


خصوصیت multiple برای تگ 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>

 

 

ساخت دکمه در HTML

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

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت