Input type submit vs. Button tag

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" -->

Cesar Fernando Neira Peña

Excelente!!! Muy bien explicado todo me siento como NEO, Seguimos con el disquet de CSS Downloading…

Iván R. Artiles Bretón

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!

Juan David Merchán Torres

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.

Marco Tulio Juarez

Ejemplo practico en donde se deberia usar la etiqueta <button>

![](

Mauricio Jose Rivero Padilla

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>

Samuel Martínez Hernández

Aclarada esta gran duda, puedo morir en paz… adiós Sr. Stark ＜（＾－＾）＞
.
Saludos!
Sam Martínez(￣﹃￣)

RetaxMaster

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)

Leider Stiven Castillo Garcia

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="">
            <h3>Un nuevo alimento</h3>
            <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>

Danilo Fernandez

Me encanta este curso, buen ritmo de enseñanza.

Adalberto Morales

un aporte que encontré…
espero les sirva

Zakowicz Osvaldo Emanuel

Input submit para formularios, y button tag para botones de propósito general.

Leer mas sobre input submit, y button tag 😃

Lizeth Churaira

Un pequeño resumen de lo aprendido de HTML

Carmen Álvarez M.

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>```

Daniel David Mármol Rivero

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.

Josue Israel Rojas Vilca

Compañeros si desean practicar sobre los formularios pueden ir 👉 aqui

Fabian Flores

Notas de la clase

Juan Camilo Noreña López

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</h1>
        <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="[email protected]" 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>

José Barberá

Yo lo veo en firefox y si tiene diferencias los botones. El primero enviar consulta. 2º Enviar

Yoshirys de Jesús Salas Corona

Input type submit vs. Button tag

INPUT

Puedes utilizar el botón input con el valor submit especialmente para formularios.
Si se desea cambiar la forma original del nombre del botón que es ‘submit’, utilizamos el atributo 'value=" " 'y dentro el nombre que le aparecerá al usuario.

<input type="submit" value="cambiarnombre">

BUTTON TAG

Mientras que el botón con la etiqueta <button></button> la podemos utilizar en cualquier otro botón.

<button type="submit">Enviar formulario</button>

German Darío Quintero Pérez

Mi código de la clase:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-			 
          scale=1.0">
	<title>Clase Botton</title>
</head>
<body>
	<main>
		<h3>Tipos de botones</h3>
		<h4>Input</h4>
		<p>
			Lo podemos utilizar para los formularios, podemos
			cambiar el texto del boton con el atributo value
	 </p>
	 <input type="submit" value="Guardar">
	 <h4>Botton</h4>
	 <p>
		 Se puede utilizar para otro tipos de funciones 
		 dentro de nuestro proyecto, aunque tambien lo podemos 
		 utilizar en un formulario y hara lo mismo que un input
	 </p>
	 <button type="submit">Calcular</button>
	</main>
	
</body>
</html>```

Adalberto Morales

pueden checar las herramientas, es fenomenal…
https://cssbuttongenerator.com/

cristian david palomino porras

conclusion:
input tipo submit es para formularios
button para botones de otro tipo

Jose Antonio Rojas Ollarves

Básicamente, deberíamos usarlos así:

input para formularios.
button para otro tipo de botones.

Gustavo Gabriel Varas Adrián

vamos por CSS

JuanSebastianCaballero

Por fin iremos a CSS

Nelson González

ok, muy bien hasta el momento todo me ha funcionado algún que otro tropezón pero de resto muy bien

Jose Luis Grande Acevedo

La etiqueta button se abre y se cierra porque yo puedo ponerle el texto que va a ir dentro del botón.

<body>
    <input type="submit" />
    <button>Enviar</button>
</body>

Vamos a ver el código desde el navegador para ver que tipo de código nos esta regresando el navegador. Estas son las 2 etiquetas para generar botón y las dos te van a servir para lo mismo.
Nosotros a la etiqueta de botón también le podemos poner un type submit para poderlo utilizar en los formularios, nos va enviar la información. En la etiqueta input podemos agregar texto con el atributo value.

<input type="submit" value="Nombre" />
<button type="submit">Otra opción</button>

De esta forma yo empiezo a personalizar la forma en la que yo utilizo cada uno de los botones, dejar para formularios el input y el botón para cualquier otro tipo de botón que necesites en tu proyecto.

user_deleted_1572741

🐱‍💻 <button> permite representar un elemento cliqueable de tipo botón que puede ser utilizado en formularios.

Manuel David Perez Higuera

Quisiera agregar que la etiqueta buttoncuando se utiliza como type=“button” requiere el evento onclick="" para especificar la acción que realizará. Así que no debería confundirse el uso que se le da a un botón con diferencia de un link con etiqueta a.

button

<button type="button" onclick="window.location.href='https://www.platzi.com';">Visita platzi.com!</button>

 <a href="https://www.platzi.com">Visita platzi.com!</a>

Nota: Ambos pueden recibir los mismos estilos con css

Yo utilizaría **button ** en sitios dinámicos por ejemplo: Para actualizar un gráfico. Borrar o agregar elementos, etc.

Cristian Camilo Castillo Madrid

hace 5 meses

Aqui "finaliza" html pero me gustaria antes de pasar a css un proyecto con todo lo aprendido de estas clases hasta aca. (es una recomendacion... ustedes que dicen ? )

Jarol Jiménez

hace 7 meses

creo que falto como mas de HTML o se el footer hacer el navegador no se enrrealidad siento que falto mas contenido de html

Elian David Herrera Cortes

que buen profesor todos los profesores de platzi deberían ser iguales.

Carlos Ramos

Clase 20 - Input type submit vs. Button tag

¿Qué formas hay para crear botones en HTML?

Con la etiqueta <input type=“submit”>
Sintaxis:

<input type="submit">

Con la etiqueta <button>
Sintaxis:

<button>Enviar</button>

¿Cómo podemos configurar el texto que aparece en el botón creado con la etiqueta <input type= “submit”>?

Esto lo podemos hacer a través del atributo value y dentro de su valor escribimos el texto que queremos que aparezca en el botón.
Sintaxis

<input type="submit" value="Compra ya!!">

¿Cómo podemos hacer que una etiqueta <button> nos sirva para envíar información de un formulario?

Agregando el atributo type y en su valor escribimos submit
Sintaxis:

<button type="submit">¿Qué color te gusta?</button>

Como vemos el texto que aparecerá en el botón lo podemos configurar solamente escribiendo contenido dentro de la etiqueta.

¿Cuál es la diferencia entre la etiqueta <input type=“submit”> y <button>?

Su flexibilidad. Mientras que la etiqueta <input type=“submit”> solo la podemos usar para enviar información la etiqueta <button> nos permite hacer muchas más cosas y es más editable.

Santiago Andres Alvarez Cuadros

Cuando usé la etiqueta <button> en VS code me arrojó una advertencia (no un error como tal), donde me indica que es necesario especificar, dentro de la etiqueta <button>, que efectivamente se está utilizando como un botón y no como un submit. En otras palabras, me dijo que pasara de esto:

<button>Aceptar</button>

A esto:

<button type="button">Aceptar</button>

Esto se debe a que uno pensaría que la etiqueta <button> es para crear un botón con funciones diferentes a <input type=“submit”>, pero el navegador no lo entiende de esa manera, y por defecto <button> lo entiende como otro “submit” y esto podría llevar a errores más adelante en código. Por lo tanto, es una buena práctica especificar en la etiqueta <button> que efectivamente es un botón, utilizando type=“button”.

Me pareció algo apropiado de explicar. Acá les dejó un link con la documentación que lo explica.

jarvin.arias.s

Álvaro Guerra Jované

<input> Solo en formularios.

<button> Más flexible, para cualquier botón que necesite en el proyecto.

<input type="submit" value="Nombre">
<button type="submit">Enviar</button>

Alex hernandez mitre

Excelente la parte de HTML, ahora vamos con CSS _

María Del Pilar Chávez Gutiérrez

Input type submit vs button tag

Input type submit se usa únicamente para formularios.

Button lo vamos a usar para cualquier otro tipo de botón en nuestro proyecto.

Gabriela Carolina Navarro Quintero

El input se utiliza de forma directa en los formularios.

Button se usa para cualquier otro botón en la página porque es mucho más flexible

<input type="submit" value="Esto no es un boton">
<button type="submit">Este si es un botón</button>

Reinaldo Mendoza

En algunos navegadores puedes entrar a las opciones de desarrollador con F12 y en otros con ctrl+shift+i

Luis Ángel Morales Hernández

hace un mes

* Usa `<input type="submit">` para formularios simples y rápidos. * Usa `<button type="submit">` cuando se necesita personalización, ya que admite HTML y estilos más complejos, mejorando la experiencia visual y de usuario.

Eric Carmona Castaño

hace 4 meses

Hice más o menos como un desafío personal con todo lo que ha ido explicando el profesor y así es como me quedo, si ven cosas por mejorar o fallos (que seguro ahí mucho jaja) me encantaría leer sus respuestas, ya que eso me ayudara a mejorar la próxima vez, aquí os dejo mi código espero haberlo hecho decente jeje gracias y suerte <3 . HTML ```html <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <meta name="robots" content="index,follow"> <meta name="description" content="Mi primer formulario a mi estilo."> <title>Calendario</title> </head> <body> <header>

Calendario.

Los que tengas el "*" seran obligatorios rellenar.

</header> <main> <form action=""> <label for="calendario"> *Calendario: <input type="datetime-local" name="calendario" id="calendario" required> </label>

De esta manera preguntamos (fecha,hora,semana y mes) en menos lineas del codigo.

<label for="fecha"> Fecha: <input type="date" id="fecha" name="fecha"> </label>
<label for="hora"> Hora: <input type="time" id="hora" name="hora"> </label>
<label for="semana"> Semana: <input type="week" id="semana" name="semana"> </label>
<label for="mes"> Mes: <input type="month" id="mes" name="mes"> </label>

Aqui estoy usando el auto completador.

<label for="nombre"> *Nombre: <input type="text" name="nombre" id="nombre" autocomplete="name" required> </label>
<label for="correo"> *Correo: <input type="email" name="correo" id="correo" autocomplete="email" required> </label>
*Region donde vive: <input list="region" required> <datalist id="region"> <option value="Asia"></option> <option value="Medio Oriente"></option> <option value="África del Norte"></option> <option value="Europa"></option> <option value="América del Norte"></option> <option value="América Central"></option> <option value="Caribe"></option> <option value="América del Sur"></option> <option value="África "></option> <option value="Australia "></option> <option value="Oceanía"></option> </datalist>
<label for="cp"> *Codigo postal: <input type="text" name="cp" id="cp" autocomplete="postal-code" required> </label>
<button type="submit">Enviar la informacion"button"</button> <input type="submit" value="Enviar la informacion">

El button tambien sirbe para enviar como el input submit pero este se acomoda mejor a los formularios de este estilo asi que en la proxima ocasion usare un input submit en un proximo formulario.

</form> </main> <footer> <h6>Echo con amor.</h6> </footer> </body> </html> ```CSS ```css html { background-color: black; } body { color: white; } .explicacion { width: 600px; } ```

Pablo Alejandro Figueroa

hace 9 meses

Captura de pantalla 2024-03-17 135934.png

Andrés Soret Chacin

HTML: Tipos de Botones en Desarrollo Web

En esta clase, exploraremos los dos tipos principales de botones que se pueden utilizar en el desarrollo web: la etiqueta <input> con el tipo “submit” y la etiqueta <button>.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clase Botón</title>
</head>
<body>
  <form action="#" method="post">
    <!-- Utilizando input con tipo submit -->
    <input type="submit" value="Nombre">

    <!-- Utilizando la etiqueta button -->
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Input con Tipo Submit:

Se utiliza la etiqueta <input> con el atributo type="submit" para crear un botón que, al hacer clic, envía el formulario. El texto del botón se especifica mediante el atributo value.

Etiqueta Button:

Se utiliza la etiqueta <button> para crear un botón más flexible. El atributo type="submit" se puede agregar para que funcione de manera similar al input submit. El texto del botón se coloca entre las etiquetas de apertura y cierre (<button>Texto</button>).

Personalización de Texto:

Tanto en el <input> como en <button>, se puede personalizar el texto del botón. En <input>, se utiliza el atributo value, mientras que en <button>, el texto se coloca directamente entre las etiquetas.
La elección entre <input> y <button> depende de la flexibilidad requerida. <input> es más específico para enviar formularios, mientras que <button> proporciona opciones más amplias para personalización.

Conclusiones y Próximos Pasos:

Ambos tipos de botones cumplen la función de enviar formularios.
<input type="submit"> es más directo y específico para formularios.
<button> ofrece mayor flexibilidad para personalizar y crear botones diversos en proyectos.
En la siguiente clase, exploraremos aspectos adicionales de CSS. ¡No te lo pierdas!

Mariela Cáceres

hola, a mi cuando ocupo la etiqueta \<input type "submit"> no me funciona por que en el boton me sale escrito submit y no " enviar. entonces busque y claro hay que agregarle el value y ahi tenia que escribir "Enviar". alguien me responde por q paso esto

Julio Cesar Godinez

Josue Israel Rojas Vilca

En resumen, si necesitas un botón para enviar un formulario, usa <input type=“submit”>. Si necesitas un botón para realizar una acción específica en tu página (como mostrar o ocultar contenido), usa <button> y agrega la funcionalidad personalizada que desees con JavaScript.

Josue Israel Rojas Vilca

<input type=“submit”> se usa principalmente para enviar formularios.
<button> es más versátil y se usa para activar acciones personalizadas dentro o fuera de formularios.

Johan Rodriguez

Comparto por aquí la lista de compras del supermercado usando las etiquetas que hemos aprendindo hasta ahora y algunas otras que descubrí por ahí. Recomiendo este sitio para ver más etiquetas: https://htmlreference.io/

Se agradece feedback. Éxitos con sus proyectos 💚.

maria cristina gaupmann

Estuve practicando un poco en la lista de supermercado que hicimos en las primeras clases. Agregué algo de esta última clase para mejorarla.

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Lista super</title>
</head>
<body>
<header>
<nav>
<h1>Compras por menu</h1>
</nav>
</header>
<main>
<section>
<h3>Almacen
<figure>
<img src="./img pics/almacen.jpg"
alt=“Foto de almacen”>
</figure>
</h3>
<h4>Aderezos</h4>
<input list=“aderezos” placeholder=“Seleccione…”/>
<datalist id=“aderezos”>
<option value=“mayonesa”></option>
<option value=“mostaza”></option>
</datalist>

        <h4>Mermelada</h4>
        <input list="mermeladas" placeholder="Seleccione..."/>
        <datalist id="mermeladas">
            <option value="mermelada de frutilla"></option>
            <option value="mermelada de durazno🍯"></option>
            <option value="mermelada de ciruela"></option>
            <option value="mermelada de naranja"></option>
        </datalist>

        <h4>Panaderia</h4>
        <input list="panaderia" placeholder="Seleccione..."/>
        <datalist id="panaderia">
            <option value="tostadas integrales"></option>
            <option value="pan integral🍞"></option>
            <option value="vainillas"></option>
            <option value="grisines"></option>
        </datalist>

        <h4>Infusiones</h4>
        <input list="infusiones" placeholder="Seleccione..."/>
        <datalist id="infusiones">
            <option value="mate cocido"></option>
            <option value="te"></option>
            <option value="cafe☕"></option>
        </datalist>

        <h4>Harinas</h4>
        <input list="harinas" placeholder="Selecciones..."/>
        <datalist id="harinas">
            <option value="harina de maiz"></option>
            <option value="harina de trigo"></option>
        </datalist>

        <h4>Legumbres</h4>
        <input list="legumbres" placeholder="Seleccione..."/>
        <datalist id="legumbres">
            <option value="arroz"></option>
            <option value="choclo cremoso"></option>
            <option value="choclo entero🥫"></option>
            <option value="lentejas"></option>
        </datalist>
    </section>

    <section>
        <h3>Bebidas
            <figure>
                <img src="./img pics/bebidas.jpg"
                alt="Foto de bebidas">
            </figure>
        </h3>
        <h4>Bebidas sin alcohol</h4>
        <input list="sin alcohol" placeholder="Seleccione..."/>
        <datalist id="sin alcohol">
            <option value="agua sin gas"></option>
            <option value="agua saborizada"></option>
            <option value="gaseosa"></option>
            <option value="agua gasificada"></option>
            <option value="jugo"></option>
        </datalist>

        <h4>Bebidas con alcohol</h4>
        <input list="con alcohol" placeholder="Seleccione:"/>
        <datalist id="con alcohol">
            <option value="amargo"></option>
            <option value="cerveza"></option>
        </datalist>
    </section>

    <section>
        <h3>Frescos
            <figure>
                <img src="./img pics/frescos.jpg"
                alt="Foto de frescos">
            </figure>
        </h3>
        <h4>Lacteos</h4>
        <input list="lacteos" placeholder="Seleccione..."/>
        <datalist id="lacteos">
            <option value="leche descremada🥛"></option>
            <option value="leche entera"></option>
            <option value="yogurt descremado"></option>
            <option value="yogurt entero"></option>
            <option value="manteca"></option>
            <option value="margarina"></option>
            <option value="crema de leche"></option>
        </datalist>

        <h4>Pastas frescas y tapas</h4>
        <input list="pastas y tapas" placeholder="Seleccione..."/>
        <datalist id="pastas y tapas">
            <option value="tapas para empanadas hojaldre🥟"></option>
            <option value="tapas para empanadas criolla🥟"></option>
            <option value="tapas para tarta hojaldre"></option>
            <option value="tapas para tarta criolla"></option>
            <option value="ravioles"></option>
            <option value="sorrentinos"></option>
        </datalist>

        <h4>Quesos</h4>
        <input list="quesos" placeholder="Seleccione..."/>
        <datalist id="quesos">
            <option value="queso untable"></option>
            <option value="queso para rallar🧀"></option>
            <option value="queso mantecoso"></option>
        </datalist>

        <h4>Frutas y verduras</h4>
        <input list="frutas y verduras" placeholder="Seleccione..."/>
        <datalist id="frutas y verduras">
            <option value="limón🍋"></option>
            <option value="manzana🍎"></option>
            <option value="naranja"></option>
            <option value="frutillas"></option>
            <option value="cebolla"></option>
            <option value="papas blancas🥔"></option>
            <option value="papas negras"></option>
        </datalist>

        <h4>Huevos</h4>
        <input list="huevos" placeholder="Seleccione..."/>
        <datalist id="huevos">
            <option value="huevos blancos"></option>
            <option value="huevos de color"></option>
        </datalist>
    </section>

    <section>
        <h3>Limpieza
            <figure>
                <img src="./img pics/limpieza.jpg"
                alt="Foto de limpieza">
            </figure>
        </h3>
        <h4>Lavado</h4>
        <input list="lavado" placeholder="Seleccione..."/>
        <datalist id="lavado">
            <option value="jabón líquido para lavarropas"></option>
            <option value="jabón en polvo"></option>
            <option value="suavizante"></option>
            <option value="detergente ropa fina"></option>
        </datalist>

        <h4>Papeles</h4>
        <input list="papeles" placeholder="Seleccione..."/>
        <datalist id="papeles">
            <option value="papel higiénico🧻"></option>
            <option value="rollo de cocina"></option>
            <option value="servilletas"></option>
        </datalist>

        <h4>Limpieza de baño</h4>
        <input list="limpieza baño" placeholder="Seleccione..."/>
        <datalist id="limpieza baño">
            <option value="limpiador para baño"></option>
            <option value="desodorante de ambiente"></option>
            <option value="desodorante para baño"></option>
            <option value="trapo para piso"></option>
            <option value="escobita para baño"></option>
        </datalist>

        <h4>Limpieza de cocina</h4>
        <input list="limpieza cocina" placeholder="Seleccione..."/>
        <datalist id="limpieza cocina">
            <option value="detergente"></option>
            <option value="antigrasa"></option>
            <option value="esponja🧽"></option>
            <option value="detergente para lavavajillas"></option>
            <option value="rejilla"></option>
        </datalist>

        <h4>Limpieza de pisos</h4>
        <input list="limpieza pisos" placeholder="Seleccione..."/>
        <datalist id="limpieza pisos">
            <option value="autobrillo"></option>
            <option value="cera para madera"></option>
            <option value="trapo para pisos"></option>
            <option value="escoba"></option>
            <option value="escobillón"></option>
            <option value="secador"></option>
        </datalist>

        <h4>Lavandina</h4>
        <input list="lavandina" placeholder="Seleccione..."/>
        <datalist id="lavandina">
            <option value="lavandina líquida"></option>
            <option value="lavandina en gel"></option>
        </datalist>
    </section>

    <section>
        <h3>Perfumeria
            <figure>
                <img src="./img pics/perfumeria.jpg"
                alt="Foto de perfumeria">
            </figure>
        </h3>
        <h4>Cuidado del cabello</h4>
        <input list="cuidado del cabello" placeholder="Seleccione..."/>
        <datalist id="cuidado del cabello">
            <option value="shampoo"></option>
            <option value="acondicionador"></option>
            <option value="cema para peinar"></option>
        </datalist>

        <h4>Cuidado bucal></h4>
        <input list="cuidado bucal" placeholder="Seleccione..."/>
        <datalist id="cuidado bucal">
            <option value="pasta dental"></option>
            <option value="hilo dental"></option>
            <option value="cepillo dental🦷"></option>
        </datalist>

        <h4>Cuidado personal</h4>
        <input list="personal" placeholder="Seleccione..."/>
        <datalist id="personal">
            <option value="jabón de tocador"></option>
            <option value="jabón liquido para manos"></option>
            <option value="crema facial"></option>
            <option value="crema corporal"></option>
            <option value="algodón"></option>
            <option value="toallas femeninas"></option>
        </datalist>
    </section>

    <section>
        <h3>Recetas sugeridas del dia </h3>
            <span>Elije tu receta</span>
            <ul>
                <a href="https://www.paulinacocina.net/asado-al-horno-con-papas/3812"
                        target="_blank">   
                <li>Carne al horno con papas</li>
                </a>

                <a href="https://www.paulinacocina.net/arroz-con-pollo-clasico/3090" 
                        target="_blank">
                <li>Arroz con pollo</li>
                </a>

                <a href="https://www.recetasderechupete.com/receta-de-lasana-de-carne/223/" 
                        target="_blank">
                <li>Lasagna de carne</li>
                </a>

                <a href="https://elgourmet.com/recetas/zapallitos-rellenos-con-carne/" 
                        target="_blank">
                <li>zapallitos rellenos</li>
                </a>
            </ul>
            
            <span>Elije tu receta de postre</span>
            <ul>
                <a href="https://es.tastemade.com/programas/tefi-en-casa/flan-casero-tefi/"
                        target="_blank">   
                <li>Flan casero</li>
                </a>

                <a href="https://elgourmet.com/recetas/tiramisu-13/" 
                        target="_blank">
                <li>Tiramisú</li>
                </a>

                <a href="https://www.recetasgratis.net/receta-de-budin-de-limon-facil-y-rapido-37368.html" 
                        target="_blank">
                <li>Budin de limón</li>
                </a>

                <a href="https://www.recetasgratis.net/receta-de-budin-de-pan-casero-52015.html" 
                        target="_blank">
                <li>Budín de pan</li>
                </a>
            </ul>

    </section>


</main>

</body>
</html>

Juan Camilo Salazar Hernandez

//botones
// boton de enviar como informacion en Formularios
<input type=“submit” value=“Nombre”>

// cualquier otro boton mas personalizado
<button type=“submit”>¿que color te gusta?</button>

Ricardo Alfonso Chavez Vilcapoma

Este es la última parte de HTML y me llamaba la atención que no se haya incluido el uso de tablas…aunque como este curso se actualiza creo, da a entender que ya no se esta usando y también noté ello. Por otra parte, esté curso es más detallado que el de FRONTEND DEVELOPER. Gracias profesor.

En el desarrollo web se suelen utilizar las etiquetas ``<a href=""></a>` como botones también, estos son modificados con código CSS para lucir como un botón. Son utilizados comúnmente para hacer un redireccionamiento a otro sitio o ventana.

Una solución para hacer un redireccionamiento con un <button></button> sería de la siguiente forma: <button type="button" onclick="location.href='https://www.platzi.com'">Ir a Platzi</button>

luisrovez

Yo nunca eh usado la etiqueta button, prefiero hacer mis botones con una etiqueta ancla, creo es mala practica XD, pero es la costumbre xd

Josue Maldonado

Un resumen de algunos takeaways de esta seccion

HTML proporciona una variedad de etiquetas para crear formularios que permiten al usuario interactuar con la página web. Algunas de las etiquetas más comunes son las siguientes:

1. Etiqueta input

La etiqueta input es una de las etiquetas más versátiles y utilizadas en HTML. Permite al usuario ingresar datos a través de diferentes tipos de campos de entrada, como texto, correo electrónico, contraseña, fecha, número, entre otros.

Además de los atributos comunes como name y placeholder, HTML5 incluye nuevos atributos para agregar más funcionalidad a los campos de entrada. Por ejemplo, el atributo autocomplete permite al navegador recordar la información ingresada por el usuario y sugerirla en futuros formularios. El atributo pattern permite definir una expresión regular para validar el formato de la entrada.

Ejemplo:

<input type="email" name="correo" placeholder="Ingresa tu correo" autocomplete="on" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$">

2. Etiqueta select

La etiqueta select se utiliza para crear una lista desplegable de opciones. El usuario puede seleccionar una opción de la lista.

Además del atributo name para identificar la opción seleccionada, HTML5 incluye el atributo multiple para permitir que el usuario seleccione múltiples opciones.

Ejemplo:

<select name="colores" multiple>
  <option value="rojo">Rojo</option>
  <option value="azul" selected>Azul</option>
  <option value="verde">Verde</option>
</select>

3. Etiqueta option

La etiqueta option se utiliza dentro de la etiqueta select para definir cada una de las opciones de la lista.

Además del atributo value para identificar la opción seleccionada, HTML5 incluye el atributo disabled para deshabilitar opciones específicas.

Ejemplo:

<select name="colores">
  <option value="rojo">Rojo</option>
  <option value="azul" selected>Azul</option>
  <option value="verde" disabled>Verde</option>
</select>

4. Validación de datos

HTML5 incluye nuevas opciones para validar los datos ingresados en los formularios. Los atributos más comunes son los siguientes:

required: obliga al usuario a ingresar un valor en el campo.
type: define el tipo de campo de entrada, como email, date, number, entre otros.
min y max: define el valor mínimo y máximo permitido en el campo.

Ejemplo:

<input type="email" name="correo" placeholder="Ingresa tu correo" required>
<input type="number" name="edad" placeholder="Ingresa tu edad" min="18" max="99">

En conclusión, HTML ofrece una variedad de etiquetas y atributos para crear formularios interactivos y validar los datos ingresados por el usuario. La etiqueta input permite al usuario ingresar datos, mientras que las etiquetas select y option permiten crear listas desplegables de opciones. Además, HTML5 incluye nuevos atributos para agregar más funcionalidad a los campos de entrada y opciones de lista, como autocomplete y multiple. Por último, HTML5 permite validar los datos ingresados por el usuario con atributos como required, type, min y max.

Datalists

En HTML5, también existe la etiqueta datalist, que se utiliza para proporcionar una lista de opciones para un campo de entrada. La lista de opciones se muestra cuando el usuario hace clic en el campo de entrada, lo que facilita la entrada de datos. La etiqueta datalist se utiliza con la etiqueta input y la lista de opciones se define con la etiqueta option, similar a la etiqueta select.

Ejemplo:

<label for="fruta">Elige una fruta:</label>
<input list="frutas" name="fruta">
<datalist id="frutas">
  <option value="Manzana">
  <option value="Banana">
  <option value="Cereza">
  <option value="Sandía">
</datalist>

En este ejemplo, la etiqueta input tiene un atributo list que coincide con el atributo id de la etiqueta datalist. La lista de opciones se define dentro de la etiqueta datalist con la etiqueta option. Cuando el usuario hace clic en el campo de entrada, se muestra la lista de opciones y el usuario puede seleccionar una opción o ingresar su propia entrada.

En resumen, HTML5 ofrece la etiqueta datalist para proporcionar una lista de opciones para un campo de entrada, lo que facilita la entrada de datos para el usuario. La etiqueta datalist se utiliza junto con la etiqueta input y la lista de opciones se define con la etiqueta option.

Jonathan Fernando Ramirez Valencia

Leidy Vaneza Vicente Ccorimanya

Input type submit.- Lo que hace es envia es el tipo de ese input y se convierte en un boton que ya viene con un texto que es como enviar.
Button.- Es la etiqueta boton, tambien podemos utilizar, tambien tiene un tipo.

Carlos Alfonso Romero Muñoz

la etiqueta input se usa para formularios y el botón para cualquier tipo de botón que se encuentre en la página

Carlos Alfonso Romero Muñoz

atributo value="" pone el texto que quieras como lo que está dentro de la etiqueta botón

Carlos Alfonso Romero Muñoz

a la etiqueta botón se le puede agregar type="submit" igual que al input para enviar la información

Carlos Alfonso Romero Muñoz

diferencia entre < input type="submit" >< button >

Carlos Alfonso Romero Muñoz

diferencia entre input submite y etiqueta botón

Yhover Graig Ticona Donaires

hasta ahora todo bien explicado

hrenatogiron

Etiquetas_ input type = submit , button tag (HTML).png

LUZBY NADYN CUSACANI VENTURA

![](

Adalberto Morales

Adalberto Morales

<input type= "radio"> es super importante

Adalberto Morales

<input type= "checkbox"> lo deben probar.

Alexander Josueph Mendoza Rodriguez

Input Type Submit vs Button

.
Existen dos tipos de botones
.

Submit: Para formularios
Button: Botón flexible para el uso
.
Se puede editar el texto del input sí:

<input type="submit" value="Nombre">

Tendrá un submit con texto de nombre
Un botón es más flexible porque es un elemento abierto

<button> </button>

Podemos hacer que el boton se comporte cómo input sí:

<button type="input">
Envíar
</button>

John Alassio

Bueno pero estamos de acuerdo que esto de seguro se va a modificar con el tiempo… <button type=""> es mas completo y genera las mismas funciones con mas opciones que <input type="">

Jeisson Espinosa

Información resumida de esta clase
#EstudiantesDePlatzi

Las dos etiquetas que usemos para crear botones son válidas y las dos nos permiten editar el texto que está dentro de ellos
La etiqueta de Button es más flexible y la puedo personalizar más
La etiqueta input de tipo submit podemos usarla para formulaios sencillos

Abidan Triguero Calle

RESUMEN CLASE 20:
INPUT TYPE SUBMIT VS BUTTON TAG

<!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>Button</title>
</head>
<body>
    <input type="submit" value="Nombre">
    <button type="submit">¿Que color te gusta?</button>
</body>
</html>

Andrés Hernández Morales

Este es todo el código resumido que recopilé en todas las clases hasta ahora. Quizá no lo entendáis, en todo caso podéis preguntarme.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8"> <!-- Reconoce caracteres-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Reconoce la escala de la pantalla de los dispositivos -->
    <link rel="stylesheet" href="./css/styles.css">
    <title>Curso Platzi</title>
</head>
<body>
    <hr>
    <div>
        <h1>Lista de productos</h1>
        <ul>
            <li>Frutas</li>
            <ol>
                <li>
                    <img src="https://upload.wikimedia.org/wikipedia/commons/3/34/Two_colors_of_onions.jpg" alt="Imagen de cebolla" width="50px">
                    <a href="https://www.google.com/search?q=manzana&oq=manzana&aqs=edge..0i433i512j69i57j0i512j0i433i512l2j0i131i433i512j0i433i512j0i512.1579j0j1&sourceid=chrome&ie=UTF-8" target="_blank">Manzana</a>
                
                </li>
                <li>
                    <img src="https://www.cuerpomente.com/medio/2020/11/10/manzana_a1c5bdb0_1200x1200.jpg" alt="Imagen de manzana" width="50px">
                    <a href="https://www.google.com/search?q=cebolla&sxsrf=APq-WBuIRECJ2dMgA4rMTknl1sT6DR7h3A%3A1648771958304&ei=dkNGYrOaEpaTwbkPyaCoiAY&ved=0ahUKEwizrY-XyvH2AhWWSTABHUkQCmEQ4dUDCA4&uact=5&oq=cebolla&gs_lcp=Cgdnd3Mtd2l6EAMyCAguEIAEELEDMgUIABCABDIICC4QgAQQsQMyCAgAEIAEELEDMggILhCABBCxAzIECAAQQzIFCAAQgAQyBQgAEIAEMgUILhCABDIFCAAQgAQ6BwgjEOoCECc6BAgjECc6BwguENQCEEM6BAguEEM6BwguELEDEEM6BwgAELEDEENKBAhBGABKBAhGGABQwwZY6A5ghRBoAXABeACAAZ4BiAGcCJIBAzAuN5gBAKABAbABCsABAQ&sclient=gws-wiz" target="_blank">Cebolla</a>
                </li>
            </ol>
        </ul>
        <ul>
            <li>Aseo</li>
            <ol>
                <li>Detergente</li>
                <li>Jabons</li>
            </ol>
        </ul>
    </div>
    <br> <hr>
    <div>
        <h1>Video </h1>
        <video preload="auto" controls width="500px">
            <source src="./pics/pexels-mikhail-nilov-7677379.mp4">
        </video>
    </div>
    <br> <hr>

    <form action=""> <!-- formulario comun -->
        <h1> Formulario comun: </h1>
        <label for="nombre">
            <span>Cual es tu nombre?</span>
            <input type="text" placeholder="Pon tu nombre" id="nombre" >
        </label>
        <label for="initialDate">
            <span>Cuando comenzaste a estudiar?</span>
            <input type="date" id="initialDate" >
        </label>
        <label for="age">
            <span>Cual es tu edad?</span>
            <input type="number" placeholder="Pon tu edad" min="0" id="age" >
        </label>
        <label for="schedule">
            <span>Cual es tu horario?</span>
            <input type="time" id="schedule">
        </label>
        <input type="submit" value="Enviar">
    </form>
    <br> <hr>
    <form action=""> <!-- Calendar --> 
        <h1> Calendar </h1>
        <!-- <label for="hour">
            <span>Hora</span>
            <input type="time" id="hour" name="hour">
        </label>
        <label for="day">
            <span>Dia</span>
            <input type="date" id="day" name="day">
        </label>
        <label for="week">
            <span>Semana</span>
            <input type="week" id="week" name="week">
        </label>
        <label for="month">
            <span>Mes</span>
            <input type="mounth" id="mounth" name="mounth">
        </label> -->
        <label for="calendar">
            <span>Calendario</span>
            <input type="datetime-local" id="calendar" name="calendar">
        </label>
        <input type="submit" value="Enviar">
    </form>
    <hr> <br>

    <form action="">
        <h1>Autocompletar informacion</h1>
       <label for="name">
           <span>Cual es tu nombre?</span>
           <input type="text" id="name" name="name" autocomplete="name">
       </label> 
       <label for="email">
           <span>Cual es tu correo?</span>
           <input type="email" id="email" name="email" autocomplete="email">
       </label> 
       <label for="country">
           <span>En que pais vives?</span>
           <input type="text" name="country" id="country" autocomplete="country">
       </label> 
       <label for="cp">
           <span>Cual es tu codigo postal?</span>
           <input type="text" id="cp" name="cp" autocomplete="postal-code">
       </label> 
       <input type="submit" value="Enviar">
    </form>
    <hr> <br>
    <!-- <select name="cursos" id="">
            <option value="JavaScript">JavaScript</option>
            <option value="HTML">HTML</option>
            <option value="CSS3">CSS3</option>
            <option value="Web Standard">Web Standard</option>
        </select> -->
        <h1>Formulario de Seleccion</h1>
        <input list="cursos" style="cursor: pointer;">
        <datalist id="cursos">
            <option value="JavaScript"></option>
            <option value="HTML"></option>
            <option value="CSS3"></option>
            <option value="Web Standard"></option>
        </datalist>
</body>
</html>

JORGE LUIS RODRIGUEZ FRAILE

Olincer Tadeus Garcia Cruz

Excelente forma de detallar el funcionamiento de un botón en html5.

Kendall Espinoza

**Diferencia entre **

<input type=“button” />
<button><button/>

¿Existe alguna diferencia entre ellos?

Si, aunque su finalidad es la misma, lanzar una acción(incluso podríamos englobar los <a></a> entre ellos también.) La diferencia principal va más por los estilos, la forma y la finalidad.

  input: Permite crear un simple botón que solo puede incluir texto en su atributo value y es lo que se muestra en el botón.
  button: Permite crear un botón pero con html dentro, o sea puedes incluir iconos, imágenes, etc.
  a: Permite incluir html dentro, iconos e imágenes, como si fuera un botón pero por definición y semántica los enlaces te deben llevar a otro lado(puede ser contenido traído por ajax) mientras que los botones deben realizar una tarea.

¿Habrá casos en los que se recomiende usar uno u otro?

Si, como mencioné en las diferencias, básicamente por cuestiones estéticas.

¿Ocurre algo si se usan combinados en un mismo formulario?

No, puedes usarlos de forma indistinta, incluso sin un formulario. Ambos se pueden usar fuera del formulario sin problemas.

¿Podría haber problemas de compatibilidad?

No, no habría ningún problema, ambos son parte del estándar de html y solo son como dos elementos diferentes, eso si se debe respetar las demás reglas de html como que no deben repetir el id.

José M. Veintimilla

Podemos personalizar el valor del input con el atributo value=””.
button es una etiqueta de botón mucho más flexible. La podemos usar también para enviar información usando el type=”submit”. Pero es recomendable usar input para enviar y button para cualquier otro tipo de botón.

David Díaz

Creo que debería estar incluida esta sección en la parte básica de HTML de tablas, les dejo mi enlace donde puede obtener información y conocimiento https://www.mclibre.org/consultar/htmlcss/html/html-tablas.html

Gianluca Reyes Cisneros

Input: Formularios
Button: Es una etiqueta mas flexible o mas fácil de utilizar
he igual lo puedes personalizar mas fácil.

Ambos son iguales tu puedes elegir el que mas te agrade 😄

ÁNGEL URIEL VELASCO MEJÍA

A todos nos surge una duda al intentar desarrollar una página web y ver en nuestro editor de código que se sugieren dos tipos de botones para los formularios:
1º

<input type="submit">

2º

<button>Enviar</button>

Pero esto no nos debe confundir, podemos decir que el input tipo submit es un botón predefinido para facilitar su pertenencia a los formularios, pero como los botones tienen mayores casos de uso, podemos utilizar los button para personalizar más fácilmente su aspecto fuera de un formulario y asignarle otro tipo de funciones.

Andres Salazar

A modo facil: <button>Soy bonito</button> no realiza acción ninguna pongase donde se ponga, <input type="submit" value="Soy útil en form"> sirve en formularios

Mi código de esta clase

<h2>input type="submit" vs button</h2>
<p>Submit:</p>
<input type="submit" value="Envíame" />
<p>Etiqueta button:</p>
<button>Presioname a ver que</button>
<!--
La etiqueta button sirve como contenedor de un texto que se renderizará visualmente como un botón, pero que no realiza acción alguna por si misma
-->

Dario Paladines

Se puede concluir que el input type = submit como menciona es solo para formularios y poder obtener esa info, mientras que el **Button ** por ejemplo para dar “aceptar” a alguna opción o para cambiar por medio del boton a otra pagina, etc. Ademas que a la etiqueta Button se le puede dar estilos, colores, mientras que el submit no

Mauricio Carrasco

He vuelto al curso para repasar unos conceptos. Aquí les dejo mi repaso en formularios 🤓

Codigo:

<!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>Form Simple</title>
    <link rel="stylesheet" href="" />
    <style>
      main {
        width: 100%;
        height: 90vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      form {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 40px;
        border: 1px solid black;
        border-radius: 20px;
        background-color: rgba(60, 179, 113, 0.4);
      }
      .ctn-unit {
        width: auto;
      }
      div {
        margin: 0;
        width: 90px;
        display: inline-block;
      }
      input,
      select {
        padding: 7px 16px;
        border: 1px solid black;
        border-radius: 20px;
        background-color: rgb(173, 255, 47);
        opacity: 0.6;
        color: black;
      }
      option {
        background-color: white;
      }
      ::placeholder {
        color: black;
        opacity: 1;
      }
      .submit {
        padding: 10px 30px;
        margin: 0px 10px;
        font-size: 14px;
        font-weight: bold;
        border-width: 1.5px;
        color: black;
        opacity: 0.8;
        text-align: center;
      }
      .submit:hover {
        cursor: pointer;
        color: black;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Form Simple</h1>
      <form action="">
        <div class="ctn-unit">
          <div>
            <label for="nombres">Nombres:</label>
          </div>
          <input
            type="text"
            id="nombres"
            placeholder="Nombres completos"
            autocomplete
            required
          /><br /><br />
        </div>
        <div class="ctn-unit">
          <div>
            <label for="email">Email:</label>
          </div>
          <input
            type="email"
            id="email"
            placeholder="Email"
            autocomplete
            required
          /><br /><br />
        </div>
        <div class="ctn-unit">
          <div>
            <label for="password">Contraseña:</label>
          </div>
          <input
            type="password"
            id="password"
            placeholder="Contraseña"
            autocomplete
            required
          /><br /><br />
        </div>
        <div class="ctn-unit">
          <div>
            <label for="birth">Nacimiento:</label>
          </div>
          <input type="date" id="birth" autocomplete required /><br /><br />
        </div>
        <div class="ctn-unit">
          <div>
            <label for="select">Múltiple:</label>
          </div>
          <select name="Opción múltiple" id="select">
            <option value="Opción 1">Opción 1</option>
            <option value="Opción 2">Opción 2</option>
            <option value="Opción 3">Opción 3</option></select
          ><br /><br />
        </div>
        <div class="ctn-unit">
          <div>
            <label for="datalist">Interactivo:</label>
          </div>
          <input list="datalist" placeholder="Elige una opción" />
          <datalist id="datalist">
            <option value="Opción 1"></option>
            <option value="Opción 2"></option>
            <option value="Opción 3"></option></datalist
          ><br /><br />
        </div>
        <input
          type="submit"
          class="submit"
          value="LOGIN"
          autocomplete
          required
        />
      </form>
    </main>
  </body>
</html>

Figuera Marifel

Para los botones que usamos para enviar los datos del formulario

para formularios: input type=submit
button type= es mas flexible para personalizar

Eber Eliud Rodriguez Alvarado

okay entoces:
<input type=“submit” value=“cambie el nombre”> //Se utilizara en formularios
<button type=“submit”>Enviar</button> //Se utilizara en las demas cosas

Laura carrillo

Input type submit: lo utilizaremos solo en los formularios

Button: lo utilizaremos en cualquier otro tipo de boton dentro de nuestro proyecto

Víctor Isaac Arias García

Estoy muy feliz con este curso hasta este punto bien detallado todas las etiquetas para HTML decidi comenzar este curso ya que mis conocimientos de HTML eran basados en lo que habia encontrado por inter y proyectos realizados hace años pero no eran con las mejores prácticas el código y tambien como complemento del curso de FrontEnd 2019

Javier Rázuri

Me parece que input es la forma más rápida para poner el botón ENVIAR. Porque ahí para personalizar puede ser cualquiera de las dos etiquetas.

Jonathan David Olivos

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit

Notes

<input type=“submit”>

<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

<input type="submit" value="Send Request">

An <input type="submit"> element’s value attribute contains a DOMString which is displayed as the button’s label. Buttons do not have a true value otherwise.

<button>

The <button> HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.

<button name="button">Press me</button>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

We would use <input> for submitting forms and the button tag is more flexible, not just for submitting forms but for other things.

Jose Montoya

<input type="submit" value="Enviar"/> <!-- Para uso simple como enviar formularios --> 
            <button type="submit">Enviar</button> <!-- más personalizable -->

Sara Salgado Casas

Rubén Santibañez Acosta

Existe una opcion más.

<input type="button" value="Enviar">

johanecheverri

<!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>Botones en desarrollo web</title>
</head>
<body>
    <main>
        <input type="submit" value="Nombre">
        <!-- input es para usarlo dentro de nuestros formularios de forma directa -->
        <button type="submit">si senior</button>
       <!--  ambos botones funcionan de la misma manera esta etiqueta es mas flexible y se permite personalizar por lo que la podemos usar para cualquier tipo de boton -->
    </main>
    
</body>
</html>

Mauricio Rojas Nova

Existen dos tipos de botones:

Para formularios:

<input type="submit" value="Nombre button" />

Para los demás botones:

<button type="submit">Nombre button</button>

Israel Lopez Lujan

Tanto la etiqueta input como button pueden usarse para crear botones.
Input con el atributo type=“submit” se recomienda para formularios.
Button es más flexiblem por lo que se puede aplicar en diferentes casos como en una barra de navegación por ejemplo.

Elio Omar Cadiz Meza

Button es muy versátil, pues puede cumplir cualquier función que le programemos; sin embargo, Submit ya esta preparado el envió de información de algún formulario.

<!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>Manipulado Botones</title>
</head>
<body>
    <main>
        <input type="submit" value="Nombre">
        <button type="submit">¿Qué color te gusta?</button>
    </main>
</body>
</html>

Etienne Santiago Samboni

Realicé un proyecto con lo aprendido hasta ahora en el curso 😊🤩

Espero implementarle CSS luego de completar el siguiente módulo.

Recibo Feedback de algunas correcciones o sugerencias que tengan respecto al código HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulario de Compras</title>
</head>
<body>
  <header>
    <h1>Formulario de Compras Tecnológicas</h1>
  </header>
  <main>
    <section>
      <h2>Productos Disponibles</h2>
      <article>
        <figure>
          <a href="https://www.apple.com/co/macbook-pro-16/" target="_blank">
            <img src="./img/macbook.png" width="300px" alt="MacBook">
          </a>
          <figcaption>MacBook Pro 16”</figcaption>
        </figure>
      </article>
      <article>
        <figure>
          <a href="https://www.apple.com/co/iphone-12-pro/" target="_blank">
            <img src="./img/iphone-12-pro-max.png" width="300px" alt="Iphone 12 Pro Max">
          </a>
          <figcaption>Iphone 12 Pro Max</figcaption>
        </figure>
      </article>
      <article>
        <figure>
          <a href="https://www.nintendo.com/es_LA/switch/system/" target="_blank">
            <img src="./img/nintendo-switch.png" width="300px" alt="Nintendo Switch">
          </a>
          <figcaption>Nintendo Switch</figcaption>
        </figure>
      </article>
      <article>
        <figure>
          <a href="https://www.dji.com/es/mavic-mini" target="_blank">
            <img src="./img/mavic-mini.png" width="300px" alt="Mavic Mini">
          </a>
          <figcaption>Dji Mavic Mini</figcaption>
        </figure>
      </article>
    </section>
    <section>
      <h2>¡Realiza tu pedido!</h2>
      <form>
        <article>
          <span>Producto</span>
            <input list="productos" required placeholder="Escoge el producto">
            <datalist id="productos">
              <option value="MacBook Pro 16”"></option>
              <option value="Iphone 12 Pro Max"></option>
              <option value="Nintendo Switch"></option>
              <option value="Dji Mavic Mini"></option>
            </datalist>
          <label for="cantidad">
            <span>Cantidad</span>
          <input type="number" id="cantidad" name="cantidad" min="1" max="10" value="1" required>
          </label>
        </article>
        <article>
          <h3>Datos Personales</h3>
            <label for="nombre">
              <span></span>
              <input type="text" id="nombre" name="nombre" placeholder="Nombre completo" autocomplete="name" required/>
            </label>
            <label for="email">
              <span></span>
              <input type="email" id="email" name="email" placeholder="Correo electrónico" autocomplete="email" required/>
            </label>
            <label for="direccion">
              <span></span>
              <input type="text" id="direccion" name="direccion" placeholder="Dirección de entrega" autocomplete="street-address" required/>
            </label>
            <label for="telefono">
              <span></span>
              <input type="tel" id="telefono" name="telefono" placeholder="Número de celular" autocomplete="tel" required/>
            </label>
        </article>
        <article>
          <h3>Datos de la entrega</h3>
          <label for="hora">
            <span>Hora de Entrega Sugerida</span>
            <input type="time" id="hora" name="hora">
          </label>
          <label for="notas">
            <span>Recomedaciones y notas</span>
            <input type="text" id="notas" name="notas" placeholder="Escribe tu nota">
          </label>
        </article>
          <input type="submit" value="Realizar pedido">
      </form>
    </section>
  </main>
  <footer>
    <p>Hecho con 💚 por @SoyEtiago</p>
  </footer>
</body>
</html>

Axcel Javier Rincón Gomez

<!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>Clases de Boton</title>
</head>
<body>
<h1><center> Clases de Boton </center> </h1>
<input type=“submit” value=“Nombre” />
<!–Boton para formularios–>
<p></p><button>
<b>Que color te gusta </b>
</button>
</body>
</html>

Axcel Javier Rincón Gomez