Изменить форму макета, когда я нажимаю один переключатель

Здравствуйте, я студент, и недавно я изучаю JavaScript, CSS и HTML, и при выполнении упражнения у меня возникла проблема.
В упражнениях я использую Bootstrap.

function Form(stringa){
    document.getElementById("form1").style.display = "none";
            document.getElementById("form2").style.display = "none"; 
    document.getElementById(stringa).style.display = "block"; 
}

<!doctype html>
<html lang = "en">
  <head>
    <title>Form di registrazione</title>
  </head>
  <body>
   <div class = "container">
     <h1>Form di Registrazione</h1>
      <div class = "form-check form-check-inline">
        <input class = "form-check-input" type = "radio" name = "inlineRadioOptions" value=1 onclick = "Form('form1');" >
        <label class = "form-check-label" for = "inlineRadio1">Privato</label>
      </div>
       <div class = "form-check form-check-inline">
        <input class = "form-check-input" type = "radio" name = "inlineRadioOptions" onclick = "Form('form2'); " value=2>
        <label class = "form-check-label" for = "inlineRadio2">Azienda</label>
      </div>
      <form id = "form1" class = "row g-3" value=1>
        <div class = "col-md-6">
          <label for = "inputEmail4" class = "form-label">Email</label>
          <input type = "email" class = "form-control" id = "inputEmail4">
        </div>
        <div class = "col-md-6">
          <label for = "inputPassword4" class = "form-label">Password</label>
          <input type = "password" class = "form-control" id = "inputPassword4">
        </div>
    </form>

    <form id = "form2" type = "hidden"class = "row g-3"style = "display:none;" value=2>
      <div class = "col-md-6">
        <label for = "inputEmail4" class = "form-label">Eeeeee</label>
        <input type = "email" class = "form-control" id = "inputEmail4">
      </div>
    </form>
    </div>
  </body>
</html>

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

Скорее всего, макет меняется из-за события JavaScript OnClick onclick = "Form('form1'); — это событие скрывает form2 и добавляет блок отображения css в form1 (что, вероятно, и является причиной). Недостаточно кода для решения. Возможно, вы можете исправить это, заменив блок пустой строкой. В любом случае, какова цель этой функции?

— 24.12.2020 13:30

javascript html jquery css radio-button

24.12.2020 13:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

322

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас уже будет 2 разные формы. При клике по переключателю (который находится вне форм? что?) будет запускаться функция с переключением отображения форм.

Что произошло: Скрытие одной формы и отображение другой с другим количеством входов.

24.12.2020 15:25