Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5 IE Cr Op Sa Fx
Кнопка Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
Надпись на кнопке
Атрибуты те же, что и у рядовых кнопок (пример 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
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Через display: none/block , если нужно.
const button = document.querySelector('button'); const form = document.querySelector('#blablabla'); button.addEventListener('click', () => < form.classList.add('open'); >);#blablabla < display: none; animation-duration: 1.5s; animation-fill-mode: both; animation-name: fadeIn; >#blablabla.open < display: block; >@keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >> UPD. С Popup окном. (Может пригодится)
const button = document.querySelector('button'); const form = document.querySelector('#blablabla'); const popup = document.querySelector('.popup'); button.addEventListener('click', () => < form.classList.add('open'); popup.classList.add('popup_open'); >);#blablabla < display: none; animation-duration: 1.5s; animation-fill-mode: both; animation-name: fadeIn; >#blablabla.open < display: block; >.popup < position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(17, 17, 17, 0.5); transition: all 0.5s ease; display: none; >.popup_open < display: block; >.popup__container < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 10px; max-width: 588px; width: 100%; >.popup__wrapper < padding: 40px; >@keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >> Отслеживать
ответ дан 26 мая 2019 в 7:01
7,394 2 2 золотых знака 12 12 серебряных знаков 25 25 бронзовых знаков
Чтобы форма всплывала, можно реализовать это по разному.
Лично я думаю, что автор говоря всплывала , имеет ввиду плавность. Конечно, можно добиться плавности и с помощью js , но лучше css .
И еще один важный момент: свойство display:none; && display:block; Трансформации не поддаются. Так что если нужна плавность без opacity не обойтись.
const formWrap = document.getElementById('form-wrap'); function openForm()
#form-wrap < opacity: 0; transition: opacity .5s; >#form-wrap.open
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 Комментировать
Дима Долготер @SpiderPigAndCat
занимаюсь салообразованием
и не забудь поменять все дивы внутри, потому что не валидно в строчный тег пихать блочный
а вообще это пизд**ц полный. если прям надо блок делать ссылкой то Hanneman подсказал адекватный вариант, но ты делаешь что-то явно не так как надо
Как показать form при нажатии на кнопку с помощью javascript?
В общем, есть несколько одинаковых форм и кнопок под ними. Изначально формы скрыты:
.form111 Нужно, чтобы при нажатии на кнопку открывалась форма, а кнопка пропадала. Также есть код на js , который позволяет кнопке пропадать:
var button111 = document.querySelectorAll('.button111'); for(var i = 0; i < button111.length; i++)< button111[i].onclick = function()< this.style.display = 'none'; >> Но вот как открывать при этом форму, я не знаю.
Пробовал такой код, но открываются сразу все формы:
var form111 = document.querySelectorAll('.form111'); var button111 = document.querySelectorAll('.button111'); for(var i = 0; i < button111.length; i++)< button111[i].onclick = function()< this.style.display = 'none'; for(var y = 0; y < form111.length; y++)< form111[y].style.display = 'block'; >> > Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
задан 28 сен 2018 в 16:01
ivanoffguest ivanoffguest
13 1 1 серебряный знак 4 4 бронзовых знака