Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
Табл. 1. Атрибуты кнопок
Атрибут
Описание
name
Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value
Значение кнопки и одновременно надпись на ней.
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5 IE Cr Op Sa Fx
Кнопка
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
» width=»372″ height=»195″ />
Рис. 2. Кнопки, созданные с помощью
Синтаксис создания такой кнопки следующий.
Атрибуты перечислены в табл. 1, но в отличие от кнопки атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег добавляется внутрь , как показано в примере 2.
Пример 2. Рисунок на кнопке
HTML5 IE Cr Op Sa Fx
Кнопка
В данном примере показано создание обычной кнопки с текстом, при этом , а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера , но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования , ширину кнопки изменить не удастся.
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.
Синтаксис создания кнопки Submit зависит от используемого тега или .
Атрибуты те же, что и у рядовых кнопок (пример 3).
Пример 3. Отправка данных на сервер
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 , на кнопке по умолчанию будет добавлен текст «Очистить».
HTML. При нажатии на кнопку всплывает форма
Ребят, очень нужно. Как сделать так, чтобы при нажатии на кнопку всплывала форма с с полями, куда пользователь мог бы внести данные и тем самым зарегистрироваться.
document.getElementById('blablabla').style.display = 'none'; function blablabla()
Отслеживать
3,879 1 1 золотой знак 12 12 серебряных знаков 20 20 бронзовых знаков
задан 25 мая 2019 в 17:31
JuniorLittle JuniorLittle
191 1 1 золотой знак 3 3 серебряных знака 13 13 бронзовых знаков
А информацию о пользователях где будете хранить?
– user256824
25 мая 2019 в 17:45
@РустамГимранов база данных
25 мая 2019 в 17:47
Просто из вопроса не понятно, что уже сделано, что делаете, где не получается.
– user256824
25 мая 2019 в 17:49
Где ваши попытки решить задачу?
25 мая 2019 в 17:55
@РустамГимранов У меныя лишь форма с отправкйо данных в базу (инпути и батон)
25 мая 2019 в 18:07
P.S. А если все же display:none; && display:block; обязательны, то реализовать по другому.
Как сделать переход на другой html файл по кнопке?
Здравствуйте! В коде есть четыре кнопки (To assign the numbers, Information и т.д). Мне необходимо чтобы при нажатии на них, открывался другой html файл (например: infromation.html). Как это реализовать? И я правильно понимаю, что нужно будет добавить /route в скрипте? Буду благодарен за каждый ответ!
Web Application
Вопрос задан более трёх лет назад
6868 просмотров
Комментировать Решения вопроса 2
Вариантов несколько. Правильнее было бы через визуальное CSS-оформлении ссылки в виде кнопки (если button используется вне тега form), но в вашем топорном случае решается через JavaScript:
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать