منو

کنترل های ذاتی HTML(قسمت هفدهم)

کنترل های ذاتی HTML
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های Html

مطالب این جلسه

کنترل <fieldset> :

اين کنترل توسط تگ < fieldset > ايجاد شده و به دور محتويات درونی خود يک کادر ايجاد می کند . تگ ها و عناصری که بين تگ باز و بسته < fieldset > قرار بگيرند ، عناصر درونی آن را تشکيل می دهند . از اين کنترل برای دسته بندی عناصر و گروه های مختلف استفاده می شود .

تگ <legend> :

از اين تگ برای ايجاد عنوان برای کادر fieldset استفاده می شود . متنی که بين تگ باز و بسته < legend > قرار بگيرد ، تعيين کننده عنوان کادر است . در مثال زير نحوه استفاده از اين تگ نشان داده شده است.

در مثال زیر یک پاراگراف را درون این تگ قرار داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<fieldset>
<legend> یک عنوان </legend>
<p> این یک پاراگراف است </p>
</fieldset>
</body>
</html>
پیش نمایش

کنترل <lable> :

اين تگ برای ايجاد يک عنوان برای يک کنترل ديگر HTML استفاده می شود . برای ايجاد ارتباط بين تگ < label > و کنترل مورد نظر ، خاصيت for تگ label را برابر id کنترل مورد نظر قرار می دهيم .

برای مثال ، اگر يک دکمه راديويي با id = Male داشته باشيم و بخواهيم يک label برای آن طراحی کنيم ، برای ايجاد ارتباط بين label و دکمه راديويي ، خاصيت for تگ label را برابر id دکمه راديويي يعنی Male قرار می دهيم . در اين صورت کليک کردن بر روی نوشته label همانند کليک کردن بر روی خود کنترل مورد نظر است .

خواص مهم تگ label
نام خاصيت نوع خاصيت شرح
for id يک کنترل ديگر تعيين کننده id کنترلی است که label به آن تعلق دارد .

در مثال زير برای 2 دکمه راديويي زير ، 2 label جدا طراحی کرده ايم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<fieldset>
<legend> یک عنوان </legend>
<input type="radio" id="Male" name="gender" >
<lable id="Male" > Male </lable>
<input type="radio" id="Female" name="gender" >
<lable id="Female" > Female </lable>
</fieldset>
</body>
</html>
پیش نمایش

کنترل <select> :

از کنترل select برای ايجاد يک ليست باز شو استفاده می شود . اين ليست می تواند دارای گزينه های مختلفی باشد که هر کدام توسط يک تگ < option > تعيين می شود :

خواص مهم تگ select
نام خاصيت نوع خاصيت شرح
disabled disabled در صورتی که مقدار اين خاصيت برابر disabled تنظيم شود ، ليست غير فعال خواهد بود .
multiple multiple در صورتی که مقدار اين خاصيت برابر multiple تنظيم شود ، می توان در هر لحظه بيش از يک مورد را از ليست انتخاب کرد . در حالت پيش فرض ، در هر لحظه حداکثر می توان يک مورد را از ليست انتخاب کرد .
name نام تعيين کننده يک نام منحصر به فرد برای ليست باز شو است .
size عدد
number
توسط اين خاصيت می توان تعداد آيتم های قابل مشاهده در ليست را در حال عادی ( بسته بودن ليست ) تعيين کرد . به طور پيش فرض فقط يک آيتم از ليست قابل مشاهده است .

تگ <option> :

از اين تگ برای تعيين يک مورد در داخل يک ليست استفاده می شود . متنی که بين تگ باز و بسته < option > قرار بگيرد ، تعيين کننده نام گزينه در ليست است .

اين تگ بايستی در درون تگ < select > به کار رود در غير اين صورت معنا و کاربردی ندارد

خواص مهم تگ option
نام خاصيت نوع خاصيت شرح
disabled disabled در صورتی که مقدار اين خاصيت برابر disabled تنظيم شود ، آن گزينه ليست غير فعال خواهد بود .
selected selected در صورتی که مقدار اين خاصيت برای گزينه ای در ليست برابر selected تنظيم شود ، آن گزينه به صورت پيش فرض در ليست انتخاب شده است و اول نمايش داده می شود . در هر ليستي در هر لحظه حداکثر يک گزينه می تواند selected باشد .
value مقدار مقدار و ارزش گزينه را تعيين می کند ، که در هنگام ارسال اطلاعات فرم به سرور استفاده می شود .

در مثال زير يک ليست بازشو با چندين مقدار ايجاد شده است . همچنين در موارد بعدی انواع خصوصيات تگ select را به صورت عملی بررسی کرده ايم . برای مشاهده گزينه های ديگر ليست ، بر روی آن کليک کنيد :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<select>
<option value="1"> Html </option>
<option value="2"> Css </option>
<option value="3"> JavaScript </option>
<option value="4"> Jquery </option>
</select>
</body>
</html>
پیش نمایش

در حالت زير ليست غير فعال است .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<select disabled="disabled">
<option value="1"> Html </option>
<option value="2"> Css </option>
<option value="3"> JavaScript </option>
<option value="4"> Jquery </option>
</select>
</body>
</html>
پیش نمایش

در حالت زير می توان از ليست بيش از يک گزينه انتخاب کرد .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<select multiple="multiple">
<option value="1"> Html </option>
<option value="2"> Css </option>
<option value="3"> JavaScript </option>
<option value="4"> Jquery </option>
</select>
</body>
</html>
پیش نمایش

در حالت زير بيش از يک گزينه از ليست در حالت عادی نمايش داده می شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<select size ="2">
<option value="1"> Html </option>
<option value="2"> Css </option>
<option value="3"> JavaScript </option>
<option value="4"> Jquery </option>
</select>
</body>
</html>
پیش نمایش

تگ <optgroup> :

از اين تگ برای دسته بندی گزينه های يک ليست در گروه های جدا از هم استفاده می شود . در هنگام زياد بودن موارد ليست ، از اين تگ می توان برای دسته بندی موارد مشابه در گروه های جدا ، جهت سهولت در انتخاب استفاده شود . عنوانی که برای گروه توسط خاصيت label اين تگ تعيين می شود ، به صورت سر گروه و بزرگتر از موارد ديگر ، در ليست نمايش داده می شود ولی عملا قابل انتخاب نيست .

اين تگ بايد در درون تگ select به کار رود .

خواص مهم تگ optgroup
نام خاصيت نوع خاصيت شرح
disabled disabled در صورتی که مقدار اين خاصيت برابر disabled تنظيم شود ، آن دسته گزينه ليست غير فعال خواهد بود .
label متن
text
عنوان گروه را در ليست تعيين می کند .

در مثال زیر به نحوه استفاده اشاره شده است :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<select>
<optgroup label="Client Side Languages">
<option value="1"> Html </option>
<option value="2"> Css </option>
</optgroup>
<optgroup label="Server Side Languages">
<option value="3"> C# </option>
<option value="4"> Sql server </option>
</optgroup>
</select>
</body>
</html>
پیش نمایش