Продолжаем прошлую статью, также с форм тега input. Эта статья получится чуть менее короткой, но пропускать ее не следует, так как очень важные элементы рассмотрим. А именно независимые и зависимые переключатели (radio и checkbox), кнопку отправки формы и рисунок для отправки формы.

HTML-формы

Все эти элементы необходимы для создания полноценных сайтов. Возможно, сейчас вы не совсем понимаете, что это за параметры у них и как с этими параметрами работать. Вкратце схему могу рассказать так: формы получают определенные атрибуты -> они отправляются сценарию на сервере -> сценарий их обрабатывает так, как мы это указали -> на выходе имеем результат (например, выполнение какого либо действия). Именно для этого и используются эти атрибуты.

Независимый переключатель checkbox

Мы привыкли видеть этот элемент везде, где нужно поставить галочку, что мы согласны с правилами и продолжаем регистрацию. Или, что мы прочитали лицензионное соглашение и т.д. В народе этот элемент называют галочкой или птичкой. Что означает независимый переключатель? Это означает, что независимо от того, сколько таких элементов на странице с одинаковыми name можно поставить галочки на все чекбоксы. Сама форма создается так:

Обратите внимание на строку checked. Это означает, что изначально форма чекбокс будет с галочкой. Если не писать эту строку исходное состояние чекбокса будет без галочки. Стоит учесть, что если флажок не установлен, то сервер не получит никакой информации от чекбокса, но если флажок установлен, то сценарий на сервере получит информацию вида имя=значение.

Зависимый переключатель radio

В отличие от предыдущего типа переключателя, radio зависимый переключатель и если на странице есть два и более переключателя с name=simple, то поставить флажок вы сможете только на один из них. При этом сценарию будет передана информация имя=значение только той радиокнопки, на которой будет установлен флажок. Остальные будут проигнорированы, будто их вовсе и нет на странице. Как выглядит форма:

Как видите, практически ничем не отличается от предыдущей формы. Оба элемента используются в самых различных целях, начиная од единичных элементов в формах регистраций, до создания огромных тестов и опросов.

Кнопка submit

Когда все элементы на странице заполнены информацией, то их нужно отправить сценарию, чтобы тот смог сделать определенную операцию, например, сделать запись в базе данных. Именно тогда эта кнопка и может пригодиться. Форма выглядит так:

В случае с этой формой, при нажатии серверу передается также имя=значение. Но value  это в данном случае надпись кнопки. Поэтому серверу передается имя=надпись_на_кнопке. Это удобно если вам нужно создать несколько кнопок на странице (например, зарегистрироваться, применить, удалить и т.д.).

На этом обзор форм тега input закончен. Но это не значит, что это весь список форм, которые существуют у этого тега, в следующих уроках мы с вами создадим различные формы, которые вам будет проще запомнить и самостоятельно разделить к какому тегу они относятся. В следующих частях я расскажу о других тегах и их формах.

Ведете активный образ жизни? Много захватывающих моментов, которыми вы хотите поделитесь с миром? Тогда вам просто необходима экшн камера, купить которую вы можете по ссылке. Делитесь своими крутыми моментами жизни с экшн камерами. Лично я советую GoPro HERO 🙂

More from my site