Men煤 Cerrar

Como Crear Formularios en 馃挗 HTML

html

Formularios

Los formularios interactivos permiten a los autores de p谩ginas Web poner elementos interactivos en sus p谩ginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas.

El lector escribe la informaci贸n rellenando campos o haciendo clic sobre botones, y luego presiona un bot贸n de env铆o para enviarla a una direcci贸n URL聽que se suele dirigir a una direcci贸n de correo electr贸nico o a un script din谩mico Web como PHP, ASP o CGI.

La etiqueta FORM

 

Los formularios est谩n delimitados con la etiqueta <FORM> … </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:

  • METHOD indica c贸mo se enviar谩n las respuestas
    芦POST禄 es el valor que env铆a los datos al agente de procesamiento almacen谩ndolos en el cuerpo del formulario, en tanto que 芦GET禄 env铆a los datos agreg谩ndolos a la direcci贸n URL y separ谩ndolos de la direcci贸n con un signo de interrogaci贸n (para aprender m谩s sobre los m茅todos POST y GET, consulte el art铆culo sobre protocolo HTPP)
  • ACTION indica la direcci贸n a la que se enviar谩 la informaci贸n (un script CGI o direcci贸n de correo electr贸nico (mailto:direcci贸n_de_correo_e@equipo))

Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica c贸mo se codifican los datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/x-www-form-urlencoded) es el 煤nico valor v谩lido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar.

Esta es la sintaxis para la etiqueta FORM:

<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM>

 

Aqu铆 hay algunos ejemplos de las etiquetas FORM:

<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">

<FORM METHOD=GET ACTION=禄http://www.commentcamarche.net/cgi-bin/script.cgi禄>

Dentro de la etiqueta FORM

La etiqueta FORM act煤a como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviar谩n a la direcci贸n URL indicada en el atributo ACTION de la etiqueta FORM, por el m茅todo indicado en el atributo METHOD.

Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los m谩s interesantes. Estos elementos interactivos son:

  • La etiqueta INPUT: Todos los botones y casillas de texto
  • La etiqueta TEXTAREA: una casilla de texto
  • La etiqueta SELECT: una lista de opciones m煤ltiples
Te Recomendamos:  Codigos y Manual para Hojas de Estilo 馃摑 (CSS)

Env铆o de datos

 

Cuando se env铆a un formulario (haciendo clic en el bot贸n de env铆o), los datos del formulario se env铆an a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual (芦=禄) y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el s铆mbolo de uni贸n (芦&禄). Por lo tanto, los datos que se env铆an al script se ver谩n as铆:

campo1=valor1&field2;=valor2&field3;=valor3

Con el m茅todo GET (enviar los datos mediante una direcci贸n URL), la URL ser谩 una cadena como la siguiente:

http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2

La etiqueta INPUT

 

La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos 鈥渋nteractivos鈥. La sintaxis de esta etiqueta es la siguiente:

<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">

El atributo name es esencial, ya que permite al script CGI reconocer qu茅 campo est谩 asociado con un par nombre/valor, lo que significa que el nombre del campo estar谩 seguido de un signo igual (芦=禄) seguido de un valor que el usuario introdujo, o si el usuario no introdujo ning煤n valor, por el valor predeterminado de la etiqueta value.
El atributo type se usa para especificar qu茅 tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles:

  • checkbox: Las casillas de elecci贸n pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se env铆a al CGI.
  • hidden: Este campo, que el navegador no muestra, es para definir una configuraci贸n 煤nica que se enviar谩 al CGI como par nombre/valor.
  • file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviar谩 con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM.
  • image: Un bot贸n de env铆o personalizado que aparece cuando se ubica una imagen en la ubicaci贸n definida por el atributo SRC.
  • password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.
  • radio: Un bot贸n que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del bot贸n radio seleccionado se enviar谩 al CGI. Al aplicar el atributo checked para uno de estos botones se definir谩 como seleccionado de forma predeterminada.
  • reset: Un bot贸n de restauraci贸n para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
  • submit: Un bot贸n de env铆o para enviar el formulario. El texto en el bot贸n puede definirse usando el atributo value.
  • text: Una casilla de texto para escribir una l铆nea de texto. El tama帽o de la casilla puede definirse usando el atributo size y la extensi贸n m谩xima del texto con el atributo maxlength.

La etiqueta TEXTAREA

La etiqueta TEXTAREA se usa para definir un cuadro de texto m谩s grande que la l铆nea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:

  • cols: representa el n煤mero de caracteres que puede contener un l铆nea
  • rows: representa el n煤mero de l铆neas
  • name: representa el nombre asociado con el cuadro de texto, que permite su identificaci贸n en el par nombre/valor.
  • readonly: impide que el usuario modifique el texto predeterminado en el campo
  • value: representa el valor predeterminado que se enviar谩 al script si el usuario no ha escrito nada en el cuadro de texto
Te Recomendamos:  IETester el Simulador de todas las versiones de 馃寪 Internet Explorer

La etiqueta SELECT

 

La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:

  • name: name: representa el nombre asociado con la casilla de texto, que permite su identificaci贸n en el par nombre/valor.
  • disabled: crea un lista desactivada, que aparece atenuada
  • size: representa el n煤mero de l铆neas de la lista (este valor puede ser m谩s grande que el n煤mero de elementos reales de la lista).
  • multiple: Permite al usuario seleccionar varios campos de la lista

Ejemplo de formulario

Los formularios pueden ubicarse en una p谩gina usando tablas (algo recomendable para una presentaci贸n profesional). Este es un ejemplo que resume los puntos precedentes, mostr谩ndole c贸mo disponer un formulario en una p谩gina Web mediante una tabla:

<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR>
	<TD>Apellido</TD>
	<TD>
	<INPUT type=text name="apellido">
	</TD>
</TR>

<TR>
<TD>Nombre</TD>
<TD>
<INPUT type=text name=禄nombre禄>
</TD>
</TR>

<TR>
<TD>G茅nero</TD>
<TD>
Hombre: Mujer: <INPUT type=radio name=禄g茅nero禄 value=禄M禄>
<br>Mujer: <INPUT type=radio name=禄g茅nero禄 value=禄F禄>
</TD>
</TR>

<TR>
<TD>Ocupaci贸n</TD>
<TD>
<SELECT name=禄ocupaci贸n禄>
<OPTION VALUE=禄profesor禄>Profesor</OPTION>
<OPTION VALUE=禄estudiante禄>Estudiante</OPTION>
<OPTION VALUE=禄ingeniero禄>Ingeniero</OPTION>
<OPTION VALUE=禄jubilado禄>Jubilado</OPTION>
<OPTION VALUE=禄otro禄>Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows=禄3″ name=禄comentarios禄>
Escriba aqu铆 sus comentarios</TEXTAREA> Enviar
</TD>
</TR>

<TR>
<TD COLSPAN=2>
<INPUT type=禄submit禄 value=禄Enviar禄>
</TD>
</TR>
</TABLE>
</FORM>

Te Recomendamos:  Codigo fuente HTML 馃寪 para actualizar pagina automaticamente o redireccionarla

 

Esto es lo que aparece en la pantalla:

Registro de usuario

Apellido
Nombre
G茅nero Hombre: Mujer:
Mujer:
Ocupaci贸n
Comentarios

Atributos de etiquetas FORM y tipos de entrada

Etiqueta Atributo Valor Resultado Efecto visual
<FORM> … </FORM> METHOD POST
GET
ACTION Env铆a a la direcci贸n mostrada
ENCTYPE Especifica el tipo de c贸digo
<INPUT> TYPE submit realiza la ACTION de la etiqueta <FORM>
text l铆nea simple de texto cuya longitud
se especifica por el atributo SIZE
Reset Elimina el contenido del formulario
Radio bot贸n de radio
Checkbox casilla de selecci贸n
NAME Nombre
SIZE Tama帽o del texto
<TEXTAREA> … </TEXTAREA> NAME Casilla de texto
ROWS
COLS
<SELECT>

 

<OPTION> … </OPTION>

</SELECT>

NAME
MULTIPLE M煤ltiples selecciones posibles
<OPTION> … </OPTION> SELECTED Elecci贸n predeterminada
VALUE Valor forzado

Te invitamos a visitar nuestro canal en y Suscribirte


Suscr铆bete por correo electr贸nico

Recibe notificaciones de Spek Regg

脷nete a otros 45 suscriptores


Publicado en Soporte Tecnico

Te puede interesar...

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada.