Тег button

Тег <button>

Это парный тег предназначенный для создания кнопки. Между тегами button можно размещать любой текст.

Синтаксис

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

<button>Отправить</button>

В примере показана простая кнопка с надписью «отправить».

Кроме текста, между тегами можно помещать и изображения, как в примере выше. Тогда эта картинка также будет показана на кнопке, вместе с текстом.

Сброс формы

Чтобы, при нажатии кнопки, сбрасывалась вся информация в форме, установите для type значение reset.

При нажатии на кнопку button, имеющей  type со значением reset будет обнуляться вся информация в форме. Это удобно, когда пользователь ввел неправильно свое имя и хочет написать заново.

Отправка формы

Чтобы отправить данные, введенные в форме, для последующей обратки, то установить для button тип submit.

В даннос примере первая кнопка button будет отправлять все введенные данные на сервер.

Использование button вне формы

Если вы желаете создать самостоятельную кнопку, которая не будет относиться к форме, то установите значение button  для тега type.

<button type=» button «>Кнопка</button>

Применять этот способ не стоит внутри формы потому, как это может привести к неправильному выполнению кода.

Атрибут disabled

Атрибут нужен, чтобы запретить посетителю нажать кнопку. Это может вам показаться неразумно, но это не так. Бывают разные задачи, например пользователь ввел неверные данные и поэтому вы ему блокируете кнопку.  Если посетитель исправит ситуации, можно активировать ее при помощи JavaScript.

<button disabled></button>

При использовании этого атрибута, кнопка приобретает серый цвет, и на нее невозможно нажать.

Атрибут formaction

Используется, если необходимо изменить атрибут action, который задается в форме, и содержит адрес страницы-обработчика.

 

В примере также указан атрибут formmethod. Он изменяет значение method для формы. Есть еще атрибутов, про которые можно узнать из справочников.

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

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