Как при нажатии на кнопку открыть другую форму html
Перейти к содержимому

Как при нажатии на кнопку открыть другую форму html

  • автор:

Кнопки

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .

Рассмотрим вначале добавление кнопки через и его синтаксис.

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок

Атрибут Описание
name Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

HTML5 IE Cr Op Sa Fx

    Кнопка  

Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

Вид кнопки

Рис. 1. Вид кнопки

Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .

Кнопки, созданные с помощью <button></p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<!-- 4article -->
<script src=

» 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

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      
Choosen action
  • Вопрос задан более трёх лет назад
  • 6868 просмотров

Комментировать
Решения вопроса 2

Вариантов несколько. Правильнее было бы через визуальное CSS-оформлении ссылки в виде кнопки (если button используется вне тега form), но в вашем топорном случае решается через JavaScript:

  

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

SpiderPigAndCat

Дима Долготер @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 бронзовых знака

Добавить комментарий

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