Tema 4 Lenguaje HTML Parte 7.

Presentación del tema: "Tema 4 Lenguaje HTML Parte 7."— Transcripción de la presentación:

1 Tema 4 Lenguaje HTML Parte 7

2 Formularios

3 Formularios Un formulario es un conjunto de controles (elementos de entrada de datos) cuya información será enviada conjuntamente cuando el usuario pulse sobre el botón de envío. Para crear un formulario se utiliza la etiqueta FORM: <FORM> </FORM>

4 Controles de formularios Cajas de texto
<INPUT TYPE="text" NAME="mitexto"> SIZE: Determina el ancho de la caja de texto. El valor por defecto es 20 caracteres. MAXLENGTH: Limita el número máximo de caracteres que pueden ser escritos en una caja de texto. VALUE: Sirve para establecer un texto que debe aparecer por defecto en la caja de texto. ALIGN: Para alinear el control, la opciones son “top“ (con parte superior de la línea donde se inserta), “bottom“(con la parte inferior), "middle“ (con el medio), “left“ (a la izquierda), "right“ (a la derecha).

5 Cajas de texto para claves
Se utiliza una caja de texto modificada en la que al escribir se mostrarán asteriscos. TYPE="password“ Las cajas de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN . Ejemplo: <FORM> <P> Nombre: <INPUT TYPE="text" NAME="nombre"> <P> Clave: <INPUT TYPE="password" NAME="clave"> </FORM>

6 Botones de elección <FORM>También llamados botones de radio (radio buttons), tienen dos estados: seleccionado (ON) o no seleccionado (OFF), estando inicialmente en la posición OFF. <INPUT TYPE="radio"> Para indicar que pertenecen a un mismo grupo el valor debe ser el mismo en el atributo NAME y se debe usar el atributo VALUE para dar un nombre distinto a cada uno de los botones. Ejemplo: <FORM> <P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz <P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop </FORM>

7 Cajas de selección Son parecidas a los botones de radio, pero permiten seleccionar varias opciones en una lista. Tienen dos posiciones: seleccionados o no seleccionados (posición inicial). Cada caja de selección es independiente del resto, el valor del atributo NAME debe ser diferente en cada una. TYPE="checkbox“ Ejemplo : <FORM> <P><INPUT TYPE="checkbox" NAME="abogado">Abogado <P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero </FORM>

8 Botón de envío Para crear el botón de envío se usa: TYPE="submit“
VALUE, permitirá especificar el texto que será mostrado en el botón. Ejemplo: <P>Introduzca su nombre: <INPUT TYPE="Text"> <P><INPUT TYPE="Submit" VALUE="Envíeme"> Para insertar un botón de envío personalizado, TYPE="image“ La dirección de la imagen se indica con el atributo SRC.

9 Botón de borrado Permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto. <INPUT TYPE="reset"> Ejemplo: <P>Introduzca su nombre: <INPUT TYPE="Text"> <P><INPUT TYPE="Submit" VALUE="Envío”> <P><INPUT TYPE="reset“ VALUE="Restablecer">

10 Cajas de texto multilínea: TEXTAREA
Funcionan de manera similar a un editor de texto muy sencillo. Al contrario de lo que sucedía con las cajas de texto convencionales es posible escribir varias líneas de texto. La etiqueta usada es: <TEXTAREA> </TEXTAREA> NAME: El nombre para asignar al control. ROWS: El número de líneas de la caja de texto. COLS: El número de caracteres visibles de cada línea.

11 Ejemplo: <TEXTAREA NAME="texto“ ROWS="10“ COLS="50">
Texto de ejemplo. </TEXTAREA>

12 Cuadros de selección Permite elegir entre una serie de opciones. Estas opciones se pueden mostrar como una lista con desplazamiento, o mediante una persiana desplegable. Se usa la etiqueta SELECT: <SELECT> </SELECT> Ejemplo: <SELECT NAME="color"> <OPTION>Verde <OPTION>Rojo <OPTION>Azul </SELECT>

13 MULTIPLE: permite la selección de varias opciones.
SELECTED, permitirá elegir la opción que debe estar seleccionada por defecto. SIZE, determina el número de opciones que pueden ser vistas simultáneamente (Si el valor es mayor a 1). MULTIPLE: permite la selección de varias opciones. Tambien se aceptan los atributos ALIGN para elegir su alineamiento. En lo que a extensiones se refiere, también podemos usar el atributo DISABLED en la etiqueta SELECT para desabilitarla, aunque solo funcionará con Internet Explorer 4.0™. Igualmente podemos usar el atributo TITLE