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

Открыть форму при onClick

Как сделать чтобы этот форма открылось при нажатие на кнопку ( onclock) ??
можно ли найти еще другой код для отправки в почту ??

Добавлено через 19 часов 48 минут
Народ никто не знает что ли??
хотя бы скажите как создать форму и чтобы она открылось при нажатие по кнопка

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Закрыть форму/открыть другую форму при нажатии клавиши
Как сделать так что бы форма закрывалась или открывала другую форму нажатием любой клавиши. Спасибо.

При OnClick на label открывать вторую форму и на ней был image
Здравствуйте, подскажите как реализовать следующую ситуацию в Delphi 7: у меня есть одна форма, на.

При выполнении условия открыть форму
нужно, чтобы юзер ввел в textbox числовое значение, затем нажал кнопку (button). далее оно.

Открыть форму при переходе из facebook
Здравствуйте! Подскажите, как при переходе с facebook на сайт компании, при открытии страницы.

109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371

1 2 3 4 5

html> body> button onclick = "document.location.href = 'http://formstruct.ru/form/52700b303f8f9a865152b56e'">Button/button> /body> /html>

Регистрация: 14.03.2011
Сообщений: 340
Записей в блоге: 1
Никита Однороб, Можно еще где то найти готовый код для отправки на почту ??
109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371

По идее, для отправки на почту будет тоже самое, только адрес ссылки будет mailto:email. Например, mailto:a@mail.ru

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Открыть форму 2 при закрытии формы 1
Здравствуйте! При закрытии формы 1 должна открыться форма 2, при компиляции всё правильно, но.

Открыть вторую форму при полном ProgressBar
Прошу помощи в C# как запустить прогресс бар нажатием на кнопку и когда у будет 100% прогресс бара.

Как при запуске открыть выбранную форму?
Как при запуске открыть выбранную форму?

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

HTML. При нажатии на кнопку всплывает форма

Ребят, очень нужно. Как сделать так, чтобы при нажатии на кнопку всплывала форма с с полями, куда пользователь мог бы внести данные и тем самым зарегистрироваться.

document.getElementById('blablabla').style.display = 'none'; function blablabla()

Показать форму 
 
Ім'я: Прізвище: Телефон: Опис: Отправить 
 

Отслеживать
3,869 1 1 золотой знак 11 11 серебряных знаков 20 20 бронзовых знаков
задан 25 мая 2019 в 17:31
JuniorLittle JuniorLittle
191 1 1 золотой знак 2 2 серебряных знака 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,404 2 2 золотых знака 11 11 серебряных знаков 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

Есть такой интересный вариант:

Здесь объявляется форма, action которой указывает на страницу редиректа. При нажатии на кнопку происходит переход на заданную страницу. Интересная особенность метода — тут вообще не используется javascript.

Ответил admax
1019 дн., 15 час., 55 мин. назад

Для примера из вопроса этот способ предполагает наличие двух вложенных форм? Одна для сабмита, вторая для редиректа?

Думаю достаточно будет использовать метод GET, всё-таки LINK довольно специфический метод и уверенности в том, что он корректно поддерживается нет

Для примера это конечно не совсем то (именно из-за двух форм), но сам способ достаточно интересный

День добрый, дорогие друзья, пожалуйста, сделайте кнопку что бы он запускала файл на сайте, и другую, что бы закрывала файл. Если что пришлите на почту пожалуйста, или суда.Заранее благодарен(Прошу прислать код).

Повторное использование знаний

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

Тег чтобы добавить на страницу кнопку.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Атрибуты
6. Подсказки
7. На практике
   1. Дока Дог советует
   2. Алёна Батицкая советует
   1. Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

   Контрибьюторы:

   Обновлено 13 сентября 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   создаёт кликабельную кнопку.

   Пример

   Скопировать ссылку «Пример» Скопировано

    Нажми меня button name="button">Нажми меняbutton>    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   С помощью CSS можно настроить внешний вид кнопки и текста на ней: шрифт, размер, цвет фона и другие параметры. А если ничего не менять, то будет выглядеть, как стандартная браузерная кнопка.

   На кнопку можно поместить любой HTML-элемент.

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

      .   form> button>. button> form>    Скопировать Скопировано Не удалось скопировать   

   Атрибуты

   Скопировать ссылку «Атрибуты» Скопировано

   К тегу можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:

   • autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
   • disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
   • form — связывает кнопку с любой формой в документе через ID. Если ID не указан, то с предшествующей формой.
   • formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
   • formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:
     • application / x — www — form — urlencoded : стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ��);
     • multipart / form — data — используется, чтобы отправлять файлы, данные при этом не кодируются;
     • text / plain — буквы и другие символы не кодируются, вместо пробелов появляется +.
     • post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
     • get — добавляет данные из формы прямо в URL-адрес после знака «?», например https : / / site . ru / doc / ? name = Ivan&age = 27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
     • _self : показывает данные в текущем окне. Это значение используется по умолчанию.
     • _blank : показывает данные в новом окне браузера — его используют чаще всего.
     • _parent : показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
     • _top : отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
     • submit : отправляет данные на сервер. Это также значение по умолчанию.
     • reset : удаляет введённые данные из формы.
     • button : просто кнопка. Действие для неё можно задать через скрипты.

     Подсказки

     Скопировать ссылку «Подсказки» Скопировано

     �� Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то либо должен быть внутри контейнера , либо связан с формой при помощи атрибутов id и form :

         Введите ваш email Отправить form id="login"> label> Введите ваш email input type="email" placeholder="Ваш email"> label> form> button type="submit" form="login">Отправитьbutton>    Скопировать Скопировано Не удалось скопировать   

     �� Тег с атрибутом type = «button | reset | submit» тоже создаёт кнопку, но проще стилизовать, так как внутрь можно добавить любой HTML-контент, например, , или .

     �� Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type , иначе может вылезти ошибка.

     На практике

     Скопировать ссылку «На практике» Скопировано

     Дока Дог советует

     Скопировать ссылку «Дока Дог советует» Скопировано

     �� Но есть и другое мнение. Я вот использую крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю , потому что проще верстать ��‍♂️

     Единственный случай, когда я использую — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный картинку не вставить. А с тегом не хочется извращаться, потому что он по умолчанию не отправляет данные формы.

     Алёна Батицкая советует

     Скопировать ссылку «Алёна Батицкая советует» Скопировано

     �� При выборе между кнопкой и ссылкой нужно смотреть исключительно на семантику, а не на внешний вид элемента в дизайне и уж точно не на простоту вёрстки.

     В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).

     �� Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег , ссылку.

     Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.

     Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:

     • В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку ( ).
     • Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка ( ).
     • Всегда начинайте с кнопки.

     + Развернуть

     На собеседовании

     Скопировать ссылку «На собеседовании» Скопировано

     Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

     Скопировать ссылку «Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано

     Скопировать ссылку «Александр Ламков отвечает» Скопировано

     Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter , а для кнопок — пробелом или Enter . Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.

     Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом , то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом .

     С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link , у кнопок — button . Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.

     Похожие публикации:

     1. Das что это
     2. Как переместить сразу несколько файлов linux
     3. Как сделать java приложение для windows
     4. Как то по другому называется