Diseño Web
Clase 2
SENA - 2018
Formularios
Los formularios HTML se utilizan para recolectar información del usuario
La etiqueta <form> define un formulario HTML
Los formularios contienen elementos de formulario tales como:
- Cajas de texto
- Botones de opciones
- Casillas de verificación
- Listas desplegables
- Áreas de texto
- Botones
<label><input>
El elemento input cuenta con muchas variaciones, depende de como se especifica su atributo: type
Caja de texto
<label for="user">Usuario</label>Caja de texto (contraseña)
<input type="password" name="pass"/>Botón de opción
<input type="text" name="user"/><label for="pass">Contraseña</label>
<input type="checkbox" name="deporte"
value="F"/> Fútbol<input type="radio" name="genero"
value="F" /> Femenino
Casilla de verificación
<input type="checkbox" name="deporte"
value="B"/> Baloncesto<input type="radio" name="genero"
value="M" checked /> Masculino
Botón de envío de formulario
<input type="submit" value="Registrar">
<select>
El elemento select define una lista desplegable
<select name="cursos">
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="C#">C#</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
</select>
<textarea>
El elemento textarea define un área de texto
<button>
El elemento button define un botón de propósito general
<textarea name="comentarios" rows="5" cols="30">
Escribe tu comentario
</textarea><button type="button">
Presioname!</button>
<fieldset>
El elemento fieldset agrupa información relacionada en un formulario
<form>
<fieldset>
<legend>Información personal:</legend>
<label for="nombre">Nombre:<br>
<input type="text" name="nombre" value="Johnattan">
<br>
<label for="apellido">Apellido:<br>
<input type="text" name="apellido" value="Jaramillo">
<br><br>
<input type="submit" value="Registrar">
</fieldset>
</form><legend>
Agrupando elementos de formulario con fieldset
El elemento legend define un título para el elemento fieldset
action
Atributo que especifica archivo/página que recibirá los datos del formulario
method
Enviando información al servidor
Atributo que especifica el método de envío de los datos al servidor
get: envía los datos visibles en la URL
post: envía los datos ocultos
<form action="recibedatos.html" method="get">get
<form action="recibedatos.html" method="get">
<label for="nombre">Nombre:<label><br>
<input type="text" name="nombre" value="Johnattan">
<br>
<label for="apellido">Apellido:<label><br>
<input type="text" name="apellido" value="Jaramillo">
<br><br>
<input type="submit" value="Enviar datos">
</form>post
Enviando información al servidor
