Estoy tratando de hacer un formulario que se abre al hacer clic en un botón y se cierra al hacer clic en un botón.
Para lograr esto, hice el siguiente código:
function showForm() { document.getElementById('testForm').style.display = 'block'; } function closeForm() { document.getElementById('testForm').style.display = 'none'; } <button type="button" class="btn btn-primary shadow" onclick="showForm()">Add Expense</button> <form id="testForm"> <input type='text' placeholder="Test"> <button onclick="closeForm()">Close Form</button> </form> Sin embargo, el formulario se muestra automáticamente al ingresar al sitio web, en lugar de ocultarse automáticamente y mostrar el formulario al hacer clic en el botón Add Expense . ¿Cómo abordaría esto?
Puede agregar una clase personalizada o un atributo de estilo para que se oculte en la carga de la página, como se muestra a continuación.
<form id = "testForm" style="display:none;"> <input type = 'text' placeholder = "Test"> <button onclick = "closeForm()">Close Form</button> </form>Agregue un estilo predeterminado a su formulario.
O hazlo en línea:
<form id="testForm" style="display: none;"> <input type='text' placeholder="Test"> <button onclick="closeForm()">Close Form</button> </form>O en un archivo/etiqueta css:
#testForm { display: none; }Esto hará que su formulario se oculte de forma predeterminada. Luego, cuando se activa la función "showForm()", el estilo se anula y se muestra el formulario.