|Web Учебник | Самоучитель по CSS | Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Выключатели и переключатели в HTML-формах.

В этой главе мы познакомимся с выключателями и переключателями в HTML-формах.

Выключатели(кнопки) служат для подтверждения выбора. и вставляются в форму при помощи того-же тега input и атрибута type, но с значением checkbox,
<input type="checkbox" name="vybor" value="TRUE" >
Результат: как видите, можно включить а можно выключить.
Все атрибуты вам знакомы, но немного поговорим об атрибуте value, в этом теге он обязателен!!! Пару слов об значениях, дело все в том, что все данные делятся на 8 видов (строковые, цифровые, булевы и т.д.), забивать этим бредом я вам голову не буду, как специалисту по HTML вам это не к чему, но вы должны знать, что значение:
Если поставить эти значения "TRUE", "YES", "1" или больше, "любой текст",то эти значения правдивые и сценарий который получит эти данные(пару checkbox=TRUE)определит что вы сделали выбор.
А если поставить значение атрибута value "No", "NOW", "FALSE", "0"(ноль) "-1" или другое отрицательное число, то скрипт поймет что эти данные фальшивые или проще говоря как будто выбор не сделан. Хотя бывают ситуации когда нужно отправлять фальшивое значение, с этим вы познакомитесь в скриптовых языках если будет в этом необходимость.

Можно использовать сразу несколько выключателей, например если это сайт "секс шоп" детям там не место, значит перед тем как в сам посетитель перейдет к каталогу товаров, он должен подтвердить что ему больше 18 лет и он согласен с правилами магазина, конечно вы можете придумать что-то свое.
<input type="checkbox" name="vozrast" value="TRUE" >
<input type="checkbox" name="soglasie" value="TRUE" > Обратите внимание, что значения атрибутов value у всех одинаковое, а вот name разное.

Переключатели, это так-же кнопки, но с возможностью выбора, вводятся в форму также тегом input и атрибута type, но с значением radio.
<input type="radio" name="vozrast" value="1" >меньше 18
<input type="radio" name="vozrast" value="2" > 18-35
<input type="radio" name="vozrast" value="3" >больше 35

Ваш возраст:меньше 18 18-35 больше 35
Обратите внимание, что значения атрибута name одинаковые, а value разные, это не ошибка. Требования к заначениям как и к выключателям.

Бывают ситуации когда нужно определить возраст и пол.

<input type="radio" name="vozrast" value="1" >меньше 18
<input type="radio" name="vozrast" value="2" > 18-35
<input type="radio" name="vozrast" value="3" >больше 35
<input type="radio" name="pol" value="1" >мужской
<input type="radio" name="pol" value="2" >женский
Если написать такой код, то можно будет сделать выбор только одного пункта, чтобы использовать несколько переключателей нужно каждый блок поместить в отдельную таблицу:
    <form>
    <table>
      <tr>
       <td>Ваш возраст:
<input type="radio" name="vozrast"  value="1" >меньше 18
<input type="radio" name="vozrast"  value="2" > 18-35
<input type="radio" name="vozrast"  value="3" >больше 35 
         </td>
      </tr>
    </table>
    <table>
      <tr>
         <td>Ваш пол:
<input type="radio" name="pol"  value="1" >мужской
<input type="radio" name="pol"  value="2" >женский 
         </td>
      </tr>
    </table>
    </form>    

Ваш возраст: меньше 18 18-35 больше 35
Ваш пол: мужской женский

Теперь порядок, мы можем определить и пол и возраст!!!
 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!