Как сделать галочку в html
Перейти к содержимому

Как сделать галочку в html

  • автор:

Флажки

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.

Атрибуты флажков перечислены в табл. 1.

Табл. 1. Атрибуты флажков

Атрибут Описание
checked Предварительное выделение флажка.
name Имя флажка для его идентификации обработчиком формы.
value Задаёт, какое значение будет отправлено на сервер.

Использование флажков показано в примере 1.

Пример 1. Создание флажков

HTML5 IE Cr Op Sa Fx

    Флажки   

В каких годах произошли самые известные извержения вулкана Кракатау?

1417

1680

1883

1934

2010

В результате получим следующее (рис. 1).

Вид флажков в браузере

Рис. 1. Вид флажков в браузере

Как сделать галочку в html

Галочки еще называют чекбоксами. По факту это просто поле ввода input с атрибутом type=»checkbox» . Ниже пример, как это выглядит в HTML:

 type="checkbox"> 

Чекбокс можно сделать отмеченным по умолчанию. Для этого добавляется атрибут checked :

 type="checkbox" checked > Опция 1 

Флажок checkbox

Флажок checkbox представляет собой элемент (галочку или птичку) HTML формы, который может иметь два состояния: отмечен и не отмечен.

Флажок создается с помощью тега input с атрибутом type в значении checkbox . Внешний вид флажка:

Отмеченный чекбокс будет посылать на сервер содержимое атрибута value . Если атрибута value у чекбокса нет — он будет посылать строку «on». Если чекбокс не отмечен — ничего не будет присылаться на сервер не зависимо от наличия атрибута value .

Пример

Давайте сделаем два флажка checkbox: пусть первый будет отмечен (так как ему дан атрибут checked ), а второй — нет:

Пример . Заблокированный чекбокс

Давайте посмотрим на заблокированный с помощью атрибута disabled флажок. При нажатии на него его состояние не будет меняться:

Пример . Заблокированный и отмеченный чекбокс

А теперь давайте заблокируем флажок, в отмеченном состоянии, атрибутом disabled и зададим ему атрибут checked :

Смотрите также

  • радио переключатели,
    с помощью которых можно сделать выбор
  • атрибут checked ,
    который делает флажок чекбокс отмеченным
  • псевдокласс checked ,
    который задает стили для отмеченных чекбоксов
  • атрибут disabled ,
    который блокирует элементы форм
  • тег label ,
    который задает подсказку для чекбокса

Как создать галочку или checkbox HTML.

Галочка (переключатель) или checkbox в html – это простое поле ввода input, которому присвоен атрибут type=»checkbox».

С помощью галочки пользователь может выбирать несколько решений из предложенных ему вариантов.

Это может выглядеть вот так:

Чтобы создать такой переключатель на HTML, нужно использовать следующий код:

Чтобы сделать галочку отмеченной по умолчанию, нужно добавить атрибут checked.

Давайте посмотрим, как это работает на практике.

Если вы хотите обработать информацию, которую пользователь отметил с помощью checkbox и выдать соответствующий результат, нужно воспользоваться клиентскими или серверными языками веб-программирования.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *