Etiqueta form e input
Documentación de la etiqueta <form>
La etiqueta de <form> indica el contenido del formulario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularios</title>
</head>
<body>
<form action="">
<label for="nombre">
<span>¿Cuál es tu nombre?</span>
<input type="text" id="nombre" placeholder="Tu nombre">
</label>
<label for="inicio-platzi">
<span>¿Qué día comenzaste en Platzi?</span>
<input type="date" id="inicio-platzi">
</label>
<label for="horario">
<span>¿En qué horario estudias?</span>
<input type="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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendario</title>
</head>
<body>
<form action="">
<label for="hora">
<span>Hora</span>
<input type="time" id="hora" name="hora" />
</label>
<label for="dia">
<span>Día</span>
<input type="date" id="datename="dia" />
</label>
<label for="semana">
<span>Semana</span>
<input type="week" id="semana" name="semana" />
</label>
<label for="mes">
<span>Mes</span>
<input type="month" id="mes" name="mes" />
</label>
<input type="submit">
</form>
</body>
</html>
- En este caso se realiza un formulario con información resumida:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendario</title>
</head>
<body>
<form action="">
<label for="calendario">
<span>Calendario</span>
<input type="datetime-local" id="calendario" name="calendario" />
</label>
<input type="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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendario</title>
</head>
<body>
<main>
<form action="">
<label for="nombre">
<span>¿Cuál es tu nombre?</span>
<input type="text" name="nombre" id="nombre" autocomplete="name" required>
</label>
<label for="correo">
<span>¿Cuál es tu correo?</span>
<input type="email" name="correo" id="correo" autocomplete="email" required>
</label>
<label for="pais">
<span>¿En cuál país vives?</span>
<input type="text" name="pais" id="pais" autocomplete="country" required>
</label>
<label for="cp">
<span>¿Cuál es tu código postal?</span>
<input type="text" name="cp" id="cp" autocomplete="postal-code" required>
</label>
<input type="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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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> -->
<input list="cursos">
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="CSS3"></option>
<option value="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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boton</title>
</head>
<body>
<input type="submit" value="Nombre">
<button type="submit">Qué color te gusta?</button>
</body>
</html>
Curso Definitivo de HTML y CSS
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
