Formularios en HTML 5
One SchwarztTrabajo1 de Octubre de 2022
379 Palabras (2 Páginas)104 Visitas
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Formularios</title></head>
<body>
<p><h3>Para los formularios se puede poner distintos tipos de < input > type. En función del tipo en los móviles varía el teclado táctil que te sale.</h3></p>
<ul>
<li><b>url</b> para links</li>
<li><b>tel</b> para teléfonos. Por la variedad de formatos del teléfono hay que complementarlo con <a href="#enlace">pattern</a> porque el tipo en si no pone ninguna restricción
<li><b>email</b> para emails</li>
<li><b>number</b> para números</li>
<li><b>password</b>: Para que te salga el número oculto</li>
<li><b>color</b>: para que el usuario pueda seleccionar un color de una paleta de colores</li>
<li><b>search</b>: Para poner búsquedas, simplemente pone una cruz a la derecha para borrar el contenido</li>
<li><b>range</b>: Para que te salga una barrita para escoger el número</li>
<li>Para poner fechas puedes poner <b>datetime</b> si quieres fecha, hora y zona horaria, <b>datetime-local</b> para fecha y hora para tu zona horaria, <b>date</b> solo la fecha, <b>month</b> solo el mes, <b>week</b> solo la semana y <b>time</b> solo la hora </li>
</ul><br/>
<p><h3>En <i>HTML5</i> existen nuevos atributos para la etiqueta input:</h3></p>
<ul>
<li><b><a id="enlace">autocomplete</a></b>: Especifica si el formulario debe tener el autocompletado activado o no. Se pone autocomplete="on" o "off"</li>
<li><b>autofocus</b>:Hace que salga el ratón ya en la casilla seleccionada</li>
<li><b>min y max</b>: Restrinje el valor de un campo numérico. Funciona también para fechas</li>
<li><b>step</b>: Fija el paso de los valores válidos, así si pones mínimo de 1 máximo 10 y paso de 2 solo valdrán 1,3,5,7 y 9</li>
<li><b>pattern</b>: Valida el campo en función de una expresión regular. Puedes usar el atributo title para que salga una ventana de ayuda si no cumple con la expresión</li>
<li><b>placeholder</b>:Para mostrar una pista de lo que el usuario debe poner en el campo. Se muestra mientras está vacío</li>
<li><b>required</b>: Marca el campo como obligatorio, debe ser cubierto para poder enviar el formulario</li>
</ul>
<br/><h2>Ejemplo</h2>
<form id="form.order">
<p>
<label for="Numero">Escoje un número entre 1 y 5 o te reviento</label>
<input type="number" name="Numero" min="1" max="5" placeholder="123"/>
</p>
<p>
<label for="email">Pon tu email</label>
<input type="email" name="email" placeholder="jamon@debellota.oink"/>
</p>
<p>
<label for="contraseña">Introduce tu contraseña (3 letras y 3 números) </label>
<input type="password" name="contraseña" pattern="[a-z]{3} [0-9] {3}" placeholder="qwe123"}/>
...