Formularios HTML - created from Mind Map

Seite 1

1. La Web se ha convertido en una poderosa arma para las empresas que se dedican a realizar encuestas estos han sido una de las herramientas que han ayudado, nos permite, desde dentro de una presentación web, solicitar información al visitante, están compuestos por tantos campos como informaciones queramos obtener, una vez introducidos los valores en estos campos serán enviados a una URL donde se procesara la información

2. Campos de entrada: La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes atributos: - Type: Define el tipo de variable a introducir. - Name: indicara el nombre que se le asignara al campo

3. Campos de selección: Las tags <select>.....</select> encierran los valores que podremos elegir a partir de una lista. Los atributos que acompañan a la tag de apertura son: name="" Indicará el nombre del campo de selección. Size="" Indicará el número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento. Multiple: Indica si se pueden realizar multiples selecciones. Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede acompañarse del atributo selected para indicar cual es la opción que aparecerá por defecto. Si no lo especificamos, siempre será la primera de la lista.

4. Areas de texto Con las tags <textarea>;.....</textarea> definimos un texto de múltiples líneas para que el visitante pueda incluir un comentario junto a sus datos. Junto a la tag de apertura pueden aparecer los siguientes atributos: name="" Nombre del campo. Cols="" Numero de columnas de texto visible. Rows="" Numero de filas de texto visible.

5. Botones Se definen mediante la tag <input> a la que le acompañan los atributos: type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido. Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.

1.1 Ejemplo: <HTML> <HEAD> <TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Formularios</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM> </BODY> </HTML>

2.1 Text: Indica que el campo a introducir será un texto, atributos: maxlenght="" Seguido de un valor que limitará el número máximo de carácteres a introducir en ese campo, - size="" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla, - value="" Indica que no hay valor inicial del campo.

2.2 Password: Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los mismos que para text.

2.3 Checkbox: El campo se elegirá marcando de entre varias opciones una casilla cuadrada. value="" Entre comillas se indicará el valor de la casilla. checked La casilla aparecerá marcada por defecto.

2.4 Radio: El campo se elegirá marcando de entre varias opciones una casilla circular. value="" Entre comillas se indicará el valor de la casilla.

2.1.1 Ejemplo: <HTML> <HEAD> <TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Campos de entrada: texto</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> Nombre: <INPUT TYPE="text" NAME="nombre" MAXLENGHT=15 SIZE= 15><BR> Cédula: <INPUT TYPE="text" NAME="cedula" MAXLENGHT=15 SIZE= 15><BR> Ciudad: <INPUT TYPE="text" NAME="ciudad" MAXLENGHT=20 SIZE= 20><BR> Dirección: <INPUT TYPE="text" NAME="direccion" MAXLENGHT=50 SIZE= 50><BR> </FORM> </BODY> </HTML>

2.2.1 Ejemplo: <HTML> <HEAD> <TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Campos de entrada: Password</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> Usuario: <INPUT TYPE="password" NAME="usuario" MAXLENGHT=15 SIZE= 15><BR> Contraseña: <INPUT TYPE="password" NAME="contraseña" MAXLENGHT=15 SIZE= 15><BR> </FORM> </BODY> </HTML>

2.3.1 Ejemplo: <HTML> <HEAD> <TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Campos de entrada: Checkbox</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> Entretenimientos: <br> <INPUT TYPE="checkbox" NAME="cine" VALUE="" CHECKED> Cine<BR> <INPUT TYPE="checkbox" NAME="teatro" VALUE="si">Teatro <BR> <INPUT TYPE="checkbox" NAME="musica" VALUE="si">Musica <BR> </FORM> </BODY> </HTML>

2.4.1 Ejemplo: <HTML> <HEAD> <TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Campos de entrada: Radio</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> Elija su Género: <br> <INPUT TYPE="radio" NAME="boton1" VALUE="1"> Masculino <br> <INPUT TYPE="radio" NAME="boton1" VALUE="2">Femenino<BR> </FORM> </BODY> </HTML>

3.1 Ejemplo: TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Campos de selección</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <SELECT NAME="Colores" MULTIPLE> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> <BR><BR> <SELECT NAME="Colores" SIZE="1"> <OPTION VALUE="r">Rojo</OPTION> <OPTION VALUE="g">Verde</OPTION> <OPTION VALUE="b">Azul</OPTION> </SELECT> </FORM> </BODY> </HTML>

4.1 Ejemplo: <HTML> <HEAD> <HTML> <HEAD> <TITLE>Trabajo con Formularios</TITLE> </HEAD> <BODY> <H1>areas de texto</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <TEXTAREA COLS=20 ROWS=10 NAME="Texto"> </TEXTAREA> </FORM> </BODY> </HTML>

5.1 Ejemplo: <HTML> <HEAD> <TITLE>Trabajo con formularios</TITLE> </HEAD> <BODY> <H1>Botones</H1> <FORM ACTION="mailto:unaprueba" METHOD="POST"> <TEXTAREA COLS=20 ROWS=10 NAME="Texto"> </TEXTAREA> <BR><BR> <INPUT TYPE="submit" NAME="enviar" VALUE="Enviar"> <INPUT TYPE="Reset" NAME=”limpiar” VALUE="Limpiar"> </FORM> </BODY> </HTML>