Formularios HTML

27879

Etiqueta form e input

Documentación de la etiqueta <form>
La etiqueta de <form> indica el contenido del formulario.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Formularios</title></head><body><formaction=""><labelfor="nombre"><span>¿Cuál es tu nombre?</span><inputtype="text"id="nombre"placeholder="Tu nombre"></label><labelfor="inicio-platzi"><span>¿Qué día comenzaste en Platzi?</span><inputtype="date"id="inicio-platzi"></label><labelfor="horario"><span>¿En qué horario estudias?</span><inputtype="time"id="horario"></label></form></body></html>

⠀
Calendar

Documentación de la etiqueta <input>
Para hacer un formulario con calendario existen 2 formas:

En este caso se detalla cada dato del calendario:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Calendario</title></head><body><formaction=""><labelfor="hora"><span>Hora</span><inputtype="time"id="hora"name="hora" /></label><labelfor="dia"><span>Día</span><inputtype="date"id="datename="dia" /></label><labelfor="semana"><span>Semana</span><inputtype="week"id="semana"name="semana" /></label><labelfor="mes"><span>Mes</span><inputtype="month"id="mes"name="mes" /></label><inputtype="submit"></form></body></html>

En este caso se realiza un formulario con información resumida:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Calendario</title></head><body><formaction=""><labelfor="calendario"><span>Calendario</span><inputtype="datetime-local"id="calendario"name="calendario" /></label><inputtype="submit"></form></body></html>

⠀
Autocomplete y require

Atributo autocomplete: Se autocompleta el formulario con información previamente registrada.
Atributo required: Se exige que se llene el campo.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Calendario</title></head><body><main><formaction=""><labelfor="nombre"><span>¿Cuál es tu nombre?</span><inputtype="text"name="nombre"id="nombre"autocomplete="name"required></label><labelfor="correo"><span>¿Cuál es tu correo?</span><inputtype="email"name="correo"id="correo"autocomplete="email"required></label><labelfor="pais"><span>¿En cuál país vives?</span><inputtype="text"name="pais"id="pais"autocomplete="country"required></label><labelfor="cp"><span>¿Cuál es tu código postal?</span><inputtype="text"name="cp"id="cp"autocomplete="postal-code"required></label><inputtype="submit"></form></main></body></html>

⠀
Select

Documentación de la etiqueta <select>
Documentación de la etiqueta <datalist>

Existen 2 formas para, pero por buenas prácticas se recomienda trabajar con la etiqueta <datalist>.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Select</title></head><body><main><!-- <select name="cursos" id="">
                <option value="JavaScript">JavaScript</option>
                <option value="HTML5">HTML5</option>
                <option value="CSS3">CSS3</option>
                <option value="Web Standards">Web Standards</option>
            </select> --><inputlist="cursos"><datalistid="cursos"><optionvalue="JavaScript"></option><optionvalue="HTML5"></option><optionvalue="CSS3"></option><optionvalue="Web Standards"></option></datalist></main></body></html>

⠀
Input type submit vs. Button tag

Existen 2 tipos de botones:

Input type submit
Button

Ambas tienen la misma función.
<button> puede llegar a ser más flexible a la hora de trabajar fuera de un formulario.

Documentación de la etiqueta <button>

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Boton</title></head><body><inputtype="submit"value="Nombre"><buttontype="submit">Qué color te gusta?</button></body></html>