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