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

علیرضا حاتمی نیا 1395/9/24 2182

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

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

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

در جلسه قبل با ساخت فرم و برخی از اجزای فرم آشنا شدیم. در این جلسه ادامه مبحث فرم ها رو خدمت  شما ارائه می دهیم و با اجزای بیشتری آشنا می شویم.

لیست های کشویی <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 :

 

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

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

 

 

 

آموزش طراحی وب

 

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

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

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

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

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

 

 

 

طراحی وب

 

ساخت دکمه <button> :

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

Submit:  مانند دکمه ارسال عمل میکند و اطلاعات فرم را به آدرس action ارسال می کند.

Reset : مقادیر اجزا فرم را به حالت اول بر می گرداند.

Button : فقط دکمه ایجاد می کند.

 متنی که بین دو تگ <button></button> قرار می گیرد به عنوان متن روی دکمه در نظر گرفته می شود.

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

 

 

آموزش طراحی وب

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

طبق روال همیشه برای این جلسه یک آموزش ویدیویی تهیه شده که می توانید از لینک زیر مشاهده کنید.

ممنون که همراه ما بودید.

دانلود PDF قسمت دهم آموزش طراحی وب

دانلود ویدیو

قسمت بعدی قسمت قبلی