Ejemplos de Formulario HTML
Cuando enviamos información desde una web lo hacemos mediante un formulario de contacto. Los formularios son pequeños fragmentos de código que se encargan de ‘atrapar’ los datos que escribamos en sus campos de textos y de enviarlos a un servidor.
Los formularios pueden solicitar cualquier cantidad de información al usuario, todo dependerá del objetivo que cumpla dentro de una web. Por ejemplo, si solo se quiere brindar la oportunidad de enviar un mensaje privado al administrador de un sitio web, el formulario generalmente tendrá campos para el nombre, correo y uno para el mensaje en cuestión, además, tendrá un botón para enviar el mensaje.
Si se requiere el registro de un usuario para algún tipo de trámite gubernamental o de un banco, el formulario es más extenso y puede preguntarnos hasta nuestra raza, tipo de sangre, entre otros datos.
En cualquiera de los casos, el formulario estará diseñado en HTML, que es un lenguaje de etiquetas que se convierte en la ‘columna vertebral’ del diseño web y al que se le unen más lenguajes para definir un diseño más adaptado a los estándares actuales además de agregarle mayor funcionalidad al código HTML.
Ejemplos de formulario HTML
- Ejemplo 1
<FORM ACTION=»http://miserver.midominio.mipais/cgi-bin/test2-cgi» METHOD=POST>
<CENTER>
<TABLE BORDER>
<TR>
<TD>Nombre:</TD>
<TD> <INPUT TYPE=»text» NAME=»nombre» SIZE=18 MAXLENGTH=18> F.Nac.:
<INPUT TYPE=»text» NAME=»edad» SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE=»text» NAME=»dni» SIZE=8 MAXLENGTH=8></TD>
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE=»text» NAME=»apellidos» SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Calle y número:</TD>
<TD> <INPUT TYPE=»text» NAME=»domicilio» SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Código Postal:</TD>
<TD> <INPUT TYPE=»text» NAME=»postal» SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE=»text» NAME=»localidad» SIZE=36 MAXLENGTH=36></TD>
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE=»text» NAME=»provincia» SIZE=20 MAXLENGTH=20> Teléfono:
<INPUT TYPE=»text» NAME=»telefono» SIZE=19 MAXLENGTH=19></TD>
<TR>
<TD>Opción:</TD>
<TD> <SELECT NAME=»OPCION»>
<OPTION>OPCION 1
<OPTION>OPCION 2
<OPTION>OPCION 3
<OPTION>OPCION 4
<OPTION>OPCION 5
</SELECT>Escoja una opción</TD>
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD> <TEXTAREA NAME=»coment» ROWS=2 COLS=48></TEXTAREA></TD>
<TR>
<TD><B>Pulse aquí:</B></TD>
<TD ALIGN=CENTER>
<INPUT TYPE=»submit» VALUE=»Enviar datos «>
<INPUT TYPE=»reset» VALUE=»Borrar los datos»></TD>
</TABLE>
</CENTER>
</FORM>
- Ejemplo 2
<form action=»mailto:direccion@correo.com» method=»post»
enctype=»text/plain»>
<table border=»0″>
<tr height=»50″>
<td>Nombre</td>
<td>
<input name=»nombre» type=»Text» size=»18″ maxlength=»18″>
</td>
</tr>
<tr height=»50″>
<td>apellidos</td>
<td>
<input type=»text» name=»apellidos» size=»48″ maxlength=48″>
</td>
</tr>
<tr height=»50″>
<td>f. nacimiento </td>
<td>
<input name=»f_n» type=»text» size=»18″ maxlength=»18″>
</td>
</tr>
<tr height=»50″>
<td>calle y número</td>
<td>
<input type=»text» name=»domicilio» size=»48″ maxlength=»48″>
</td>
</tr>
<tr height=»50″>
<td>código postal</td>
<td>
<input type=»text» name=»cp» size=»5″ maxlength=»5″>
</td>
</tr>
<tr height=»50″>
<td>provincia</td>
<td>
<input type=»text» name=»ciudad» size=»20″ maxlength=»20″>
Teléfono
<input type=»text» name=»telefono» size=»9″ maxlength=»9″>
</td>
</tr>
<tr height=»50″>
<td>Sexo</td>
<td>Hombre <input type=»radio» name=»sexo» value=»H»>
Mujer <input type=»radio» name=»sexo» value=»M»>
Estado Civil
<select name=»estado_civil»>
<option>Soltero
<option>Casado
<option>Divorciado
<option>Otro
</select>
<td>
</tr>
<tr height=»50″>
<td>Idiomas</td>
<td>
<input type=»checkbox» mane=»idiomas» value=»E»> Español
<input type=»checkbox» mane=»idiomas» value=»F»> Francés
<input type=»checkbox» mane=»idiomas» value=»I»> Inglés
<input type=»checkbox» mane=»idiomas» value=»A»> Alemán
</td>
</tr>
<tr height=»50″>
<td>Comentarios <br> Personales</td>
<td>
<textarea name=»coment» rows=»2″ cols=»44″> </textarea>
</td>
</tr>
<tr height=»50″>
<td>Pulse aqui</td>
<td align=»center»>
<input type=»submit» value=»enviar los datos»>
<input type=»reset» value=»borrar los datos»>
</td>
</tr>
</table>
</form>