Formulario <form>
Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form>tiene los siguientes atributos:
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form>tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Ejercicio: Copie y pegue este código en un documento (Bloc de Notas) y grabe el archivo como EncuestaEuca.html
<html>
<head> <title> Formularios en páginas Web </title></head>
<BODY>
<CENTER> <H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1> </CENTER>
<form>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD>
<B>ESCRIBA SU NOMBRE COMPLETO </B> <BR>
<input name="nombre" type="text" value="Nombre Encuestado texto máximo 40"
size="40" maxlength="45" autofocus>
</TD>
<TD>
<B> ESCRIBA SU DIRECCION </B> <BR>
<input name="direccion" type="text" value="Dirección de residencia texto máximo de
100" size="100"
maxlength="100">
</TD>
</TR>
<TR>
<TD>
<B> SELECCIONE EL SEXO </B> <BR>
MASCULINO <input name="SEXO" type="radio" value="masculino"> <BR>
FEMENINO <input name="SEXO" type="radio" value="femenino" checked>
</TD>
<TD>
<B> SELECCIONE LA ACTIVIDAD O ACTIVIDADES REALIZADA(S) </B> <BR>
ESTUDIO<input name="ACTIVIDAD" type="checkbox" value="ESTUDIO"> <BR>
TRABAJO<input name="ACTIVIDAD" type="checkbox" value="TRABAJO"> <BR>
AMA DE CASA<input name="ACTIVIDAD" type="checkbox" value="AMACASA"> <BR>
ZOILA (Soy la que hace los mandados, Soy la que lava los trastos, Soy la que ...)<input
name="ACTIVIDAD" type="checkbox" value="ZOILA"> <BR>
OTROS<input name="ACTIVIDAD" type="checkbox" value="OTROS"><BR>
</TD>
</TR>
<TR>
<TD>
<B> SELECCIONE LA CIUDAD </B>
<select name="ciudad">
<option selected>--- Elige la Ciudad ---</option>
<option>Cartagena</option>
<option>Barranquilla</option>
<option>Santa Marta</option>
</select>
</TD>
<TD>
<select name="animal" size="4" multiple>
<option selected>-- Que mascota tienes --</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
<option>Ninguno</option>
</select>
</TD>
</TR>
<TR>
<TD>
<B> Fecha de nacimiento</B> <BR>
<input type="date" name="fecha" value="dd/mm/aaaa" />
</TD>
<TD >
Edad Actual: <input type="number" name="edad" min="18" max="65" placeholder="18
-65"
</TD>
</TR>
<TR>
<TD>
<B> Registrate en nuestra pagina, Email:</B> <BR>
<input type="email" name="correo" multiple >
</TD>
<TD >
Contraseña: <input type="password" name="clave" >
</TD>
</TR>
<TR>
<TD>
<B> Escriba las observaciones que tenga sobre el colegio </B> <BR>
<textarea name="Observaciones" cols="80" rows="3">
Escribe tus observaciones
</textarea>
</TD>
<TD>
<B> Escriba la hora en que realizo la encuenta</B> <BR>
<input type="time" name="horaInicio" value="hh:mm" />
</TR>
<TR>
<TD align="CENTER">
<BR>
<input name="SUBMIT" type="submit" value="ENVIAR">
<BR><BR>
</TD>
<TD align="CENTER">
<BR>
<input type="reset" value="Nuevo" />
<BR><BR>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</html>
<head> <title> Formularios en páginas Web </title></head>
<BODY>
<CENTER> <H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1> </CENTER>
<form>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD>
<B>ESCRIBA SU NOMBRE COMPLETO </B> <BR>
<input name="nombre" type="text" value="Nombre Encuestado texto máximo 40"
size="40" maxlength="45" autofocus>
</TD>
<TD>
<B> ESCRIBA SU DIRECCION </B> <BR>
<input name="direccion" type="text" value="Dirección de residencia texto máximo de
100" size="100"
maxlength="100">
</TD>
</TR>
<TR>
<TD>
<B> SELECCIONE EL SEXO </B> <BR>
MASCULINO <input name="SEXO" type="radio" value="masculino"> <BR>
FEMENINO <input name="SEXO" type="radio" value="femenino" checked>
</TD>
<TD>
<B> SELECCIONE LA ACTIVIDAD O ACTIVIDADES REALIZADA(S) </B> <BR>
ESTUDIO<input name="ACTIVIDAD" type="checkbox" value="ESTUDIO"> <BR>
TRABAJO<input name="ACTIVIDAD" type="checkbox" value="TRABAJO"> <BR>
AMA DE CASA<input name="ACTIVIDAD" type="checkbox" value="AMACASA"> <BR>
ZOILA (Soy la que hace los mandados, Soy la que lava los trastos, Soy la que ...)<input
name="ACTIVIDAD" type="checkbox" value="ZOILA"> <BR>
OTROS<input name="ACTIVIDAD" type="checkbox" value="OTROS"><BR>
</TD>
</TR>
<TR>
<TD>
<B> SELECCIONE LA CIUDAD </B>
<select name="ciudad">
<option selected>--- Elige la Ciudad ---</option>
<option>Cartagena</option>
<option>Barranquilla</option>
<option>Santa Marta</option>
</select>
</TD>
<TD>
<select name="animal" size="4" multiple>
<option selected>-- Que mascota tienes --</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
<option>Ninguno</option>
</select>
</TD>
</TR>
<TR>
<TD>
<B> Fecha de nacimiento</B> <BR>
<input type="date" name="fecha" value="dd/mm/aaaa" />
</TD>
<TD >
Edad Actual: <input type="number" name="edad" min="18" max="65" placeholder="18
-65"
</TD>
</TR>
<TR>
<TD>
<B> Registrate en nuestra pagina, Email:</B> <BR>
<input type="email" name="correo" multiple >
</TD>
<TD >
Contraseña: <input type="password" name="clave" >
</TD>
</TR>
<TR>
<TD>
<B> Escriba las observaciones que tenga sobre el colegio </B> <BR>
<textarea name="Observaciones" cols="80" rows="3">
Escribe tus observaciones
</textarea>
</TD>
<TD>
<B> Escriba la hora en que realizo la encuenta</B> <BR>
<input type="time" name="horaInicio" value="hh:mm" />
</TR>
<TR>
<TD align="CENTER">
<BR>
<input name="SUBMIT" type="submit" value="ENVIAR">
<BR><BR>
</TD>
<TD align="CENTER">
<BR>
<input type="reset" value="Nuevo" />
<BR><BR>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</html>
Debe aparecer la siguiente información:
Nota: Si tiene cuenta con gmail, entre a ella. Puede notar que al dar clic en el botón
ENVIAR, se activa el correo y muestra la información capturada. Lista para enviar al correo.
