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

Your browser doesn't support video.
Please download the file: video/mp4

عرض سلام دارم خدمت شما همراهان گرامی مخصوصا علاقه مندان به مباحث آموزش طراحی وب. علیرضا حاتمی نیا هستم با آموزش قسمت دهم طراحی وب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>

 

لسیت کشویی

ساخت ورودی متن چند خطی textare

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

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

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

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

 

ناحیه متنی در html

ساخت دکمه <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  شده و صفحات وب را زیباتر می کنیم.

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران