Vamos a profundizar más en la construcción de formularios en html y vamos a aprender a personalizarlos para poder adaptarlos a las necesidades de nuestro sitio y mejorar la interactividad con nuestros visitantes.
Listas de opciones
Sirven para permitir seleccionar una opción entre varias de las que se ofrecen en el formulario, es lo que se denomina un desplegable porque se despliegan varias opciones de un mismo campo de contenido y solamente se puede seleccionar uno.
Utilizaremos la siguiente sintaxis
<select name="situación laboral ">
<option>Por cuenta ajena </option>
<option>Autónomo </option>
<option>Desempleado </option>
<option>jubilado </option>
</select>
Los atributos que podemos utilizar para personalizar las casillas,son:
size Indica el número de valores mostrados a la vez en la lista.
multiple Permite la selección de más varios elementos de la lista.
selected Indica que la opción que lo presenta esta elegida por defecto.
value Define el valor de la opción que será enviado al programa o correo electrónico si el usuario elige esa opción.
Botones de radio
La diferencia con la anterior radica básicamente en que la forma en las que estan expuests las opciones obliga al usuario a elegir la que esta predeterminada.Ejemplo
<input type="radio" name="trabajo" value="1">Por cuenta ajena
<br>
<input type="radio" name="trabajo" value="2">Autonomo
<br>
<input type="radio" name="trabajo" value="3">Desempleado
<br>
<input type="radio" name="trabajo" value="4">Jubilado
Cajas de validación
Este elemento puede ser activado o desactivado por el visitante unicamente marcando la casilla con un clik.ejemplo
<input type="checkbox" name="opinion">Me ha gustado el tutorial
Botón de envío de formulario
Sirve evidentemente para que el visitante nos envie el formulario a nuestro email.Sintaxis
<input type="submit" value="Enviar">
Botón de borrado (botón de reset)
Este botón nos permitirá borrar el formulario por completo.Ejemplo
<input type="reset" value="Borrar">
Datos ocultos (campos hidden)
Se detentan en el codigo fuente pero no se muestran al usuario
<input type=hidden name="sitio" value=" http://hackersl4nd.blogspot.com ">
Botones normales
<input type=button value="Ejemplo de botón ">
Otras etiquetas de interes
<FIELDSET>... </FIELDSET> muestra un rectángulo en la parte que queramos
<LABEL>... </LABEL> cambia el estado del campo de confirmación
<BUTTON>... </BUTTON> Se pueden introducir en ellas elementos como imágenes o tablas.
Ejemplo de un formulario completo
Pues aquí os pongo la sintaxis de lo que seria un formulario completo usando los atributos principales.
<form action="malito:mi correo @yahoo.com" method="post" enctype="text/plain">
Nombre <input type="text" name="nombre" size="30" maxlength="100">
<br>
Email <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Población <input type="text" name="poblacion" size="20" maxlength="60">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Varon" checked> Hombre
<br>
<input type="radio" name="sexo" value="Hembra"> Mujer
<br>
<br>
Situación laboral
<br>
<select name="utilizacion">
<option value="1">Por cuenta ajena
<option value="2">Autonomo
<option value="3">Varias Desempleado
<option value="4">Jubilado
</select>
<br>
<br>
Comentarios sobre el blog
<br>
<textarea cols="30" rows="7" name="comentarios"></textarea>
<br>
<br>
<input type="checkbox" name="recibir_info" checked>
Deseo recibir notificación de las novedades de publicación.
<br>
<br>
<input type="submit" value="Enviar formulario">
<br>
<br>
<input type="Reset" value="Borrar todo">
</form>
Se vería de esta forma:
Articulo by S3L3N1TY
No hay comentarios :