تگ select در HTML

با تگ select در HTML در این مقاله آشنا می شوید.

نکات اصلی تگ select

• تگ های انتخاب HTML یک عنصر انتخاب را تعریف می کنند – یک کنترل فرم با منوی گزینه ها.
• هر گزینه در تگ های <option> بسته بندی شده است.
• شما باید هر دو تگ انتخابی را شروع و پایان دهید.
• نه تنها تگ های select دارای هشت ویژگی خاص تگ هستند ، بلکه از خصوصیات جهانی نیز پشتیبانی می کنند.

استفاده از تگ select در HTML

بسته بندی محتوا با تگ های انتخاب HTML ، یک لیست کشویی با یک یا چند گزینه برای انتخاب ایجاد می کند:

<select name="housepets">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="llama">Llama</option>
  <option value="rabbit">Rabbit</option>
  <option value="animal">Animal</option>
</select>

این بیشتر در یک عنصر <form> برای جمع آوری ورودی کاربر استفاده می شود.

عنصر select در HTML شامل عناصر <option> است که گزینه های منو را تعریف می کند. هر یک از آن ها باید ارزش خاص خود را به عنوان یک ویژگی داشته باشند. اگر شامل نشود ، محتوای متن عنصر به عنوان مقدار در نظر گرفته می شود.

ویژگی های تگ که بیشتر مورد استفاده قرار می گیرند

هشت ویژگی خاص تگ وجود دارد که به طور معمول با تگ های انتخاب HTML استفاده می شود.

autocomplete مشخص می کند که آیا مرورگر می تواند مقادیر زمینه را به صورت خودکار پر کند:

<select name="holiday_destination" autocomplete="off">
  <option value="bra">Sao Paulo</option>
  <option value="cub">Havana</option>
  <option value="fji">Suva</option>
  <option value="jam">Kingston</option>
  <option value="mdv">Male</option>
</select>

autofocus ، فوکوس خودکار لیست کشویی را به طور خودکار متمرکز می کند:

<select name="vehicles" autofocus>
  <option value="car">Car</option>
  <option value="bike">Bike</option>
  <option value="bicycle">Bicycle</option>
</select>

توجه: فقط یک عنصر فرم می تواند در یک صفحه فوکوس خودکار داشته باشد.

disabled لیست کشویی را غیرفعال می کند:

<select name="mediatype" disabled>
  <option value="mp4">MP4</option>
  <option value="mov">MOV</option>
  <option value="flv">FLV</option>
</select>

 form،عنصر انتخاب شده را به یک یا چند شکل پیوند می دهد:

<form action="process.php" id="language">
  Primary Language: <input type="text" name="lang">
  <input type="submit">
</form>

<select name="expertise" form="language">
  <option value="speakwrite">Speak/Write</option>
  <option value="speak">Speak</option>
  <option value="write">Write</option>
</select>

multiple امکان انتخاب همزمان چند گزینه را فراهم می کند:

<select name="languages" multiple>
  <option value="english">English</option>
  <option value="french">French</option>
  <option value="russian">Russian</option>
  <option value="tamil">Tamil</option>
  <option value="spanish">Spanish</option>
</select>

توجه: اگر چندین مورد را فعال کنید ، بیشتر مرورگرها منوی کشویی را با جعبه لیست پیمایش جایگزین می کنند.

name نام منوی کشویی HTML را تعریف می کند:

<select name="department">
  <option value="parks">Parks</option>
  <option value="rnd">R&D</option>
  <option value="finance">Finance</option>
  <option value="rec">Recreational</option>
  <option value="purchasing">Purchasing</option>
</select>

required ، انتخاب یک گزینه در یک لیست را اجباری می کند:

<select name="pet" required>
  <option value="lama">Lama</option>
  <option value="racoon">Racoon</option>
  <option value="mouse">Mouse</option>
<input type="submit">
</select>

اگر منو توسط مرورگر به عنوان یک جعبه لیست پیمایش ارائه شده است ، اندازه تعداد گزینه های نمایش داده شده را مشخص می کند:

<select name="meals" size="2">
  <option value="eggs">Eggs</option>
  <option value="salad">Salad</option>
  <option value="bread">Bread</option>
  <option value="ham">Ham</option>
</select>

گزینه پیش فرض در مقابل Placeholder

در نمونه هایی که بررسی کردیم ، از ابتدا همیشه یک گزینه نشان داده می شد. هنگام استفاده از انتخاب HTML ، گزینه پیش فرض معمولاً اولین انتخاب است. اگر می خواهید گزینه دیگری را به عنوان HTML انتخاب کنید ، مقدار پیش فرض را انتخاب کنید ، باید کلمه کلیدی انتخاب شده را اضافه کنید:

<select name="lunch">
  <option value="chic">Chicken pot pie</option>
  <option value="beef">Beef stew</option>
  <option value="pizza" selected>Pepperoni pizza</option>
  <option value="jelly">Jelly beans</option>
</select>

اگر نمی خواهید هیچ یک از گزینه ها به صورت پیش فرض نشان داده شود ، همچنین می توانید یک مکان نگهدار HTML انتخاب کنید. برای انجام این کار ، از گزینه های انتخاب شده و غیرفعال شده در گزینه ای که هیچ ارزشی ندارد استفاده کنید:

<select name="dessert">
  <option value="" disabled selected>Please choose one</option>
  <option value="choc">Chocolate cake</option>
  <option value="mango">Mango sorbet</option>
  <option value="car">Caramel pudding</option>
  <option value="pick">Pickles</option>
</select>

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.