Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Input type submit vs. Button tag

20/55
Recursos

Aportes 168

Preguntas 23

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

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!

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.

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

![](

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>

Aclarada esta gran duda, puedo morir en paz鈥 adi贸s Sr. Stark 锛滐紙锛撅紞锛撅級锛
.
Saludos!
Sam Mart铆nez(锟o箖锟)

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

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

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

Leer mas sobre input submit, y button tag 馃槂

un aporte que encontr茅鈥
espero les sirva

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.

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

Compa帽eros si desean practicar sobre los formularios pueden ir 馃憠 aqui

Notas de la clase

Un peque帽o resumen de lo aprendido de HTML

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>

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

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 鈥榮ubmit鈥, 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>

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

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

B谩sicamente, deber铆amos usarlos as铆:

  • input para formularios.
  • button para otro tipo de botones.

vamos por CSS

Por fin iremos a CSS

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

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.

馃惐鈥嶐煉 <button> permite representar un elemento cliqueable de tipo bot贸n que puede ser utilizado en formularios.

Quisiera agregar que la etiqueta buttoncuando se utiliza como type=鈥渂utton鈥 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

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

Clase 20 - Input type submit vs. Button tag


驴Qu茅 formas hay para crear botones en HTML?

  • Con la etiqueta <input type=鈥渟ubmit鈥>
  • 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= 鈥渟ubmit鈥>?

  • 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=鈥渟ubmit鈥> y <button>?

  • Su flexibilidad. Mientras que la etiqueta <input type=鈥渟ubmit鈥> solo la podemos usar para enviar informaci贸n la etiqueta <button> nos permite hacer muchas m谩s cosas y es m谩s editable.

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

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=鈥渟ubmit鈥>, pero el navegador no lo entiende de esa manera, y por defecto <button> lo entiende como otro 鈥渟ubmit鈥 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=鈥渂utton鈥.

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

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

Excelente la parte de HTML, ahora vamos con CSS _

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.

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>

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

//botones
// boton de enviar como informacion en Formularios
<input type=鈥渟ubmit鈥 value=鈥淣ombre鈥>

// cualquier otro boton mas personalizado
<button type=鈥渟ubmit鈥>驴que color te gusta?</button>

Este es la 煤ltima parte de HTML y me llamaba la atenci贸n que no se haya incluido el uso de tablas鈥unque 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>

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

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._%+-][email protected][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.

.

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

  • 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.

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

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

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

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

diferencia entre input submite y etiqueta bot贸n

hasta ahora todo bien explicado

![](

<input type= "radio"> es super importante
<input type= "checkbox"> lo deben probar.

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>

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

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

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>

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>

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

**Diferencia entre **

  1. <input type=鈥渂utton鈥 />

  2. <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.
  • 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=鈥漵ubmit鈥. Pero es recomendable usar input para enviar y button para cualquier otro tipo de bot贸n.

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

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 馃槃

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.

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

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 鈥渁ceptar鈥 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

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>

Para los botones que usamos para enviar los datos del formulario

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

okay entoces:
<input type=鈥渟ubmit鈥 value=鈥渃ambie el nombre鈥> //Se utilizara en formularios
<button type=鈥渟ubmit鈥>Enviar</button> //Se utilizara en las demas cosas

Input type submit: lo utilizaremos solo en los formularios

vs

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

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

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.

Notes

<input type=鈥渟ubmit鈥>

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

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

An <input type="submit"> element鈥檚 value attribute contains a DOMString which is displayed as the button鈥檚 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.
<input type="submit" value="Enviar"/> <!-- Para uso simple como enviar formularios --> 
            <button type="submit">Enviar</button> <!-- m谩s personalizable -->

Existe una opcion m谩s.

<input type="button" value="Enviar">
<!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>

Existen dos tipos de botones:

Para formularios:

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

Para los dem谩s botones:

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

Tanto la etiqueta input como button pueden usarse para crear botones.
Input con el atributo type=鈥渟ubmit鈥 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.

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>

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>

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Clases de Boton</title>
</head>
<body>
<h1><center> Clases de Boton </center> </h1>
<input type=鈥渟ubmit鈥 value=鈥淣ombre鈥 />
<!鈥揃oton para formularios鈥>
<p></p><button>
<b>Que color te gusta </b>
</button>
</body>
</html>

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Registrarse</title>
</head>
<body>
<fieldset>
<legend><b> Datos personales</b></legend>
<form action="">
<label for=鈥淣ombre鈥><br>
<span>Ingrese su nombre:</span>
<input type=鈥渢ext鈥 id=鈥淣ombre鈥 placeholder=" Nombre" size=鈥20鈥/>
</label>

        <label for="Apellido"><p></p>
                <span>Ingrese su Apellido:</span>  
            <input type="text" id="Apellido" placeholder=" Apellido" size="20" />
        </label>
        <p></p><span>Tipo de Documento:</span>
            <select name="Tipo de Document">
                <option value="1">--SELECCIONAR--</option>
                <option value="2"> Cedula de ciudadania </option>
                <option value="3"> Cedula de extranjeria </option>
                <option value="4"> Pasaporte </option>
                <option value="5"> Permiso especial </option>
                <option value="4"> Registro civil </option>
                <option value="5"> Tarjeta de identidad </option>

        </select>
        <label for="Documento de identidad:"><p></p>
                <span>Documento de identidad:</span>  
            <input type="text" id="Documento de identidad" placeholder="Documento de identidad" size="28">
        </label>    
        <label for="Fecha de nacimiento:"><p></p>
                <span>Fecha de nacimiento:</span>  
            <input type="date" id="Fecha de nacimiento" size="15">
        </label>   
        <label for="Direcci贸n:"><p></p>
                <span>Direcci贸n:</span>  
            <input type="text" id="direccionpersona" placeholder="Direcci贸n" size="50">
        </label>
        <label for="correo"><p></p>
                <span>Ingrese su correo:</span>
            <input type="text"email name="correo" id="correo" placeholder="Correo" autocomplete="correo" required size="20" />
        </label>
        
       <!--  <p></p><label for="pais"><p></p>
                <span>Selecciones su pais:</span>
            <input type="text" name="pais" id="pais" autocomplete="country" required size="20" />
        </label> -->

        <p></p><span>Selecciones su pais:</span>
        <select name="pais" >
            <option value="1">--SELECCIONAR-- </option>
            <option value="2">Argentina </option>
            <option value="3">M茅xico </option>
            <option value="4">Guatemala </option>
            <option value="5">Honduras </option>
            <option value="7">El Salvador </option>
            <option value="8">Venezuela </option>
            <option value="9">Colombia </option>
            <option value="10">Cuba </option>
            <option value="11">Bolivia </option>
            <option value="13"> Espa帽a</option>
            <option value="14">Ecuador </option>
            <option value="15">Paraguay </option>
            <option value="16">Uruguay </option>
            <option value="17">Per煤 </option>
            <option value="18">Chile </option>
          </select>
        
        <label for="cp"><p></p>
                <span>Cual es tu codigo postal:</span>
            <input type="text" name="cp" id="cp" placeholder="Codigo Postal" autocomplete="postal-code" required size="15"/>
        </label>
        <label for="inicio-platzi"><p></p>
                <span>Que dia Comenzaste en Platzi: </span>  
            <input type="date" id="inicio-platzi" size="20" />
        </label>
        <label for="Horario"><p></p>
                <span>  En que horario estudias: </span>  
            <input type="time" id="Horario" size="20" />
        </label><P></P>
        <label for="comentarios">Comentarios:</label><br>
            <textarea name="comentarios" rows="5" cols="40" id="comentarios"></textarea><p></p>
    </form>
    </div>
        <a href="./index1.html">
            <input type="button" value="Volver"></a>
        <a href="https://mail.google.com/mail/u/0/?pli=1#inbox?compose=new" >
            <input type="button" name="Enviar_Correo" value="Enviar"></a>
        <a href="./index.html">
            <input type="button" value="Borrar"></a>
        <a href="https://www.tutorialesprogramacionya.com/htmlya/">
            <input type="button" value="Complemetar HTMl"></a>
        <a href="https://www.mclibre.org/consultar/htmlcss/html/html-formularios.html">
            <input type="button" value="Formularios en HTMl5"></a>

</html>
<!-- <center><input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥>
<input type=鈥渢ext鈥><p></p>
</center>鈥>

Submit vs button

El elemento button considerenlo como un bot贸n gen茅rico. Suele usarse para personalizarlo con mas detalles usando Javascript y CSS.

Ademas el input permite solo texto sin formato (solo podemos modificar lo que dice con el atributo 鈥渧alue鈥 pero no el estilo de ese texto. En cambio el button permite toda la funcionalidad de html y css para cambiar su texto.

desconoc铆a por completo el atributo value para colocar nombre al boton 馃 Me encanta este curso y tenia duda de verlo porque ya se Html y Css... uno nunca deja de aprender.

Es importante sabe el como se puedes usar submit y button鈥 hoy me doy cuenta que lo he estado usando a de forma desordenada, por decirlo de una forma.
muy buen curso鈥

Excelente la aclaraci贸n, dos maneras interesantes de implementar botones en el proyecto.

Podemos utilizar dos tipos diferentes de botones, como el input submit para formularios y el button para los que no son formularios, si no otras partes de nuestra p谩gina Web.

Genial, ya puedo continuar con CSS

<!DOCTYPE html>
<html lang=鈥渆s鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渄esciption鈥 content=鈥淓sta p谩gina te mostrar谩 lo que se hizo en la clase 20鈥>
<meta name=鈥渞obots鈥 content=鈥渋ndex,follow鈥>
<title>Me dio hambrita</title>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, inictial-scale=鈥>
</head>

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

    <button type="submit">Qu茅 color te gusta?</button>
</body>
</html>

He visto tambi茅n que utilizan el elemento anchor como bot贸n. 馃 驴es una buena pr谩ctica?