Кнопки Form, Type, Submit и Reset

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

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

Базовые кнопки форм. HTML

Submit. Кнопка отправки

Чтобы создать кнопку отправки нужно вписать тег <input> с атрибутом type="submit". Через атрибут <value> можно указать название, которое будет отображаться на странице.

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

Reset. Кнопка очистки

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

Создается также, как и кнопка отправки, только меняется тип кнопки. Значение submit меняем на reset, а в атрибуте <value> задаем название — "Очистить".

Button. Создание пустой кнопки

Кнопки submit и reset имеют всего одну неизменную функцию. Тип button в этом плане, очень сильно и выгодно отличается. Пустой кнопке можно привить любую функцию, однако сделать это гораздо сложнее.

Для создания пустой кнопки используйте тип <button>. В атрибуте <value>, также нужно указывать название кнопки.

Создание всплывающего окна. HTML, CSS & JavaScript

Стандартные кнопки, созданные обычным HTML 5, не имеют хорошего дизайна и какие-либо функции. Ниже будет представлено пара примеров правильного использования пустых кнопок.

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

Сейчас мы будем работать с браузерными событиями, используя JavaScript. Создайте документ с расширением .js и назовите его scripts.js

Подключение .js к HTML документу

Чтобы связать файл JavaScript и нашу кнопку, зададим ей специальный атрибут <onclick>. Он будет обрабатывать событие, которое произойдет при нажатии.

Присваивание атрибута "onclick"

Стилизация кнопки

Прежде чем как-то менять функции нашей кнопки, придадим ей хороший вид.

Сначала нужно изменить шрифт и цвет текста, а также всплывающую линию. Для этого используем следующие свойства:

  1. outline: none; — убирает выделение формы;
  2. color: #fff — задает размер шрифта;
  3. font-family — выбирает семейство шрифтов;
  4. font-size — задает размер шрифта;

После изменения текста в самой форме, займемся её расположением, размером и рамками. Можно также придать ей плавную анимацию.

Создание сообщения

Открываем JavaScript файл и записываем туда строчку function buttonClick(button){}. Она означает, что будет создана функция buttonClick, которая принимает аргумент button(никак не относится к атрибуту type="button").

function buttonClick (button) {

alert("Отправка прошла успешно. Ваши данные сохранены на сервере!");

}

Внутри записываем сообщение с помощью команды alert. После этого привязываем её к нашей кнопке. Записываем следующее значение для атрибута onclick — "buttonClick(this)". Мы записали название активируемой функции и аргумент this. Он означает, что именно эта кнопка будет использоваться для данной функции.

Вот что у нас получилось:

Кнопка FORM и другие в HTML

Заключение

Поздравляем, вы познакомились с браузерными событиями в JS. Если раньше, при изучении тега form, кнопки типа button казались бесполезными, то теперь вы видите их возможности. Чтобы попрактиковаться в создании таких кнопок, добавьте кнопку очистки, которая по клику будет показывать сообщение: «Данные удалены». Желаем удачи!

Теги:
0

Оставить своё мнение

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