Главная›Телефон›Button описание. Кнопка html: применение, изготовление. Учтите: «если кнопка не имеет валидного href, это просто элемент »
Button описание. Кнопка html: применение, изготовление. Учтите: «если кнопка не имеет валидного href, это просто элемент »
04.02.14
4.9K
Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.
Сам элемент выглядит таким образом:
Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).
Элемент
При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…
Кнопка – это элемент формы
Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:
Элемент в оболочке
Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:
Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока
Кнопки могут содержать контент
Основной причиной использования элемента
Подтвердить
Пока будет сохраняться, этот смешанный контент будет отображаться на экране.
Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.
Давайте оставим пока тему стилей для , хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.
Учтите: «если кнопка не имеет валидного href, это просто элемент »
Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение
. Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:
Меня уже достали такие кнопки.
Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с 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.
Связанные проблемы
У вас может получиться что-то похожее на то, что получилось у меня!
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить - это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами - с помощью тега
и тега
.
Рассмотрим вначале добавление кнопки через
и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега
. Он по своему действию напоминает результат, получаемый с помощью тега
. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью
.
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Надпись на кнопке
Атрибуты перечислены в табл. 1, но в отличие от кнопки
атрибут value
определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег
добавляется внутрь
, как показано в примере 2.
Пример 2. Рисунок на кнопке
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
В данном примере показано создание обычной кнопки с текстом, при этом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера
, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования
, ширину кнопки изменить не удастся.
Атрибут name
для этого типа кнопки можно не писать. Если не указать значение value
, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
Надпись на кнопке
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value
тега
. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Пример 4. Кнопка для очистки формы
HTML5
IE
Cr
Op
Sa
Fx
Кнопка
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value
, на кнопке по умолчанию будет добавлен текст «Очистить».
Популярное в рубрике:
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...