Π Π°Π·Π½ΠΎΠ΅

Html Π²Ρ‹Π±ΠΎΡ€ ΠΈΠ· списка: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML

02.02.2019

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

HTML Ρ‚Π΅Π³

HTML Ρ‚Π΅Π³ <select> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появляСтся ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΌΡ‹ΡˆΡŒΡŽ Π½Π° элСмСнт Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².

Для опрСдСлСния доступных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π²Ρ‹Π±ΠΎΡ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <option>, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ Π² Ρ‚Π΅Π³ <select>.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Π² спискС отобраТаСтся ΠΊΠ°ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ. Для измСнСния ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ selected.

Для объСдинСния Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π² ΠΎΠ΄Π½Ρƒ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <optgroup>. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ‚Π΅Π³Π° <optgroup> выглядит ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΆΠΈΡ€Π½ΠΎΠ³ΠΎ начСртания.

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ списка зависит ΠΎΡ‚ использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° size, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ устанавливаСт высоту списка. Π¨ΠΈΡ€ΠΈΠ½Π° списка зависит ΠΎΡ‚ Π΄Π»ΠΈΠ½Ρ‹ тСкста Π² Ρ‚Π΅Π³Π΅ <option>. Π¨ΠΈΡ€ΠΈΠ½Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS стилСй.

Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π° сСрвСр, Π»ΠΈΠ±ΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ списку Ρ‡Π΅Ρ€Π΅Π· скрипты, Ρ‚ΠΎ Ρ‚Π΅Π³ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΡ‹ (Ρ‚Π΅Π³ <form>).

Бинтаксис¢

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ элСмСнта Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ (<select>) ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ (</select>) Ρ‚Π΅Π³Π°ΠΌΠΈ. Π—Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ обязатСлСн

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΒΆ

<!DOCTYPE html>
<html>
  <head>
    <title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠΊΠ½Π° Π²Π΅Π±-страницы</title>
  </head>
  <body>
    <form action="action_form.php" target="_top">
      <select>
        <option value="books">Книги</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами!

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΒΆ

КнигиHTMLCSSPHPJavaScript

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΒΆ

<!DOCTYPE html>
<html>
  <head>
    <title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠΊΠ½Π° Π²Π΅Π±-страницы</title>
  </head>
  <body>
    <select>
      <optgroup label="Книги">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Π‘Π½ΠΈΠΏΠΏΠ΅Ρ‚Ρ‹">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами!

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ использовали Ρ‚Π΅Π³ <optgroup> для сбора ΠΎΠΏΡ†ΠΈΠΉ Π² Π³Ρ€ΡƒΠΏΠΏΠ΅.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΒΆ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΒΆ

<!DOCTYPE html>
<html>
  <head>
    <title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠΊΠ½Π° Π²Π΅Π±-страницы</title>
  </head>
  <body>
    <p>Аэропорт Π²Ρ‹Π»Π΅Ρ‚Π°:</p>
    <form action="action_form.php" target="_top">
      <input type = "text" list = "airports" name="airports"> 
      <datalist id = "airports">
        <option value = "Π‘Π°Π½ΠΊΡ‚-ΠŸΠ΅Ρ‚Π΅Ρ€Π±ΡƒΡ€Π³">
        <option value = "ΠšΡ€Π°ΡΠ½ΠΎΠ΄Π°Ρ€">
        <option value = "Москва">
        <option value = "Новосибирск">
      </datalist>
      <input type = "submit" value = "ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ">
    </form>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами!

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΒΆ

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ использовали Ρ‚Π΅Π³ <form>, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π° сСрвСр.

Атрибуты ΒΆ

Π’Π΅Π³ <select> ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Ρ‚Π΅Π³Ρƒ <select> ?

РаспространСнныС свойства для измСнСния Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ насыщСнности/выдСлСния/Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° <select>:

Π¦Π²Π΅Ρ‚ тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° <select>:

Π‘Ρ‚ΠΈΠ»ΠΈ форматирования тСкста для Ρ‚Π΅Π³Π° <select>:

Π”Ρ€ΡƒΠ³ΠΈΠ΅ свойства для Ρ‚Π΅Π³Π° <select>:


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°


| HTML (ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹)

Π’Π΅Π³

<select> (ΠΎΡ‚ Π°Π½Π³Π». select β€” Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ) позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ элСмСнт интСрфСйса Π² Π²ΠΈΠ΄Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка, Π° Ρ‚Π°ΠΊΠΆΠ΅ список с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ мноТСствСнным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ.

ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Π²ΠΈΠ΄ зависит ΠΎΡ‚ использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° size, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ устанавливаСт высоту списка. Π¨ΠΈΡ€ΠΈΠ½Π° списка опрСдСляСтся самым ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ тСкстом, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ Π² элСмСнтС <option>, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <option>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <select>.

Если планируСтся ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ списка Π½Π° сСрвСр, Ρ‚ΠΎ трСбуСтся ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ <select> Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΡ‹. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ списка ΠΈΠ΄Ρ‘Ρ‚ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· скрипты.

Π€ΠΎΡ€ΠΌΡ‹

Бинтаксис

<select>
  <option>ΠŸΡƒΠ½ΠΊΡ‚ 1</option>
  <option>ΠŸΡƒΠ½ΠΊΡ‚ 2</option>
</select>

Π—Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ обязатСлСн.

Атрибуты

autofocus
УстанавливаСт, Ρ‡Ρ‚ΠΎ список ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы.
disabled
Π‘Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ доступ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ элСмСнта.
form
БвязываСт список с Ρ„ΠΎΡ€ΠΌΠΎΠΉ.
multiple
ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ сразу нСсколько элСмСнтов списка.
name
Имя элСмСнта для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π½Π° сСрвСр ΠΈΠ»ΠΈ обращСния Ρ‡Π΅Ρ€Π΅Π· скрипты.
required
Бписок обязатСлСн для Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹.
size
ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… строк списка.

Π’Π°ΠΊΠΆΠ΅ для этого элСмСнта доступны ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

autofocus

Атрибут autofocus устанавливаСт, Ρ‡Ρ‚ΠΎ список ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы, ΠΏΡ€ΠΈ этом список становится доступным для Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

Бинтаксис

<select autofocus>
  ...
</select>

ЗначСния

НСт.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½.

disabled

Π‘Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ доступ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ элСмСнтов списка. Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ фокус Ρ‡Π΅Ρ€Π΅Π· курсор ΠΈΠ»ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ, Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Ρ‘Π½, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка Π½Π΅ пСрСдаётся Π½Π° сСрвСр.

Бинтаксис

<select disabled>
  ...
</select>

ЗначСния

НСт.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½.

form

БвязываСт список с Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΏΠΎ Π΅Ρ‘ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ.

Вакая связь Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π² случаС, ΠΊΠΎΠ³Π΄Π° список располагаСтся Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ <form>.

Бинтаксис

<select form="<ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€>">
  ...
</select>

ЗначСния

Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Ρ„ΠΎΡ€ΠΌΡ‹ (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id элСмСнта <form>).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

НСт.

multiple

НаличиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° multiple сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ содСрТимоС элСмСнта <select> ΠΊΠ°ΠΊ список мноТСствСнного Π²Ρ‹Π±ΠΎΡ€Π°. ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Π²ΠΈΠ΄ списка зависит ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°

size ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Для Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ списка ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ клавиши Ctrl ΠΈ Shift совмСстно с курсором ΠΌΡ‹ΡˆΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π° сСрвСр отправлялся массив Π΄Π°Π½Π½Ρ‹Ρ…, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° name слСдуСт ΠΏΠΈΡΠ°Ρ‚ΡŒ с ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ скобками β€” hero[], ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ.

Бинтаксис

<select multiple>
  . ..
</select>

ЗначСния

НСт.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½.

name

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя элСмСнта <select>. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, это имя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для доступа ΠΊ Π΄Π°Π½Π½Ρ‹ΠΌ Ρ‡Π΅Ρ€Π΅Π· скрипты ΠΈΠ»ΠΈ для получСния Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ значСния списка Π½Π° сСрвСрС.

Бинтаксис

<select name="<имя>">
  ...
</select>

ЗначСния

Π’ качСствС ΠΈΠΌΠ΅Π½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π°Π±ΠΎΡ€ символов, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ числа ΠΈ Π±ΡƒΠΊΠ²Ρ‹. JavaScript чувствитСлСн ΠΊ рСгистру, поэтому ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠΈ ΠΊ элСмСнту <select> ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΡΠΎΠ±Π»ΡŽΠ΄Π°ΠΉΡ‚Π΅ Ρ‚Ρƒ ΠΆΠ΅ Ρ„ΠΎΡ€ΠΌΡƒ написания, Ρ‡Ρ‚ΠΎ ΠΈ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ name.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

НСт.

required

УстанавливаСт список ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° сСрвСр. Если ΠΏΡƒΠ½ΠΊΡ‚ списка Π½Π΅ Π²Ρ‹Π±Ρ€Π°Π½, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π²Π΅Π΄Π΅Ρ‚ сообщСниС, Π° Ρ„ΠΎΡ€ΠΌΠ° ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. Π’ΠΈΠ΄ ΠΈ содСрТаниС сообщСния зависит ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚.

Бинтаксис

<select required>
  ...
</select>

ЗначСния

НСт.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ required Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½.

size

УстанавливаСт высоту списка. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° size Ρ€Π°Π²Π½ΠΎ 1, Ρ‚ΠΎ список прСвращаСтся Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ. ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°

multiple ΠΊ элСмСнту <select> ΠΏΡ€ΠΈ size="1" список отобраТаСтся ΠΊΠ°ΠΊ Β«ΠΊΡ€ΡƒΡ‚ΠΈΠ»ΠΊΠ°Β». Π’ΠΎ всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… случаях получаСтся список с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ мноТСствСнным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ.

Бинтаксис

<select size="<число>">
  ...
</select>

ЗначСния

Π›ΡŽΠ±ΠΎΠ΅ Ρ†Π΅Π»ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ число.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Зависит ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° multiple. Если ΠΎΠ½ присутствуСт, Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ списка Ρ€Π°Π²Π΅Π½ количСству элСмСнтов. Когда Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° multiple

Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° size Ρ€Π°Π²Π½ΠΎ 1.

ЗначСния ARIA role

  • <select> (Π±Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° multiple ΠΈ Π±Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° size со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ большС 1) β€” role=combobox
  • <select> (с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ multiple ΠΈΠ»ΠΈ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ size со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ большС 1) β€” role=listbox

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ

ОписаниС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SELECT</title>
  </head>
  <body>
    <form action="select1.php" method="post">
      <p>
        <select size="3" multiple name="hero[]">
          <option disabled>Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ гСроя</option>
          <option value="Π§Π΅Π±ΡƒΡ€Π°ΡˆΠΊΠ°">Π§Π΅Π±ΡƒΡ€Π°ΡˆΠΊΠ°</option>
          <option selected value="ΠšΡ€ΠΎΠΊΠΎΠ΄ΠΈΠ» Π“Π΅Π½Π°">
            ΠšΡ€ΠΎΠΊΠΎΠ΄ΠΈΠ» Π“Π΅Π½Π°
          </option>
          <option value="Шапокляк">Шапокляк</option>
          <option value="ΠšΡ€Ρ‹ΡΠ° Лариса">ΠšΡ€Ρ‹ΡΠ° Лариса</option>
        </select>
      </p>
      <p><input type="submit" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ" /></p>
    </form>
  </body>
</html>

Бсылки

Π’Π΅Π³ | HTML справочник

HTML Ρ‚Π΅Π³ΠΈ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

Π’Π΅Π³ <select> прСдставляСт собой элСмСнт управлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ (Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ) список. Π’Π΅Π³ <option> опрСдСляСт ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка (ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для Π²Ρ‹Π±ΠΎΡ€Π°), ΠΎΠ½ примСняСтся ΠΊΠ°ΠΊ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ элСмСнт Ρ‚Π΅Π³Π° <select>.


ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Π² спискС, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, отобраТаСтся ΠΊΠ°ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ, Π½ΠΎ Π²Ρ‹ смоТСтС Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ этому элСмСнту Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ selected (HTML Ρ‚Π΅Π³Π° <option>), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.


Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ элСмСнт <optgroup> Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ связанныС Π΄Π°Π½Π½Ρ‹Π΅ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Атрибуты

ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
autofocusautofocusΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π΄ΠΎΠ»ΠΆΠ΅Π½ автоматичСски ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ фокус ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы.
disableddisabledЛогичСский Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½.
formform_idΠ—Π°Π΄Π°Π΅Ρ‚ ΠΎΠ΄Π½Ρƒ, ΠΈΠ»ΠΈ нСсколько Ρ„ΠΎΡ€ΠΌ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ элСмСнт ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚.
multiplemultipleЛогичСский Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½ΠΎ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² сразу (Ρ‡Π΅Ρ€Π΅Π· Ctrl Π² Windows ΠΈ Ρ‡Π΅Ρ€Π΅Π· Command Π² Mac).
namenameΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ имя для Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка.
requiredrequiredΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹.
sizenumberΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ число Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ спискС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования элСмСнта <select></title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg" selected>Calvin Cordozar Broadus, Jr.</option>
		</select>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Ρ‚Π΅Π³ΠΎΠΌ <select> создали Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список, Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ ΠΌΡ‹ помСстили Ρ‚Ρ€ΠΈ элСмСнта <option>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π΅Π³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹. Атрибутом selected ΡƒΠΊΠ°Π·Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ (Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Π½ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ вмСсто ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ).

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ value (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅) Ρ‚Π΅Π³Π° <option>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ отправляСтся Π½Π° сСрвСр для дальнСйшСй ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ это выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

HTML Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список.

Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ с использованиСм Ρ‚Π΅Π³Π° <optgroup> сгруппируСм логичСски Π΄Π²Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ Π² нашСм Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС.

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования HTML Ρ‚Π΅Π³Π° <optgroup></title>
	</head>
	<body>
		<select  name = "black&white">
			<optgroup label = "Blacklist"> <!--Π“Ρ€ΡƒΠΏΠΏΠ° β„–1 -->
				<option value = "2PAC"> Tupac Amaru Shakur </option>
				<option value = "50cent"> Curtis Jackson </option>
				<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr. </option>
			</optgroup>
			<optgroup label = "Whitelist"> <!--Π“Ρ€ΡƒΠΏΠΏΠ° β„–2 -->
				<option value = "Eminem">Marshall Bruce Mathers III</option>
			</optgroup>
		</select>
	</body>
</html>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΠ»ΠΈ 2 Π³Ρ€ΡƒΠΏΠΏΡ‹ Ρ‚Π΅Π³ΠΎΠΌ <optgroup>. Атрибут label элСмСнта Π·Π°Π΄Π°Π΅Ρ‚ Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ΠΌ:

Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС HTML.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ HTML 4.01 ΠΎΡ‚ HTML 5

Π’ HTML 5 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ 3 Π½ΠΎΠ²Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

НСт.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Β«Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹Β».

Атрибуты событий

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Β«Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий».

HTML Ρ‚Π΅Π³ΠΈ

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° списка (Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список) с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ?

Π’ настоящСС врСмя я Π±ΠΎΡ€ΡŽΡΡŒ с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈ, ΠΈ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ своим ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ:

Π•ΡΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ ситуации, ΠΊΠΎΠ³Π΄Π° <select> нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΡ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка.

НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΎΡ‡Π½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ Π²Π²ΠΎΠ΄Π°, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Кнопки с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈ списками (см. Http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). К соТалСнию <select>, Π½Π΅ поддСрТиваСтся Π² Π³Ρ€ΡƒΠΏΠΏΠ°Ρ… Π²Π²ΠΎΠ΄Π°, ΠΎΠ½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Или ΠΊΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΡƒΠΆΠ΅ Ρ€Π΅ΡˆΠΈΠ» это? Π― Π±Ρ‹Π» Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ заинтСрСсован Π² Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ.

И Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ слоТным, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΊ просто $(this).text()ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π±Ρ€Π°Π½ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π³Π»ΠΈΠΊΠΎΠ½Ρ‹ ΠΈΠ»ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² качСствС содСрТимого для Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка. НапримСр: <li><a href="#0"><i></i></a></li> ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² этом случаС Π½Π΅Ρ‚ тСкста, ΠΈ Ссли Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ Π΅Π³ΠΎ, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ элСмСнтС, ΠΈ это Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

Π― нашСл Π΄Π²Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

1) Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅, $(this).html()Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ содСрТимоС Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ <li>элСмСнта, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, Π½ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого, <a href="#0"><i></i></a>поэтому Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с этим, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

2) ИспользованиС $(this).text()ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ тСкст элСмСнта Π² скрытом ΠΏΡ€ΠΎΠ»Π΅Ρ‚Π΅: <li><a href="#0"><i><span>text</span></i></a></li>. Для мСня это простоС ΠΈ элСгантноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ любой тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, тСкст Π±ΡƒΠ΄Π΅Ρ‚ скрыт, ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ прСобразования $(this).html()Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°, ΠΊΠ°ΠΊ Π² Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ 1), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

НадСюсь, это понятно ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠΎΠΌΡƒ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΠΎΠΌΠΎΡ‡ΡŒ πŸ™‚

JavaScript ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Ρ‹ для Π²Ρ‹Π±ΠΎΡ€Π° ΠΎΠΏΡ†ΠΈΠΉ

ΠžΠ±Π·ΠΎΡ€

Webix ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ нСсколько ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΠΈ ΠΈΠ· списка: Select, RichSelect, Combo, Multicombo, Multiselect, Checkbox, Radio ΠΈ Suggest List. Π‘ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΈΠ· Π½ΠΈΡ… ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡ… Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ.

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ» Select β€” самый простой ΠΈΠ· этой Π³Ρ€ΡƒΠΏΠΏΡ‹ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ². Он позволяСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΎΠΏΡ†ΠΈΡŽ ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π±ΠΎΠ»Π΅Π΅ слоТный Π²ΠΈΠ΄ΠΆΠ΅Ρ‚, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Multicombo, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ нСсколько ΠΎΠΏΡ†ΠΈΠΉ ΠΈΠ· списка. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ тСкст Π² ΠΏΠΎΠ»Π΅ Π½Π°Π΄ списком.

Checkbox

Checkbox β€” это ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ с двумя состояниями β€” Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько чСкбоксов для Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΎΠΏΡ†ΠΈΠΉ ΠΈΠ· списка. Webix Checkbox Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ HTML чСкбокс.

Switch

Switch β€” это Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ Π°Π½Π°Π»ΠΎΠ³ чСкбокса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ состояний Π² настройках. На Switch ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ярлык для отобраТСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ β€˜Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎβ€™ ΠΈ β€˜Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎβ€™.

Radio

Radio β€” это ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΎΠΏΡ†ΠΈΡŽ ΠΈΠ· ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π°. Webix Radio Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ HTML ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ» radio.

Suggest List

Suggest List β€” это ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡ‹. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ, Π½Π° экранС появляСтся список подсказок. Бписок подсказок формируСтся Π² зависимости ΠΎΡ‚ Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… символов. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ этот ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ» со стандартным HTML ΠΏΠΎΠ»Π΅ΠΌ Π²Π²ΠΎΠ΄Π°, ΠΏΠΎΠ»Π΅ΠΌ Π²Π²ΠΎΠ΄Π° Webix Text, ΠΈΠ»ΠΈ тСкстовым Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ Π² Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π΅ для Π΄Π°Π½Π½Ρ‹Ρ…. Webix Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° Suggest List.

MentionSuggest

MentionSuggest β€” это Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список с опциями для тСкстовых ΠΏΠΎΠ»Π΅ΠΉ. MentionSuggest открываСтся послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Π²Π΅Π΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ символ. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Π²Π΅Π΄Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΎΠ΄ΠΈΠ½ символ, список Π½Π°Ρ‡Π½Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΠΈ для подстановки Π½Π° основС Π²Π²ΠΎΠ΄Π°.

MultiSuggest

MultiSuggest β€” это ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ вСрсия ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° Suggest List. Π’ΠΈΠ΄ΠΆΠ΅Ρ‚ состоит ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка ΠΎΠΏΡ†ΠΈΠΉ ΠΈ позволяСт Π²Ρ‹Π±ΠΎΡ€ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΎΠΏΡ†ΠΈΠΉ. Π’Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ. Кнопка Π² ΠΊΠΎΠ½Ρ†Π΅ списка позволяСт ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ список.

CheckSuggest

CheckSuggest β€” это ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ вСрсия ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° Suggest List, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ нСсколько ΠΎΠΏΡ†ΠΈΠΉ. Напротив ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ Π² спискС β€” чСкбокс, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ для Π²Ρ‹Π±ΠΎΡ€Π°.

GridSuggest

GridSuggest β€” это ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ вСрсия ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° Suggest List. ВмСсто Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка с опциями β€” Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠΌ DataTable, Π»Π΅Π³ΠΊΠΎ настраиваСмым ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… с сортировкой ΠΈ полосой ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

DataSuggest

DataSuggest β€” это ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ вСрсия ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° Suggest List. ВмСсто Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка ΠΎΠΏΡ†ΠΈΠΉ β€” ΠΎΠΊΠ½ΠΎ с Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠΌ DataView, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΠΏΡ†ΠΈΠΉ с изобраТСниями.

DateRangeSuggest

DateRangeSuggest β€” это ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ вСрсия ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° Suggest List. ВмСсто Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка β€” Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΎΠΌ DateRangePicker для Π²Ρ‹Π±ΠΎΡ€Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π΄Π°Ρ‚.

Select

Select β€” это ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ стандартный HTML ΠΈ Ρ€Π°Π±ΠΎΡ‚Π° с Π½ΠΈΠΌ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ усилий.

RichSelect

RichSelect β€” это Π½Π΅Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ тСкстовоС ΠΏΠΎΠ»Π΅ с Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ содСрТит список ΠΎΠΏΡ†ΠΈΠΉ. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅Π΅ ΠΎΠΊΠ½ΠΎ появляСтся послС ΠΊΠ»ΠΈΠΊΠ° Π½Π° ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ RichSelect Π½Π° свой вкус. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ шаблон для ΠΎΠΏΡ†ΠΈΠΉ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ списка, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ способ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΠΏΡ†ΠΈΠΉ, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ списка, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠΊΠ½Ρƒ ΠΈ списку ΠΎΠΏΡ†ΠΈΠΉ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π½ΠΈΠΌΠΈ.

Combo

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ» Combo β€” это Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ тСкстовоС ΠΏΠΎΠ»Π΅ со Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ списком ΠΎΠΏΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появляСтся послС ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ полю. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС тСкстового поля. Бписок ΠΎΠΏΡ†ΠΈΠΉ сокращаСтся Π² зависимости ΠΎΡ‚ Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… символов. Combo прСдоставляСт мноТСство настроСк для измСнСния Π²ΠΈΠ΄Π° списка ΠΎΠΏΡ†ΠΈΠΉ.

Multicombo β€” это ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сочСтаСтся со Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ списком CheckSuggest. Напротив ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ ΠΈΠ· списка Π΅ΡΡ‚ΡŒ checkbox, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ сразу нСсколько ΠΎΠΏΡ†ΠΈΠΉ. Бписок появляСтся ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° тСкстовом ΠΏΠΎΠ»Π΅. Пока ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ вводят символы, список ΠΎΠΏΡ†ΠΈΠΉ соотвСтствСнно сокращаСтся. Π’Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· списка, Π½Π°ΠΆΠ°Π² Π½Π° β€˜ΠΊΡ€Π΅ΡΡ‚ΠΈΠΊβ€™. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²ΠΈΠ΄ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ… количСство.

Multiselect β€” это Π½Π΅Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΠΈ ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ список ΠΎΠΏΡ†ΠΈΠΉ, ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ тСкстовому полю. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Multiselect ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ список ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π° CheckSuggest, поэтому Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ Π΅ΡΡ‚ΡŒ чСкбокс. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΈΠ΄ списка ΠΎΠΏΡ†ΠΈΠΉ.

Html Ρ„ΠΎΡ€ΠΌΡ‹ для сайта β€” Ρ‚Π΅Π³ΠΈ Form, Input ΠΈ Select, Option, Textarea, Label ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ для создания элСмСнтов Π²Π΅Π±Ρ„ΠΎΡ€ΠΌ

Главная / Как устроСны сайты / Html Π·Π° 10 ΡƒΡ€ΠΎΠΊΠΎΠ²

23 января 2021

  1. Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΈ ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° соврСмСнных сайтах
  2. Π’Π΅Π³ Input
  3. Input с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ значСниями для Type
  4. Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ тэга Input ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈΡ… использования
  5. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки, тСкстовыС области ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹
  6. Select ΠΈ Option β€” тэги Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… списков
  7. Атрибуты Ρ‚Π΅Π³Π° Option
  8. Textarea β€” созданиС тСкстового поля Π² Ρ„ΠΎΡ€ΠΌΠ΅
  9. Label β€” для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ΅Π½ этот Html тэг Π² Ρ„ΠΎΡ€ΠΌΠ΅
  10. Fieldset ΠΈ Legend β€” Ρ€Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° части

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ вас, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo. ru. БСгодня я Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Ρ‚Π°ΠΊΠΎΠΉ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ вСрстки любого сайта, ΠΊΠ°ΠΊ HTML Ρ„ΠΎΡ€ΠΌΡ‹. Какой Π±Ρ‹ Π½Π΅ Π±Ρ‹Π» Π΄Π²ΠΈΠΆΠΎΠΊ вашСго сайта (cms), Π½Π° Π½Π΅ΠΌ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Π² Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ„ΠΎΡ€ΠΌΡ‹, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² Form ΠΈ Input, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ну, ΠΈ Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ этому элСмСнты для создания Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… списков ΠΈ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ β€” Select, Option, Textarea, Label, Fieldset, Legend.

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΈ ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° соврСмСнных сайтах

Π’Π° ΠΆΠ΅ строка поиска ΠΏΠΎ сайту (здСсь описан поиск ΠΎΡ‚ яндСкса) создаСтся с использованиСм этих тэгов, Π° поиск Ρ‚ΠΎ Π½Π° вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ устроСны ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Π²Π°ΠΌ совсСм Π½Π΅ ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚ для ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π΄Π° ΠΈ ΠΏΡ€ΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ раскруткС ΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ лишним.

Π’Π°ΠΊ, с обоснованиСм нСобходимости изучСния этих элСмСнтов, Π΄ΡƒΠΌΠ°ΡŽ, вопросов большС Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ, поэтому самоС врСмя ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ нСпосрСдствСнно ΠΊ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ ΠΈΡ… Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².

Π”Π°, Ρ…ΠΎΡ‡Ρƒ Π΅Ρ‰Π΅ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΡƒΠΆΠ΅ успСли Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Π½Π° Ρ‚Π΅ΠΌΡƒ языка гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΠ·Π½Π°Π»ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ формирования Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² Html, Ρ‚Ρ€Π΅Ρ… Π²ΠΈΠ΄ΠΎΠ² списков Π½Π° Ρ‚Π΅Π³Π°Ρ… ul, ol, li, dl) ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ создания Ρ‚Π°Π±Π»ΠΈΡ† Π½Π° Ρ‚Π΅Π³Π°Ρ… Tr, Th, Td, Table.

По своСй сути Ρ„ΠΎΡ€ΠΌΡ‹ состоят ΠΈΠ· элСмСнтов, для создания ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Π½ΡƒΡ‚Ρ€ΠΈ основного ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΠ· Ρ‚Π΅Π³ΠΎΠ² Form Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ тэги β€” Checked, Value, Checkbox, Radio, Checkbox, Submit ΠΈ Π΄Ρ€. Нам лишь Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π΅ ΠΊΠΎΠ΄ Π² любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ для этого мСстС шаблона сайта, ΡƒΠΊΠ°Π·Π°Π² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² ΠΈ ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠ°ΠΊ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ тСкстовоС ΠΏΠΎΠ»Π΅ с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π²Π²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ запроса, Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π²Ρ‹Π±ΠΎΡ€Π° с Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ (ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ ΠΈΠ· прСдоставляСмых ΠΊΠ½ΠΎΠΏΠΎΠΊ), нСсколько тСкстовых ΠΏΠΎΠ»Π΅ΠΉ с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ (обратная связь описанная Ρ‚ΡƒΡ‚) ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

НапримСр, Π² случаС «поиска», с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Value ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ написано Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ располоТСнной рядом с ΠΏΠΎΠ»Π΅ΠΌ для Π²Π²ΠΎΠ΄Π° запроса. Π”Π°Π½Π½Ρ‹Π΅ Π²Π²ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ… Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² дальнСйшСм ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹.

НапримСр, Π² случаС ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, послС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ ΠΏΠΎΠ»Π΅ со своим ΠΈΠΌΠ΅Π½Π΅ΠΌ, Π²Π²Π΅Π΄Π΅Ρ‚ свой E-mail ΠΈ тСкст сообщСния, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠ΅Ρ‚ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ, Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΏΡ€Π°Π²Π΅ Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ Π½Π° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° E-mail Π°Π²Ρ‚ΠΎΡ€Π° сайта. Но Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ языка гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ (здСсь Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Html, Ρ‚Π΅Π³ΠΈ ΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€ W3C), ΠΊ соТалСнию, Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

Для этих Ρ†Π΅Π»Π΅ΠΉ потрСбуСтся ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, которая послС наТатия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π²ΠΎΠ·ΡŒΠΌΠ΅Ρ‚ всС Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΏΠΎΠ»Π΅ΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ ΠΈΡ… Π½Π° E-mail Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρƒ рСсурса. Какая ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π±ΡƒΠ΄Π΅Ρ‚ это Π΄Π΅Π»Π°Ρ‚ΡŒ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ сами с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Action.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ прСдставляСт ΠΈΠ· сСбя скрипт, написанный Π½Π° языкС PHP. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ Action тэга Form Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ этого скрипта, Π»Π΅ΠΆΠ°Ρ‰Π΅Π³ΠΎ Π½Π° сСрвСрС вашСго хостинга. ΠŸΡ€ΠΈΠ²Π΅Π΄Ρƒ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° подписку Π½Π° RSS Π»Π΅Π½Ρ‚Ρƒ ΠΌΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π° посрСдством E-mail:

НСмного нСпонятно, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, каТСтся ΠΏΠΎ Π½Π°Ρ‡Π°Π»Ρƒ, Π½ΠΎ, Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ всС прояснится ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ дальнСйшСго рассказа.

Π’Π΅Π³ΠΈ Form ΠΈ Input для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ, чСкбоксов ΠΈ Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ

Π›ΡŽΠ±Π°Ρ Ρ„ΠΎΡ€ΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Π° Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ тэги Form. Π­Ρ‚ΠΎ своСобразный ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для ΠΈΡ… создания. Π£ этого Ρ‚Π΅Π³Π° имССтся ряд ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²:

  1. Name – ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ, Ссли Π² Html Ρ„Π°ΠΉΠ»Π΅, Π³Π΄Π΅ Π²Ρ‹ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚Π΅, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нСсколько Π²Π΅Π±Ρ„ΠΎΡ€ΠΌ
  2. Action – ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ скрипту, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Ρ‹ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· Π½Π΅Π΅ для дальнСйшСй ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
  3. Method – с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· этой Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ скрипту Ρ„Π°ΠΉΠ»Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Если Π²Ρ‹ Π΅Π³ΠΎ Π½Π΅ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅, Ρ‚ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ Get, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, собствСнно говоря, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Π² основном для ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… сообщСний, ΠΈ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ способом пСрСдавая Π΄Π°Π½Π½Ρ‹Π΅ Ρ‡Π΅Ρ€Π΅Π· Π°Π΄Ρ€Π΅ΡΠ½ΡƒΡŽ строку Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ скрипту ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° всС ΠΆΠ΅ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ POST, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ тСкстовых сообщСний Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ способом

Рассмотрим ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ тэги, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹. Π‘Π°ΠΌΡ‹ΠΉ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ – это Input. Π’Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Type, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ· сСбя ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ HTML Ρ„ΠΎΡ€ΠΌΠ°, созданная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого тэга.

C ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Input ΠΈ Type ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты:

  1. однострочныС тСкстовыС поля (Type=Β»TextΒ»)
  2. поля для Π²Π²ΠΎΠ΄Π° пароля (Type=Β»PasswordΒ»)
  3. чСкбоксы (Type=Β»CheckboxΒ»)
  4. Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ (Type=Β»RadioΒ»)
  5. скрытыС поля (Type=Β»HiddenΒ»)
  6. ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Type=Β»ButtonΒ»)
  7. ΠΊΠ½ΠΎΠΏΠΊΠΈ для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ (Type=Β»SubmitΒ»)
  8. ΠΊΠ½ΠΎΠΏΠΊΠΈ для привСдСния Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊ исходному ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ (Type=Β»ResetΒ»)
  9. поля для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² Π½Π° сСрвСр (Type=Β»File)
  10. ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ (Type=Β»ImageΒ»)

Input Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π΅Π³Π°. Π§Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ· сСбя Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ°, созданная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ, Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ зависит ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ Type. Если Type Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½, Ρ‚ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ создано тСкстовоС ΠΏΠΎΠ»Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ„ΠΎΡ€ΠΌ, созданных Π½Π° Input с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ значСниями для Type

Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ тэга Input ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈΡ… использования

Рассмотрим, для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Ρ‹ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹:

  1. Name – Π² случаС, Ссли Π΄Π°Π½Π½Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π² скрипт ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Name. Под этим ΠΈΠΌΠ΅Π½Π΅ΠΌ Π΄Π°Π½Π½Ρ‹Π΅, ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ ΠΈΠ· Ρ„ΠΎΡ€ΠΌΡ‹, Π±ΡƒΠ΄ΡƒΡ‚ Ρ„ΠΈΠ³ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.
  2. Size β€” с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ задаСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ поля создаваСмой Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ указываСтся Π² количСствС символов, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ смоТСт ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΠΎΠ»Π΅. Если Size Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½, Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ принята ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½ΠΎΠΉ 24 символам
  3. Maxlength β€” ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ количСство символов, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ввСсти Π² Html Ρ„ΠΎΡ€ΠΌΡƒ, Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΎ, Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Maxlength ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ это ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅. Π‘ΠΎΠ»ΡŒΡˆΠ΅ символов, Ρ‡Π΅ΠΌ Π² Π½Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Π²Π°ΠΌ ввСсти Π² ΠΏΠΎΠ»Π΅ Π½Π΅ удастся
  4. Value β€” с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ написано ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² ΠΏΠΎΠ»Π΅ ΠΈΠ»ΠΈ ΠΆΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…
  5. Checked β€” это Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚-Ρ„Π»Π°Π³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Input для Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ (radio) ΠΈΠ»ΠΈ ΠΆΠ΅ для чСкбоксов (checkbox). Π’ этом случаС данная Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ»ΠΈ чСкбокс Π±ΡƒΠ΄ΡƒΡ‚ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы с Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠΎΠΉ (Π² Π½ΠΈΡ… ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‚ΠΎΡΡ‚ΡŒ Π³Π°Π»ΠΎΡ‡ΠΊΠ°)

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим всС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹ с Input. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ тСкстового поля ΠΏΠΎΡ…ΠΎΠΆ Π½Π° Π²ΠΈΠ΄ поля для Π²Π²ΠΎΠ΄Π° пароля, поэтому рассмотрим Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ создания Text, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Π²Π²ΠΎΠ΄Π° адрСса элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим созданиС Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ с Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ (Radio):

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² этой Ρ„ΠΎΡ€ΠΌΠ΅ Π΄Π²Π° Ρ€Π°Π·Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ Input – ΠΏΠΎ Ρ€Π°Π·Ρƒ для создания ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π΄Π²ΡƒΡ… Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ, Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· Π½ΠΈΡ… прописан Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Name с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ (rezultat), Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Value Ρ€Π°Π·Π½ΠΎΠ΅ (YES ΠΈ NO).

Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π΅Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Π² случаС Π²Ρ‹Π±ΠΎΡ€Π° любого ΠΈΠ· ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΉ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π° пСрСмСнная, Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ прописано Π² Name, Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этой ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Π±Ρ‹Π» Π²Ρ‹Π±Ρ€Π°Π½.

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ созданиС Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ с чСкбоксами (Checkbox):

ЧСкбоксы ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ сразу нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Name слуТит для опрСдСлСния Π² Ρ„Π°ΠΉΠ»Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ чСкбоксС проставлСны Ρ„Π»Π°ΠΆΠΊΠΈ,Π° Value β€” Π·Π°Π΄Π°Π΅Ρ‚ Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ отослано Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ (Ссли Value Π·Π°Π΄Π°Π½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, Ρ‚ΠΎ Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½ тСкст, располоТСнный рядом с Π΄Π°Π½Π½Ρ‹ΠΌ чСкбоксом).

Select, Option, Textarea, Label, Fieldset, Legend β€” Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки, тСкстовыС области ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π²Π΅Π±Ρ„ΠΎΡ€ΠΌ

Для Π½Π°Ρ‡Π°Π»Π° Ρ…ΠΎΡ‡Ρƒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅, собствСнно, Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹ Π½Π° страницах сайта. Они Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΏΡ€ΠΈΠ·Π²Π°Π½Ρ‹ Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ΡΡ Π² любой ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС элСмСнты: ΠΊΠ½ΠΎΠΏΠΊΠΈ, поля для Π²Π²ΠΎΠ΄Π° тСкста, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки, Ρ„Π»Π°ΠΆΠΊΠΈ, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ.

ВсС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ объяснСний ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этих элСмСнтов ΠΈ Ссли ΠΎΠ½ΠΈ видят ΠΊΠ½ΠΎΠΏΠΊΡƒ Html Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π½Π° Π½Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ.

ΠŸΡ€ΠΈΡ‡Π΅ΠΌ, всС ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π΅Π΅ элСмСнты (Π²Ρ€ΠΎΠ΄Π΅ Select, Option, Textarea, Label, Fieldset, Legend) ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΡƒΠΆΠ΅ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹Π΅ Π·Π°Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ (ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹), для вставки ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… достаточно Π±ΡƒΠ΄Π΅Ρ‚ лишь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ‚Π΅Π³ с Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ сами Π·Π½Π°ΡŽΡ‚, ΠΊΠ°ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ элСмСнт Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹. ΠŸΡ€Π°Π²Π΄Π°, Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ отобраТСния ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Π΅Π΅ элСмСнта Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°, Π½ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅ сущСствСнно.

Π’.ΠΎ. получаСтся, Ρ‡Ρ‚ΠΎ Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ Π² Html ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΎΠΉ пСрСнСсти ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ элСмСнты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² любой ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС, Π½Π° страницы вСбсайта. Но для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π½Π° страницах сайта?

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, для Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅, для Ρ‡Π΅Π³ΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСмах β€” ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π’ случаС Ρ„ΠΎΡ€ΠΌ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Π½Π° сСрвСр, Π³Π΄Π΅ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ (язык гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΊ соТалСнию, Π½Π΅ позволяСт вСсти ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ…).

Π₯отя, Π΄Π°Π½Π½Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° сСрвСр, Π½ΠΎ ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅ Π½Π° адрСс, Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ Action тэга Form. ΠŸΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ ΠΈΠ· Html Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° E-mail Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π³ΠΎ поля, послС наТатия ΠΈΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, запустится почтовая ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ Π½Π° Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ Form Π² Ρ‚Π°ΠΊΠΎΠΌ случаС Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

<form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain">

Select ΠΈ Option β€” тэги Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… списков

ВсС элСмСнты Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ поля с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈ списками, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π‘Π½Π°Ρ‡Π°Π»Π° задаСтся ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ поля со списком с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Html Ρ‚Π΅Π³Π° Select. А Π·Π°Ρ‚Π΅ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ этого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ с ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ (элСмСнтами) этого списка. Π­Ρ‚ΠΎ дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… тэгов Option.

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

Но это упрощСнная конструкция, Ρ‚.ΠΊ. Ρƒ Select ΠΈ Option имССтся ряд Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ свойства ΠΈ внСшний Π²ΠΈΠ΄ создаваСмого поля с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ списком.

  1. Name β€” Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя для Π΄Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹, создаваСмого с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Select. Π­Ρ‚ΠΎ имя Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ΠΎ Π½Π° сСрвСр Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄Π°Π½Π½Ρ‹Ρ… Π² качСствС ΠΈΠΌΠ΅Π½ΠΈ для ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ. Π’ качСствС значСния этой ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Value (задаСтся Π² Option для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°) Ρ‚ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ.
  2. Size β€” с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ количСство ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². Π˜Π½Π°Ρ‡Π΅ говоря, с ΠΏΠΎΠΌΠΎΡ‰ΡŒ Size ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ высоту списка, ΠΈΠ·ΠΌΠ΅Ρ€ΡΠ΅ΠΌΡƒΡŽ Π² количСствС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… строк. Если Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π² явном Π²ΠΈΠ΄Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Size Π² Ρ‚Π΅Π³Π΅ Select, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ высоты Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΏΡ€ΠΈ этом ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π½ΠΎΠΉ Π² случаС отсутствия ΠΈΠ»ΠΈ присутствия Π² Select Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Multiple:
    1. Если Multiple Π² Select присутствуСт, Ρ‚ΠΎ высота Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π² Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½Π° количСству Π΅Π³ΠΎ элСмСнтов. Π’.Π΅. Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ всС элСмСнты Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка с мноТСствСнным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ. Π‘ΠΌ. ΠΏΡ€ΠΈΠΌΠ΅Ρ€ мноТСствСнного Π½ΠΈΠΆΠ΅. Если Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Size Π² Select Π·Π°Π΄Π°Ρ‚ΡŒ мСньшС количСства ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Ρ‚ΠΎ справа появится полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.
    2. Если Multiple Π² Select отсутствуСт, Ρ‚ΠΎ высота Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π² Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС. Π’.Π΅. Π²ΠΈΠ΄Π½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° строка, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ доступны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π»ΠΈΡ„Ρ‚Π° (справа). Π‘ΠΌ. ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅
  3. Multiple β€” приписываниС Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π² Ρ‚Π΅Π³Π΅ Select ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Π½ΠΈΠΆΠ΅.

Π€ΠΎΡ€ΠΌΡ‹ с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈ списками ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ Π²Ρ‹ смоТСтС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ элСмСнт (строку) поля с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ списком, Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ β€” удСрТивая Ctrl ΠΈΠ»ΠΈ Shift смоТСтС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ нСсколько ΠΈΠ· ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².

ΠŸΡ€ΠΈ этом Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π½Π° сСрвСр Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ всСх Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ…. Какой ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π±ΡƒΠ΄Π΅Ρ‚ создан, опрСдСляСтся Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ отсутствиСм Π² тэгС Select Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Multiple.

Multiple указываСтся Π² Select Π±Π΅Π· ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°, Ρ‚.ΠΊ. ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ просто Multiple ΠΈ всС. Если ΠΎΠ½ присутствуСт, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ создана Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ мноТСствСнного Π²Ρ‹Π±ΠΎΡ€Π° (удСрТивая Ctrl ΠΈΠ»ΠΈ Shift).

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ поля с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ списком, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ мноТСствСнный Π²Ρ‹Π±ΠΎΡ€, Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Π‘ΠΏΡ€Π°Π²Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка со мноТСствСнным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создан Π½Π° основС ΠΊΠΎΠ΄Π°, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²Ρ‹ΡˆΠ΅. Как Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, удСрТивая Ctrl ΠΈΠ»ΠΈ Shift ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ нСсколько ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

Если Π² тэгС Select Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Multiple Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, Ρ‚ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ элСмСнт этого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка (строку).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡƒΠ½ΠΊΡ‚, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ здСсь:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Атрибуты Ρ‚Π΅Π³Π° Option

  1. SelectED β€” ΠΎΠ½ опрСдСляСт, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½. Π’.Π΅. Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ с ΠΎΠ΄Π½ΠΈΠΌ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ. Π’ случаС ΠΆΠ΅ списка с мноТСствСнным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ (Ссли Π² Select присутствуСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Multiple) ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ указания SelectED Π² Html Ρ‚Π΅Π³Π΅ Option Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ сразу нСсколько ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².
  2. Value β€” Π½Π° сСрвСр ΠΈΠ· Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ поля Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π° ΠΏΠ°Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ β€” имя для ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этой ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ. Π’Π°ΠΊ Π²ΠΎΡ‚, имя для ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ бСрСтся ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Name тэга Select, Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этой ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ взято ΠΈΠ· Value Ρ‚Π΅Π³Π° Option, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° (ΠΈΠ»ΠΈ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Π² случаС мноТСствСнного Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π±Ρ€Π°Π» ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ….
    SelectLabelSelectEDKtoNaNovenkogo.ruLegend

Π’ создаваСмый Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Select ΠΈ Option) ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΉ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π³Ρ€ΡƒΠΏΠΏ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню ΠΏΠΎ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π°.

Для создания Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈΠ· ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Optgroup, Π° Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ тэгС Optgroup ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Label, Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ввСсти ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π³Ρ€ΡƒΠΏΠΏΡ‹.

НапримСр Ρ‚Π°ΠΊ:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Textarea β€” созданиС тСкстового поля Π² Ρ„ΠΎΡ€ΠΌΠ΅

ΠžΡΡ‚Π°Π»ΡΡ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт Π²Π΅Π±Ρ„ΠΎΡ€ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π½Π΅ рассмотрСли β€” Textarea (ΠΏΠΎΠ»Π΅ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π²Π²ΠΎΠ΄Π° многострочного тСкста). БоздаСтся ΠΎΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π½ΠΎΠ³ΠΎ Html Ρ‚Π΅Π³Π° Textarea. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ, Π² Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ тСкст Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку ΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° сСрвСр с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ сдСланных пСрСносов.

Π˜Ρ‚Π°ΠΊ, для создания многострочного тСкстового поля Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Textarea, Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π΅Π½ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы с Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠΎΠΉ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠΎΡ‚ΠΎΠΌ смоТСт ΡΡ‚Π΅Ρ€Π΅Ρ‚ΡŒ этот тСкст ΠΈ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свой.

<form>
<textarea rows=Β»3β€³ cols=Β»15β€³ name=Β»texttΒ»>Π§Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΎ сСбС?</textarea>
</form>

Π§Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΎ сСбС?

ВмСстС с Textarea ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹:

  1. Name β€” Π²Ρ‹ Π·Π°Π΄Π°Π΅Ρ‚Π΅ имя для этого элСмСнта Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹. Оно Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ΠΎ Π½Π° сСрвСр Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…
  2. Cols β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ создаваСмого многострочного поля Π² символах.
  3. Rows β€” Π·Π°Π΄Π°Π΅ΠΌ высоту создаваСмого многострочного поля (Π² строках). Если строк Ρƒ тСкста, Π²Π²ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, окаТСтся большС, Ρ‡Π΅ΠΌ высота многострочного поля для тСкста, Ρ‚ΠΎ справа ΠΎΡ‚ поля Π² Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ΅ появится полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.
  4. Readonly β€” Π·Π°ΠΏΡ€Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ своСго тСкста Π² это ΠΏΠΎΠ»Π΅ (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для чтСния).
  5. Disabled β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ Π² случаС с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ Readonly, Π½Π΅ смоТСт ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ содСрТимоС тСкстового поля Π² Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ свой Ρ†Π²Π΅Ρ‚ Π½Π° сСрый, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‰ΠΈΠΉ Π΅Π³ΠΎ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.

Label β€” для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ΅Π½ этот Html тэг Π² Ρ„ΠΎΡ€ΠΌΠ΅

Html Ρ‚Π΅Π³ Label позволяСт Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΎΡ‡Π΅Π½ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠ½ΡƒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ…, которая имССтся Π² ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСмах. Π’Π°ΠΌ, Ссли Π²Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ элСмСнт, Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ Π½Π΅ΠΌΡƒ, ΠΌΠΎΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈ ΠΏΠΎ названию этого элСмСнта β€” всС Ρ€Π°Π²Π½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ Π΅Π³ΠΎ активация.

Π’ Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этого Π½Π΅ происходит β€” Π½ΡƒΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ самому элСмСнту Html Ρ„ΠΎΡ€ΠΌΡ‹ для Π΅Π³ΠΎ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ. НапримСр, Π½ΡƒΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ Ρ„Π»Π°ΠΆΠΊΡƒ, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Π½Π΅ΠΌ Π³Π°Π»ΠΎΡ‡ΠΊΡƒ. Π©Π΅Π»Ρ‡ΠΎΠΊ ΠΆΠ΅ ΠΏΠΎ тСксту рядом с Ρ„Π»Π°ΠΆΠΊΠΎΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° Π½Π΅ принСсСт. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами:

Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, ΠΏΠΎ тСксту Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ для Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ этого элСмСнта бСсполСзно β€” Π½ΡƒΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ Π½Π΅ΠΌΡƒ самому. Π’ΠΎΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Ρ‰Π΅ΠΉ ΠΈ ΠΏΡ€ΠΈΠ·Π²Π°Π½ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ тэг Label. Он ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСкст рядом с элСмСнтом Π²Π΅Π± Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ нСсомнСнно ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ.

Но ΠΊΠ°ΠΊ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ элСмСнт Html Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ тСкст? Для этого Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ID с ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ, Π° тСкст Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠΈΡ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ тэгами Label. И это Π΅Ρ‰Π΅ Π½Π΅ всС. Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ Ρ‚Π΅Π³Π΅ Label Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ For, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ID Π² Html Ρ‚Π΅Π³Π΅ элСмСнта Ρ„ΠΎΡ€ΠΌΡ‹. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, благодаря использованию Label, элСмСнты Π²Π΅Π±Ρ„ΠΎΡ€ΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΏΠΎ Π½Π΅ΠΌΡƒ самому, Π½ΠΎ ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΏΠΎ тСксту, располоТСнному рядом.

Fieldset ΠΈ Legend β€” Ρ€Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° части

Π’Ρ‹, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, часто Π²ΠΈΠ΄Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎ большиС Ρ„ΠΎΡ€ΠΌΡ‹ Π² Html Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ Π½Π° Π³Ρ€ΡƒΠΏΠΏΡ‹ (Fieldset), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π²Π΅Π΄Π΅Π½Ρ‹ Π² Ρ€Π°ΠΌΠΎΡ‡ΠΊΡƒ ΠΈ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚Π°ΠΊΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ имССтся свой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (Legend). РСализуСтся это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ всСго Π΄Π²ΡƒΡ… тэгов: Fieldset ΠΈ Legend. Они ΠΏΠ°Ρ€Π½Ρ‹Π΅, Ρ‚.Π΅. Ρƒ Π½ΠΈΡ… Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ порядкС ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ.

Π’Π°ΠΊ Π²ΠΎΡ‚, для создания Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈΠ· составных частСй Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ всС эти части Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ тэги Fieldset. А для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ для Π΄Π°Π½Π½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (Legend), Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ сразу ΠΆΠ΅ послС ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Fieldset ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ ΠΈΠ· ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Legend, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ тСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π³Ρ€ΡƒΠΏΠΏΡ‹.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания Π³Ρ€ΡƒΠΏΠΏ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Fieldset ΠΈ Legend:


Π£Π΄Π°Ρ‡ΠΈ Π²Π°ΠΌ! Π”ΠΎ скорых встрСч Π½Π° страницах Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ для Π·Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

HTML-списки

HTML-списки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ связанных ΠΌΠ΅ΠΆΠ΄Ρƒ собой Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. БущСствуСт Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π° списков:

  • ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список β€” <ul> β€” ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка <li> отмСчаСтся ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ,
  • Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список β€” <ol> β€” ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка <li> отмСчаСтся Ρ†ΠΈΡ„Ρ€ΠΎΠΉ,
  • список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ β€” <dl> β€” состоит ΠΈΠ· ΠΏΠ°Ρ€ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ <dt> β€” <dd> ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ список прСдставляСт собой ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ элСмСнты списка ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Ρ‹ Ρ‚Π΅Ρ€ΠΌΠΈΠ½-ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты, Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡŒ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΈ занимая всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ, располоТСнный сбоку, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ участвуСт Π² ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅.

БозданиС HTML-списков

1. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список прСдставляСт собой нСупорядочСнный список (ΠΎΡ‚ Π°Π½Π³Π». Unordered List). Боздаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <ul>. Π’ качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° элСмСнта списка выступаСт ΠΌΠ΅Ρ‚ΠΊΠ°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠΆΠΎΠΊ.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΡƒ списка:

ul {
   padding-left: 40px;
   margin-top: 1em;
   margin-bottom: 1em;
}

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <li> (ΠΎΡ‚ Π°Π½Π³Π». List Item).

Для элСмСнта <ul> доступны β€ŽΠ³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>
  • Microsoft
  • Google
  • Apple
  • IBM
Π€ΠΈΠ³ΡƒΡ€Π°. 1. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

2. НумСрованный список

НумСрованный список создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <ol>. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ списка Ρ‚Π°ΠΊΠΆΠ΅ создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <li>. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½ΡƒΠΌΠ΅Ρ€ΡƒΠ΅Ρ‚ элСмСнты ΠΏΠΎ порядку автоматичСски ΠΈ Ссли ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько элСмСнтов Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка, Ρ‚ΠΎ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π½ΠΎΠΌΠ΅Ρ€Π° Π±ΡƒΠ΄ΡƒΡ‚ автоматичСски пСрСсчитаны.

Π‘Π»ΠΎΠΊ списка Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ стили Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

ol {
   padding-left: 40px;
   margin-top: 1em;
   margin-bottom: 1em;
}

Для элСмСнта <li> доступСн Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ value, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½ΠΎΠΌΠ΅Ρ€ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта списка. НапримСр, Ссли для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° списка Π·Π°Π΄Π°Ρ‚ΡŒ <li value="10">, Ρ‚ΠΎ ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ нумСрация Π±ΡƒΠ΄Π΅Ρ‚ пСрСсчитана ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ значСния.

Для элСмСнта <ol> доступны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹:

Π’Π°Π±Π»ΠΈΡ†Π° 1. Атрибуты элСмСнта <ol>
ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
reversedАтрибут reversed Π·Π°Π΄Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ списка Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ порядкС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 9, 8, 7…).
startАтрибут start Π·Π°Π΄Π°Π΅Ρ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ отсчСт Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, конструкция <ol start="10"> ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ присвоит порядковый Π½ΠΎΠΌΠ΅Ρ€ Β«10Β». Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, <ol type="I" start="10">.
typeАтрибут type Π·Π°Π΄Π°Π΅Ρ‚ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° для использования Π² спискС (Π² Π²ΠΈΠ΄Π΅ Π±ΡƒΠΊΠ² ΠΈΠ»ΠΈ Ρ†ΠΈΡ„Ρ€). ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡ‹Π΅ значСния:
1 β€” Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, дСсятичная нумСрация.
A β€” нумСрация списка Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎΠΌ порядкС, Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ (A, B, C, D).
a β€” нумСрация списка Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎΠΌ порядкС, строчныС Π±ΡƒΠΊΠ²Ρ‹ (a, b, c, d).
I β€” нумСрация римскими Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ (I, II, III, IV).
i β€” нумСрация римскими строчными Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ (i, ii, iii, iv).
<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>
  1. Microsoft
  2. Google
  3. Apple
  4. IBM
Π€ΠΈΠ³ΡƒΡ€Π°. 2. НумСрованный список

3. Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ

Бписки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <dl>. Для добавлСния Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° примСняСтся элСмСнт <dt>, Π° для вставки опрСдСлСния β€” элСмСнт <dd>.

Π‘Π»ΠΎΠΊ списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ стили Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

dl {
   margin-top: 1em;
   margin-bottom: 1em;
}

Для элСмСнтов <dl>, <dt> ΠΈ <dd> доступны β€ŽΠ³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

<dl>
  <dt>РСТиссСр:</dt>
    <dd>ΠŸΠ΅Ρ‚Ρ€ Π’ΠΎΡ‡ΠΈΠ»ΠΈΠ½</dd>
  <dt>Π’ ролях:</dt>
    <dd>АндрСй Гайдулян</dd>
    <dd>АлСксСй Π“Π°Π²Ρ€ΠΈΠ»ΠΎΠ²</dd>
    <dd>Π’ΠΈΡ‚Π°Π»ΠΈΠΉ Гогунский</dd>
    <dd>ΠœΠ°Ρ€ΠΈΡ КоТСвникова</dd>
</dl>
РСТиссСр:
ΠŸΠ΅Ρ‚Ρ€ Π’ΠΎΡ‡ΠΈΠ»ΠΈΠ½
Π’ ролях:
АндрСй Гайдулян
АлСксСй Π“Π°Π²Ρ€ΠΈΠ»ΠΎΠ²
Π’ΠΈΡ‚Π°Π»ΠΈΠΉ Гогунский
ΠœΠ°Ρ€ΠΈΡ КоТСвникова
Π€ΠΈΠ³ΡƒΡ€Π°. 3. Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ

4. Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ возмоТностСй простых списков Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ создании оглавлСния Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ:

<ul>
 <li>ΠŸΡƒΠ½ΠΊΡ‚ 1.</li>
  <li>ΠŸΡƒΠ½ΠΊΡ‚ 2.
    <ul>
      <li>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.1.</li>
       <li>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.2.     
        <ul>
          <li>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.2.1.</li>
          <li>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.2.2.</li>
          </ul>
       </li>          
      <li>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.3.</li>
    </ul>
  </li>
 <li>ΠŸΡƒΠ½ΠΊΡ‚ 3.</li>
</ul>
  • ΠŸΡƒΠ½ΠΊΡ‚ 1.
  • ΠŸΡƒΠ½ΠΊΡ‚ 2.
    • ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.1.
    • ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.2.
      • ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.2.1.
      • ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.2.2.
    • ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2.3.
  • ΠŸΡƒΠ½ΠΊΡ‚ 3.
Π€ΠΈΠ³ΡƒΡ€Π°. 4. Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список

5.

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ список ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для отобраТСния элСмСнтов списка Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… уровнях с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ отступами. Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ:

<ol>
   <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
   <li>ΠΏΡƒΠ½ΠΊΡ‚
      <ol>
         <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
         <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
         <li>ΠΏΡƒΠ½ΠΊΡ‚
            <ol>
               <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
               <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
               <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
            </ol>
         </li>
         <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
      </ol>
   </li>
   <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
   <li>ΠΏΡƒΠ½ΠΊΡ‚</li>
</ol>

Вакая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ создаст для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка Π½ΠΎΠ²ΡƒΡŽ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΡƒΡŽΡΡ с Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства:

  • counter-reset сбрасываСт ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько счётчиков, задавая Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для сброса;
  • counter-increment Π·Π°Π΄Π°Ρ‘Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ приращСния счётчика, Ρ‚. Π΅. с ΠΊΠ°ΠΊΠΈΠΌ шагом Π±ΡƒΠ΄Π΅Ρ‚ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚;
  • content β€” Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ содСрТимоС, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π²Ρ‹Π²ΠΎΠ΄ Π½ΠΎΠΌΠ΅Ρ€Π° ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ списка.
ol {
   /* ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ */
   list-style: none;
   /* Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅ΠΌ счСтчик ΠΈ Π΄Π°Π΅ΠΌ Π΅ΠΌΡƒ имя li. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ счСтчика Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ - ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ΠΎ Ρ€Π°Π²Π½ΠΎ 0 */
   counter-reset: li;
}
li:before {
   /* ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ β€” li. ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ before ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ содСрТимоС, вставляСмоС ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства content, Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ списка. Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ устанавливаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ приращСния счСтчика (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½ΠΎ 1). */
   counter-increment: li;
   /* Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства content выводится Π½ΠΎΠΌΠ΅Ρ€ ΠΏΡƒΠ½ΠΊΡ‚Π° списка. counters() ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ тСкст прСдставляСт собой значСния всСх счСтчиков с Ρ‚Π°ΠΊΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ. Π’ΠΎΡ‡ΠΊΠ° Π² ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠ°Ρ… добавляСт Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‰ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ, Π° Ρ‚ΠΎΡ‡ΠΊΠ° с ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ добавляСтся ΠΏΠ΅Ρ€Π΅Π΄ содСрТимым ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° списка */
   content: counters(li, ". ") ". ";
}
  1. ΠΏΡƒΠ½ΠΊΡ‚
  2. ΠΏΡƒΠ½ΠΊΡ‚
    1. ΠΏΡƒΠ½ΠΊΡ‚
    2. ΠΏΡƒΠ½ΠΊΡ‚
    3. ΠΏΡƒΠ½ΠΊΡ‚
      1. ΠΏΡƒΠ½ΠΊΡ‚
      2. ΠΏΡƒΠ½ΠΊΡ‚
      3. ΠΏΡƒΠ½ΠΊΡ‚
    4. ΠΏΡƒΠ½ΠΊΡ‚
  3. ΠΏΡƒΠ½ΠΊΡ‚
  4. ΠΏΡƒΠ½ΠΊΡ‚
Π€ΠΈΠ³ΡƒΡ€Π°. 5. ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

Easy Tutorial с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠΎΠ΄Π° Β»

Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… HTML

РаскрытиС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ: Π’Π°ΡˆΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ сайта! ΠœΡ‹ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ сбор Π·Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ услуги, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π½Π° этой страницС. Π£Π·Π½Π°Ρ‚ΡŒ большС
Атрибут
Роль Π² HTML-Ρ„ΠΎΡ€ΠΌΠ°Ρ… (для создания Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ списков)
Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ нСсколько элСмСнтов Π² HTML: ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ руководство с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠΎΠ΄Π° ?
ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π² спискС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°

  

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²ΠΈΠ΄ Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ, удСрТивая Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«ControlΒ» (Windows) ΠΈΠ»ΠΈ Β«CommandΒ» (Mac), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²ΠΈΠ΄ Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ, удСрТивая ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Control (Windows) ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ (Mac), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ.

АмСриканский фламингоАндийский фламингоЧилийский Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎΠ‘ΠΎΠ»ΡŒΡˆΠΎΠΉ Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎΠ€Π»Π°ΠΌΠΈΠ½Π³ΠΎ ДТСймсЛСссСр Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎ

Π’Ρ‹Π±ΠΎΡ€ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… списков

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΊ , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ вмСстС с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ нСсколькими элСмСнтами

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²ΠΈΠ΄ Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎ.

АмСриканский фламингоАндийский фламингоЧилийский Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎΠ‘ΠΎΠ»ΡŒΡˆΠΎΠΉ Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎΠ€Π»Π°ΠΌΠΈΠ½Π³ΠΎ ДТСймсаЛСссСр Ρ„Π»Π°ΠΌΠΈΠ½Π³ΠΎ

Π‘Ρ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ OPTION помСщаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта SELECT.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ SELECT

Атрибут Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ПояснСниС
name = «» Π½Π°Π·Π²Π°Π½ΠΈΠ΅ поля ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя для поля
size = «» Π½ΠΎΠΌΠ΅Ρ€ количСство Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… элСмСнтов (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 1)
ΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ нСсколько ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ нСсколько элСмСнтов
(HTML: multiple | XHTML: multiple = Β«multipleΒ»)
name = «»
Имя поля ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ поля Ρ„ΠΎΡ€ΠΌΡ‹.
Ρ€Π°Π·ΠΌΠ΅Ρ€ = «»

Π—Π°Π΄Π°Π΅Ρ‚ количСство Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… элСмСнтов Π² спискС.

size = Β«1Β»: Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 5

size = Β«3Β»: Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 5

ΠΊΡ€Π°Ρ‚Π½ΠΎ

ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ нСсколько элСмСнтов.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 5

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ SHIFT ΠΈΠ»ΠΈ CTRL для Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ OPTION

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1

Атрибут Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ПояснСниС
value = «» Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ прСдставлСно
Π²Ρ‹Π±Ρ€Π°Π½ΠΎ Π²Ρ‹Π±Ρ€Π°Π½ΠΎ этот элСмСнт Π²Ρ‹Π±Ρ€Π°Π½
(HTML: selected | XHTML: selected = Β«selectedΒ»)
Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = «»

Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ отправляСтся Π½Π° сСрвСр ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1

Если Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ value Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, содСрТимоС элСмСнта OPTION отправляСтся Π½Π° сСрвСр.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 1

Π²Ρ‹Π±Ρ€Π°Π½ΠΎ

Π­Ρ‚ΠΎΡ‚ элСмСнт Π²Ρ‹Π±Ρ€Π°Π½ Π² исходном состоянии.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 5

Π‘Ρ‚ΠΈΠ»ΡŒ поля списка ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ CSS см. Π’ «Бвязанном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅Β».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

 

Какой Ρ‚Π²ΠΎΠΉ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Ρ†Π²Π΅Ρ‚? :

Π’Ρ‹Ρ…ΠΎΠ΄

Π­Ρ‚Ρƒ Ρ„ΠΎΡ€ΠΌΡƒ нСльзя ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·-Π·Π° ΠΎΠ±Ρ€Π°Π·Ρ†Π°.

Π’ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ строкС Π²Ρ‹Π±Ρ€Π°Π½ΠΎ
 

Π’ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ строкС Π²Ρ‹Π±Ρ€Π°Π½Ρ‹: Π‘Π΅Π»Ρ‹ΠΉ ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Π–Π΅Π»Ρ‚Ρ‹ΠΉ Π‘ΠΈΠ½ΠΈΠΉ Π—Π΅Π»Π΅Π½Ρ‹ΠΉ

Π’Ρ‹Ρ…ΠΎΠ΄

Π­Ρ‚Ρƒ Ρ„ΠΎΡ€ΠΌΡƒ нСльзя ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·-Π·Π° ΠΎΠ±Ρ€Π°Π·Ρ†Π°.

Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ нСсколько ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ
 

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ нСсколько элСмСнтов:

Π’Ρ‹Ρ…ΠΎΠ΄

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ SHIFT ΠΈΠ»ΠΈ CTRL для Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов.

Π­Ρ‚Ρƒ Ρ„ΠΎΡ€ΠΌΡƒ нСльзя ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·-Π·Π° ΠΎΠ±Ρ€Π°Π·Ρ†Π°.

Π’Ρ‹Π±Ρ€Π°Π½ΠΎ нСсколько ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ
 

Π’Ρ‹Π±Ρ€Π°Π½ΠΎ нСсколько элСмСнтов:

Π’Ρ‹Ρ…ΠΎΠ΄

Π­Ρ‚Ρƒ Ρ„ΠΎΡ€ΠΌΡƒ нСльзя ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·-Π·Π° ΠΎΠ±Ρ€Π°Π·Ρ†Π°.

Π’Π΅Π³ΠΈ Ρ„ΠΎΡ€ΠΌΡ‹
Бвязанный Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ списка Π²Ρ‹Π±ΠΎΡ€Π°

Π’ спискС Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ, ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Бписок Π²Ρ‹Π±ΠΎΡ€Π° пригодится, ΠΊΠΎΠ³Π΄Π° Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для отобраТСния Π² ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌ пространствС. Бписок Π²Ρ‹Π±ΠΎΡ€Π° Ρ‚Π°ΠΊΠΆΠ΅ являСтся ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ способом ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ фиксированный Π½Π°Π±ΠΎΡ€ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для прСдотвращСния нСдопустимого Π²Π²ΠΎΠ΄Π° ΠΈΠ»ΠΈ орфографичСских ошибок.

Бписок Π²Ρ‹Π±ΠΎΡ€Π° начинаСтся с Ρ‚Π΅Π³Π° .ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΎΡ€ для вашСго списка Π²Ρ‹Π±ΠΎΡ€Π° пСрСчислСны с Ρ‚Π΅Π³ΠΎΠΌ. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ список Π²Ρ‹Π±ΠΎΡ€Π°,

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт: http: //www.scriptingmaster.comhttp: //www.google.comhttp: //www.msn.com

ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт:
name = "FavWebSite" >



Π’Ρ‹Π²ΠΎΠ΄ этого ΠΊΠΎΠ΄Π° Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²Ρ‹ΡˆΠ΅, Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ name ΠΈ value, ΠΌΡ‹ смоТСм ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π±Ρ€Π°Π» ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, Π½Π° сСрвСр, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«GoogleΒ».

Иногда трСбуСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π±Ρ€Π°Π» Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта ΠΈΠ· списка Π²Ρ‹Π±ΠΎΡ€Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для списка Π²Ρ‹Π±ΠΎΡ€Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ мноТСствСнный ΠΊ Ρ‚Π΅Π³Ρƒ

ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°. ΠšΡΡ‚Π°Ρ‚ΠΈ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнный способ Π²Ρ‹Π±ΠΎΡ€Π° Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΈΠ· списка Π²Ρ‹Π±ΠΎΡ€Π° β€” это Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ, Π° Π·Π°Ρ‚Π΅ΠΌ, удСрТивая ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Shift, Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ послСдний элСмСнт Π² спискС. Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ. Π­Ρ‚ΠΎ сдСлаСт Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€.Однако Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ нСсмСТный Π²Ρ‹Π±ΠΎΡ€, ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Ctrl, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· списка Π²Ρ‹Π±ΠΎΡ€Π°.

Если ваш список Π²Ρ‹Π±ΠΎΡ€Π° Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ большС 1, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΈΠ· списка Π²Ρ‹Π±ΠΎΡ€Π°. НапримСр,

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт:

ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 2:

.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт: http: // www.scriptingmaster.comhttp: //www.google.comhttp: //www.msn.comhttp: //www.yahoo.comhttp: //www.microsoft.com

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. ΠŸΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π²Ρ‹Π±ΠΎΡ€Π°. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для отобраТСния Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ автоматичСски добавляСтся Π² список Π²Ρ‹Π±ΠΎΡ€Π°. Однако Ссли Π²Ρ‹ установитС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ€Π°Π²Π½Ρ‹ΠΉ количСству Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π² спискС Π²Ρ‹Π±ΠΎΡ€Π°, полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½Π° ΠΈΠ»ΠΈ Π½Π΅ отобраТаСтся. Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт:

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт:
http: //www.scriptingmaster.comhttp: //www.google.comhttp: //www.msn.comhttp: //www.yahoo.comhttp: //www.microsoft.com

Установка ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для списка Π²Ρ‹Π±ΠΎΡ€Π°

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ выбираСтся пСрвая опция Π² спискС Π²Ρ‹Π±ΠΎΡ€Π°; ΠΎΠ΄Π½Π°ΠΊΠΎ это ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ (Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ) Π² спискС Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ selected Π² Ρ‚Π΅Π³

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт:

сдСлаСт Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ http://www.google.com Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-сайт:
http: // www.scriptingmaster.comhttp: //www.google.comhttp: //www.msn.comhttp: //www.yahoo.comhttp: //www.microsoft.com

HTML Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚Π΅Π³ | Бинтаксис Ρ‚Π΅Π³Π°, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

HTML Ρ‚Π΅Π³ .

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹Π±Ρ€Π°Π½ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈΠ· списка. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚.

Π’Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π² ΠΎΠ΄Π½Ρƒ Π³Ρ€ΡƒΠΏΠΏΡƒ. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ выглядит ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ.

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ списка зависит ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт высоту списка. Π¨ΠΈΡ€ΠΈΠ½Π° списка зависит ΠΎΡ‚ Π΄Π»ΠΈΠ½Ρ‹ тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ

Π’Π΅Π³ слоТна, ΠΈ Π΅Π΅ слоТно ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Для получСния ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ контроля Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° с ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹ΠΌΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌΠΈ Ρ„ΠΎΡ€ΠΌ ΠΈΠ»ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с нСсСмантичСскими элСмСнтами.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π° сСрвСр ΠΈΠ»ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ списку со скриптами, Ρ‚Π΅Π³ состоит ΠΈΠ· ΠΏΠ°Ρ€. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ записываСтся ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ () Ρ‚Π΅Π³Π°ΠΌΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML-Ρ‚Π΅Π³Π°

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΒΆ

BooksHTMLCSSPHPJavaScript

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML-Ρ‚Π΅Π³Π°

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ‚Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для объСдинСния ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π² Π³Ρ€ΡƒΠΏΠΏΡ‹.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΒΆ


HTMLCSSGitJava

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML-Ρ‚Π΅Π³Π°

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³

, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° сСрвСр.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΒΆ

Аэропорт Π²Ρ‹Π»Π΅Ρ‚Π°:


Атрибуты¢

Π’Π΅Π³ ?

ΠžΠ±Ρ‰ΠΈΠ΅ свойства для измСнСния Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вСса / Π°ΠΊΡ†Π΅Π½Ρ‚Π° / Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкста Π² Ρ‚Π΅Π³Π΅

:
  • Бвойство Ρ†Π²Π΅Ρ‚Π° CSS описываСт Ρ†Π²Π΅Ρ‚ тСкстового содСрТимого ΠΈ оформлСния тСкста.
  • Бвойство CSS background-color устанавливаСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта.

Π‘Ρ‚ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° тСкста для Ρ‚Π΅Π³Π°

:

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для элСмСнта HTML?

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для элСмСнта HTML