Diferencias entre botones submit e input en formularios HTML
Contenido del curso
Yeisson Stik Gutierrez Rivera
Ivan E. Batista-Ochoa
Yeisson Stik Gutierrez Rivera
Cesar Fernando Neira Peña
David Solorzano
Aldo Miguel Ortiz Parodi
Iván R. Artiles Bretón
Juan Pablo Jimenez
María Jimena Rodríguez Contreras
Juan David Merchán Torres
Jimmy Buriticá Londoño
Abel Ortiz H.
Marco Tulio Juarez
Pedro Isaac Aguilar
Mauricio Jose Rivero Padilla
María Jimena Rodríguez Contreras
Mave Fers
Samuel Martínez Hernández
Carlos Eduardo Gomez García
Leider Stiven Castillo Garcia
Antonio Mora
Danilo Fernandez
Esteban Casallas
Jimmy Buriticá Londoño
Lizeth Churaira
Adalberto Morales
Eric López
Zakowicz Osvaldo Emanuel
María Jimena Rodríguez Contreras
Anthony Ismael Manotoa Moreno
Erik Elyager
Carmen Álvarez M.
Diego Alejandro Moreno Pedroza
Daniel David Mármol Rivero
Josue Israel Rojas Vilca
Fabian Flores
Juan Camilo Noreña López
José Barberá
Joel Dominguez Merino
José Barberá
input type submit = lo utilizaremos solo en los formularios
Button = lo utilizaremos en cualquier otro tipo de boton dentro de nuestro proyecto
<!-- // solo para formularios --> <input type="submit" value="Nombre" /> // con el atributo value podremos cambiar el texto que se vera en el <!-- // lo usaremos para cualquier caso en el que necesitemos un boton --> <button type="submit">Qué color te gusta?</button> <!-- // si quieres usar un button en un formulario debes agregarle el type = "submit" -->
Una pregunta: ¿por qué colocas // en los comentarios?
no es por nada en particular es solo que tenia el codigo en el block de notas y asi se directamente que es comentario. lamento si te hice confundir con esto jejej olvide quitarlos.
Excelente!!! Muy bien explicado todo me siento como NEO, Seguimos con el disquet de CSS Downloading...
Excelente referencia XD
So...
Como este curso es solo de HTML & CSS, la parte de envío de formulario y que alguien reciba esos datos no está cubierta (corresponde al backend con JS, PHP, etc). Una herramienta que nos ahorra la parte del backend y que en lo personal he usado en proyectos pequeños es: https://formspree.io/ Básicamente creas tu formulario, lo apuntas a la url que ellos te generan y cuando el usuario presione el botón de enviar el formulario, tendrá un paso extra de recaptcha para verificar que realmente es humano (sorry, esta herramienta no es animals & aliens friendly) y luego envía la información al correo indicado. ¡Súper útil para formulario que no manejan información sensible!
gracias por el dato, voy a probarlo:)
muchas gracias
También cabe mencionar que la tag button nos permite realizar mas acciones para modificar el botón como el ponerle iconos, imágenes algunos emojis y contenido extra que el input type submit no.
Tienes razón, incluso colores.
Entonces al input de submit no puedes darle otro estilo con css?
Ejemplo practico en donde se deberia usar la etiqueta <button>
Buena ejemplificación. Gracias!
Hay 3 tipos de botón: Submit - Que envía automaticamente y por defecto los datos de un form Reset - Reseta todos los datos dentro de un form Button - es solo un botón, no tiene funcionalidad por defecto definida y es totalmente moldeable.
La diferencia es que <button> que puede tener contenido, y la etiqueta <input> no.
Aunque el texto de un botón puede ser especificado en un <input> por el atributo value, tu no puedes agregar texto o contenido personalizado ni semantico en este espacio (como por ejemplo un emoji, un grafico, una imagen), asi que la etqueta <button> tiene un rango de posibilidades mas amplio que <input type=submit>
muchas gracias
Lo ví en la web "W3schools", pero no le había dado mucha importancia. Creo que es útil solo para casos especiales... imagina que para un grupo de usuarios les sea molesto, ya que habrían tocado el botón, de manera casual. lol Link > HTML <input type="reset">
Aclarada esta gran duda, puedo morir en paz... adiós Sr. Stark ＜（＾－＾）＞ . Saludos! Sam Martínez(￣﹃￣)
Yo siempre uso la etiqueta de button porque es más fácil de leer jaja, además me acostumbre a ella, y algo genial es que puedes meter incluso más código HTML dentro (Claro, sin exagerar)
Siguiendo con los ejercicios de la lista de frutas, podemos crear un formulario para ingresar un nuevo alimento, aquí mi ejercicio:
Le agregue estilo, pero utilice todo lo explicado durante este módulo de formularios, si quieren puede realizar su formulario y compartirlo, también les dejo el código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <form action=""> <h4>Un nuevo alimento</h4> <span>Ingrese los datos del alimento y presione <b>Enviar</b>.</span> <label class="pregunta" for="Nombre"> <span>Nombre</span> <input type="text" name="Nombre" required placeholder="Manzana"> </label> <label class="pregunta "for="cantidad"> <span>Cantidad</span> <input type="number" name="cantidad" id="" placeholder="5"> </label> <label class="pregunta"> <span>Tipo de alimento</span> <input list="tipoAlimento" placeholder="Fruta"> <datalist id="tipoAlimento"> <option value="Lacteo"></option> <option value="Legumbre"></option> <option value="Fruta"></option> <option value="Cereal"></option> <option value="Carne"></option> </datalist> </input> </label> <button id="btn-env" type="submit"><b>Enviar</b></button> </form> </main> </body> <style> *{ margin: 0px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } main{ height: 100vh; display: flex; justify-content: center; align-items: center; } form{ text-align: center; padding: 30px; overflow: hidden; border-radius: 10px; width: 500px; display: flex; flex-direction: column; background-color: white; box-shadow: 0px 0px 30px rgba(0,0,0,0.2); } .pregunta{ margin: 10px; display: flex; justify-content: space-between; } #btn-env{ border:none; padding: 6px; } </style> </html>
Hice una copia de tu ejercicio, este es mi resultado
Me encanta este curso, buen ritmo de enseñanza.
si esta muy bueno, un buen orden y claridad !
Si, tomaron varios cursos de Platzi, y realizaron uno mejor con lo aprendido previamente. esta genial.
Un pequeño resumen de lo aprendido de HTML
un aporte que encontré... espero les sirva
Gracias por tu aporte...
Input submit para formularios, y button tag para botones de propósito general.
gracias que buena aporte
Notas de la clase
La etiqueta de input se usa especialmente en formularios. Envía información directamente a la base de datos.
La etiqueta de button se usa para cualquier tipo de botón y es más sencilla de personalizar. Envía la información para validar al JS primero y luego desde allí, a la base de datos.
<input type="submit" value="nombreBoton"> <button type="submit">nombreBoton</button>
Una diferencia importante a tomar en cuenta, aunque hay personas que lo usan indistintamente.
Creo que a veces lo complicado es identificar bien, cuando usar uno u otro, pues al momento de renderizar no hay mayor diferencia. Todo está en el código y la buena practica que que hagamos con el mismo.
<input type="submit"> <input type="submit" value="Nombre"> <button>Enviar</button> <button type="submit">¿Qué color te gusta?</button>```
Es verdad, unos se usan para formularios y los otros para casi todo lo demás
Con esto finalizamos la parte de HTML y de más está decir lo mucho que me ha gustado y emocionado este lenguaje de programación. Sin duda alguna ya quiero exprimir todo lo que se puede lograr con él y sobretodo aprender CSS y JavaScript para ya así tener todo el paquete requerido para realizar buenas páginas web, y como una gran enseñanza de David: siempre desarrollarlo pensando en la experiencia de usuario con buenas prácticas.
Compañeros si desean practicar sobre los formularios pueden ir 👉 aqui
Notas de la clase
Aquí les dejo un resumen de lo que hemos visto hasta aquí de html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="index,follow"> <!-- nos ayuda a que al buscar en internet nos encuentren mas facil "los robots de google" --> <link rel="stylesheet" href="CSS.css"> <!-- Se puede hacer asi para CSS muy largo, con la etiqueta style para pocos estilos y la otra forma seria dentro de las etiquetas html asi: --> <title style="color: greenyellow;">Curso CSS y HTML</title> </head> <body> <header> <nav></nav> </header> <main> <h1 style="color: greenyellow;">Soy un titulo</h2> <section> <figure> <img src="pexels-pixabay-235621 (1).jpg" alt="paisaje"> <figcaption>es un paisaje</figcaption> <!-- figcaption sirve para darle una descripcion a la imagen en el pie de la imagen--> </figure> <!-- figure sirve contener imagenes para posicionarla --> <video src="linkej.m4v#t=10,60" controls preload="auto"> <source src="linkejm4v"> <source src="linkejm3"> <!-- source nos sirve por si el navegador no entiende un formato reproduzca el otro, siempre respetando el primero --> </video> <!-- la etiqueta video sirve para reproducir videos se le pasa el atributo controls para darle play and pause y preload con el valor auto pa que se renderice mas rapido En este caso tampien le pusimos #t=10,60 que seria pa que el video se empiece a producir en el segundo 10 y termine en el 60 osea recorta el video--> <article></article> <!-- ¿Como se deberian crear formularios? --> <form action=""> <label for="nombre"> <span>Cual es tu nombre?</span> <input type="text" id="nombre" placeholder="ejMinombre"> </label> <label for="init-platzi"> <span>Que dia comenzaste en platzi?</span> <input type="date" id="init-platzi" placeholder="ej25/08/2003"> </label> <label for="horario"> <span>Cual es tu horario para estudiar?</span> <input type="time" id="horario"> </label> <label for="hora"> <span>que hora quiere reservar</span> <input type="time" id="hora" placeholder="ej7:00" name="hora"> </label> <label for="dia"> <span>En que fecha quieres viajar</span> <input type="date" id="dia" placeholder="ejlunes" name="dia"> </label> <label for="semana"> <span>En que semana quieres viajar</span> <input type="week" id="semana" placeholder="ejdel07al05" name="semana"> </label> <label for="mes"> <span>En que fecha quieres viajar</span> <input type="month" id="mes" placeholder="ejOctober" name="mes"> </label> <label for=""> <input type="submit" value="en vez de enviar(que es por defect) le pondre send"> </label> <label for="datetimelocal"> <span>En que fecha quieres viajar</span> <input type="datetime-local" id="datetimelocal" placeholder="ejfechadeviaje" name="datetimelocal"> </label> <!-- autocomplete and require --> <label for="correo"> <span>Coreeo</span> <input type="email" id="correo" placeholder="ejcorreo@gmail.com" name="correo" required autocomplete="email"> </label> <label for="adrees"> <span>Dirección</span> <input type="text" id="adrees" placeholder="ejcalle38 #40-32" name="adrees" required autocomplete="postal-code"> </label> </form> <!-- etiqueta select --> <select name="paises" id=""> <option value="COL">Colombia</option> <option value="MX">Mexico</option> </select> <!-- buenas practicas select asi nos permite buscar en la lista de options esto para no hacer scroll infinito --> <input list="pais"> <datalist id="pais"> <option value="col">colombia</option> <option value="mx">mexico</option> <option value="arg">argentina</option> </datalist> <!-- etiqueta button --> <button>clic aqui</button> </section> <ul> <li><a href="https://www.google.com/search?q=recetas+con+manzanas&oq=recetas+con+manzana&aqs=chrome.0.0i512j69i57j0i512l8.4627j0j7&sourceid=chrome&ie=UTF-8">Soy una manzana</a></li> <li>Soy una pera</li> </ul> <ol> <li>soy un uno</li> <li>soy un dos</li> </ol> </main> <footer> <p>Soy un texto</p> <a href="#">Soy un link</a> </footer> </body> </html>
Yo lo veo en firefox y si tiene diferencias los botones. El primero enviar consulta. 2º Enviar
Cual es la diferencia amigo?
Pues creo q ya lo dije.... cuando pones <button>:--> [Enviar] y cuando pones en el formulario <submit>:--> [Enviar consulta] hay una clara diferencia, pero no pasa en Chrome como dice el prof.
