Son
una parte muy importante dentro de nuestros documentos web, ya que permiten
obtener datos del usuario, como por ejemplo un formulario de contacto, o de
pedidos.
Se
abren y cierran con la etiqueta “form”.
Dentro
pondremos etiquetas “label” para mostrar que solicitamos en el campo que
obtendrá el dato, estos los indicamos con la etiqueta “input”.
Dentro
de los inputs podemos incluir diferentes tipos: textos, números, fechas, campos
de selección, de opciones, botones, etc.
La
etiqueta form, indicara a que pagina mandara los datos y de que forma post o
get, con get los datos se verán dentro de la url en el navegador, con post no
serán visibles directamente es algo mas seguro.
El siguiente formulario incluye las bases de estos:
<!DOCTYPE html>
<html>
<head>
<title>
Formulario
</title>
</head>
<body>
<h1>Formulario</h1><br/>
<form action="#" method="post">
<legend>Formulario de contacto</legend>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" placeholder="Escribe aqui tu nombre"/><br/>
<label for="pass">Contraseña</label>
<input type="password" name="pass" required/><br/>
<textarea id="masDatos"></textarea><br/>
<input type="radio" name="genero" value="masculino">Masculino<br/>
<input type="radio" name="genero" value="femenino">Femenino<br/>
<select name="genero">
<option value="masculino">Masculino</option>
<option value="femenino">Femenino</option>
</select>
<label>Check</label>
<input type="checkbox" checked="checked"/><br/>
<input type="number" name="numero" min="1" max="80" step="2"><br/>
<input type="date"><br/>
<input type="color"><br/>
<hr/>
<input type="submit" value="Enviar"/>
</form>
</body>
</html>
Los
labels los asignamos a los campos de introducción de datos indicando el mismo
nombre, “label for=”nombre”.
El
“placeholder” que aparece en el input de nombre, indicara al usuario que debe
escribir en el, desaparece al tomar el foco en el.
En el
código podras ver como poner un input en modo password, para que al escribir se
vea el carácter * y no el que se este introduciendo, esto se realiza poniendo
el type=”password”.
El
resto del código es autoexplicativo, cópialo y haz pruebas añadiendo y quitando
opciones.
No hay comentarios:
Publicar un comentario