Чтобы организовать взаимодействие сайта с посетителем в его страницах надо предусмотреть возможности для ввода информации и отправки ее на сервер. Для этого в языке описания веб-страниц HTML (HyperText Markup Language - «язык разметки гипертекста») предусмотрен специальный набор тегов. Что это за теги и как, пользуясь ними создать в странице веб-форму
для заполнения посетителем?
HTML-теги, которые сообщают браузеру, что в этом месте страницы необходимо отобразить форму
и ее элементы, размещаются в коде между открывающим тегом <.form> и закрывающим <./form>. Открывающий тег должен содержать обязательную информацию - атрибуты, сообщающие куда именно надо отправить информацию из формы и каким методом нужно это сделать. Кроме того, если страница содержит больше одной формы, то каждая должна иметь собственное имя. С учетом всего этого открывающий тег может выглядеть так:
Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.
Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).
При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…
Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:
Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:
Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока .
Пока будет сохраняться, этот смешанный контент будет отображаться на экране.
Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.
Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный
, потому что вы получаете возможность изменения вида курсора и все остальные стили по умолчанию.
Вне
Однако все равно, кажется, лучше
Даже если ничего не делает, находясь за пределами
Хорошо. Давайте вставим JavaScript
Это, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента в принципе можно обходиться и без запуска JS.
Но мы можем сделать следующее:
// 1. Создаем кнопку
var button = document.createElement("button");
button.innerHTML = "Do Something";
// 2. Размещаем ее
var body = document.getElementsByTagName("body");
body.appendChild(button);
// 3. Добавляем обработку действия
button.addEventListener ("click", function() {
alert("did something");
});
Вы можете легко сделать «кнопку добавления
» частью рабочего процесса JavaScript.
Когда целесообразнее использовать ссылки
Если у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.
Это прогрессивное улучшение в лучшем его применении. Например:
Кнопка поиска обычно порождает запуск поисковых сценариев Ajax — в то время как ссылка просто может указывать на страницу поиска;
Кнопка «опубликовать
» запускает следующий шаг публикации чего-то, что нужно пользователю — но ссылка может просто вести на страницу / опубликовать /;
Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере — а ссылка может просто указывать URL-адрес этого увеличенного изображения.
Если ничего больше не подходит, вставляйте кнопку с JavaScript.
Связанные проблемы
У вас может получиться что-то похожее на то, что получилось у меня!
Тег BUTTON
создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега INPUT (с параметром type=button | reset | submit). В отличие от этого тега, BUTTON
предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Кнопка с текстом
Теоретически, тег BUTTON должен располагаться внутри формы, устанавливаемой элементом FORM. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом BUTTON, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать BUTTON в контейнер FORM обязательно.
Синтаксис
Закрывающий тег
Параметры
Пример 1. Использование тега BUTTON
Название кнопки
Описание параметров тега BUTTON
Параметр DISABLED
Описание
Синтаксис
...
Аргументы
Значение по умолчанию
Пример 2. Блокирование доступа к кнопке
Результат примера
Активная кнопка Неактивная кнопка
Параметр TYPE
Описание
Синтаксис
...
Аргументы
Значение по умолчанию
Пример 3. Изменение типа кнопки
Параметр VALUE
Описание
Синтаксис
...
Аргументы
Значение по умолчанию
Пример 4. Установка значения кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить - это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами - с помощью тега
.
Рассмотрим вначале добавление кнопки через
Атрибуты кнопки перечислены в табл. 1.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега
. Он по своему действию напоминает результат, получаемый с помощью тега
.
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Надпись на кнопке
Атрибуты перечислены в табл. 1, но в отличие от кнопки
, как показано в примере 2.
Пример 2. Рисунок на кнопке
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
В данном примере показано создание обычной кнопки с текстом, при этом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера
, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action
тега
Атрибут name
для этого типа кнопки можно не писать. Если не указать значение value
, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
Надпись на кнопке
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value
тега
Пример 4. Кнопка для очистки формы
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value
, на кнопке по умолчанию будет добавлен текст «Очистить».
(c атрибутом type =
"button"
).
Атрибут type тега задает тип, используемой кнопки:
Всегда указывайте для тега тип атрибута type =
"button"
если элемент используется в качестве обычной кнопки. Если вы используете тег внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент
</span>Тег <button><span>
Кнопка 1
Кнопка 3
В данном примере мы разместили 3 кнопки
, которым задали уникальные имена атрибутом name
и с использованием внутренних CSS стилей указали ширину (width
) размером 80
пикселей и высоту (height
) размером 50
пикселей:
Текст внутри первой кнопки
мы отформатировали жирным начертанием (тег ). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
Внутри второй кнопки
элементом *.png
изображение (с прозрачным задним фоном). Атрибутом alt
мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src
(обязательный атрибут), атрибутами width
(ширина) и height
(высота) задали размеры изображения равными 40
на 40
пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
Текст внутри третьей кнопки
мы отформатировали курсивным начертанием (тег ).
Результат нашего примера:
Отключение кнопки
Атрибут disabled (HTML тега ) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.
Пример использования атрибута disabled HTML тега <button><span>
Элемент активен
Элемент отключен
В данном примере мы указали для второго элемента с типом кнопка (type =
"button"
) атрибут disabled , который отключает элемент и не дает нам кликнуть по кнопке.
Автофокус на кнопке
В HTML 5 был добавлен такой логический атрибут как (HTML тега ) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus
(браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).
Давайте рассмотрим пример использования:
Пример использования атрибута autofocus HTML тега <button><span>
В данном примере мы создали две кнопки (HTML тег