Laboratorio de Informática
Distribuida
Sesión I. Lenguaje HTML/Formularios
Roberto Barchino Plata
Lenguaje HTML/Formularios
Lenguaje HTML
El lenguaje HTML (HyperText Markup Language), es un
lenguaje pensado para presentar información en la Web.
Es un lenguaje de marcas – etiquetas para la creación de
documentos hipertextuales.
Por hipertexto entenderemos texto con una presentación
agradable, con inclusión de elementos multimedia
(gráficos, video, audio) y con la presencia de hiperenlaces
que permiten relacionar otras fuentes de información en
documentos hipertextos.
La versión actual del lenguaje es la 4.0.1 disponible en:
[Link]
1
Lenguaje HTML/Formularios
Lenguaje HTML
Es un lenguaje de etiquetas y pueden verse como las
“instrucciones” del lenguaje, la estructura de una etiqueta
dentro de un documento o página HTML es:
<ETIQUETA> ..Campo acción .. </ETIQUETA>
Por tanto, un documento HTML estará formado de texto
que será el contenido del documento y de etiquetas
HTML que resaltarán el contenido y le darán un formato
de manera sencilla y con la posibilidad de relacionar
documentos y fuentes de información mediante
hiperenlaces.
Lenguaje HTML/Formularios
Lenguaje HTML
Las etiquetas pueden presentar modificadores, que
llamaremos atributos, que permitirán definir las diferentes
posibilidades de la etiqueta HTML.
Estos atributos se definirán en la etiqueta de inicio y
consistirán normalmente en el nombre del atributo y el
valor que toma separados por un signo de igual. Ejemplo:
<FORM method=“POST” action=“./ConsultarSaldo”>
Cuando el valor que toma el atributo tiene más de una
palabra deberá expresarse entre comillas, en otro caso
no será necesario.
2
Lenguaje HTML/Formularios
Lenguaje HTML
La estructura de cualquier página HTML es:
<HTML>
<HEAD>
Definiciones de cabecera
</HEAD>
<BODY>
Etiquetas HTML
</BODY>
</HTML>
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Los formularios son plantillas que permiten la creación de
documentos HTML para solicitar cierta información a los
clientes/usuarios de la página, lo que nos permite
interactuar con ellos.
La principal utilidad de los formularios reside en la
posibilidad de crear cuestionarios, encuestas o en general
cualquier documento en el que se desee una interacción
por parte del usuario.
Se podrán definir distintos tipos de cajas de dialogo,
botones de selección, menús de distintas opciones, etc.
3
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
A continuación se presentan los diferentes
atributos de la etiqueta <FORM> además de
enumerar las posibilidades de inclusión de
elementos de interacción con el usuario.
Dicha enumeración es básica, pudiendo
profundizar en la definición en la siguiente
dirección web:
[Link]
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Atributos <FORM>
< FORM ACTION=“URL->fichero” METHOD= POST | GET >
...
Elementos que forman el formulario
...
< /FORM>
Action – Modificador donde se especifica la dirección del programa del servidor
web que se va hacer cargo de los datos del formulario. La URL puede ser absoluta
([Link] o relativa (/Servlet/Comprobar)
Method – Determina cómo se transportan los datos entre el cliente y el servidor.
En el método GET los datos se añaden a la URL y en el método POST los datos se
envían a través de un fichero standard de entrada/salida.
4
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entradas básicas de datos en el formulario.
< INPUT TYPE = ( TEXT | PASSWORD |
CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE
| RESET )
NAME = "Variable " VALUE = "Valor Inicialización"
>
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entrada de texto:
< INPUT TYPE=TEXT NAME="variable" VALUE="valor
inicial " SIZE="tamaño" MAXLENGTH="long. máxima" >
Ejemplo.
Nombre:<input type=text name=nombre size=30
maxlength=25 >
5
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entrada de texto oculto. Password:
< INPUT TYPE=PASSWORD NAME="variable"
VALUE="valor inicial " SIZE="tamaño"
MAXLENGTH="long. máxima" >
Ejemplo.
Password:<input type=PASSWORD name=clave size=15
maxlength=10>
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entrada CheckBox.
< INPUT TYPE=CHECKBOX NAME="variable"
CHECKED>
Ejemplo.
<input type=checkbox name=caja1 checked ><br>
<input type=checkbox name=caja2 ><br>
<input type=checkbox name=caja3 ><br>
Nota: “Los posibles valores de las variables serán On y Off”
6
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entrada Radio.
<INPUT TYPE=RADIO NAME="variable"
VALUE="valor“ CHECKED>
Ejemplo.
<input type=radio name=so value=linux checked ><br>
<input type=radio name=so value=95 ><br>
<input type=radio name=so value=2000 ><br>
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entrada Oculta.
< INPUT TYPE=HIDDEN NAME="variable“
VALUE="valor" >
Ejemplo.
<input type=hidden name=oculto value=pasa1 ><br>
7
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Envío de Datos.
< INPUT TYPE=SUBMIT VALUE="mensaje" >
Ejemplo.
<input type=submit value=“Enviar consulta” >
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Envío de Datos. Botón envío gráfico.
< INPUT TYPE=IMAGE NAME="variable" SRC="URL
Imagen" >
Ejemplo.
<input type=image name=imagen src=[Link] >
8
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Inicialización Datos.
< INPUT TYPE=RESET VALUE=“Mensaje" >
Ejemplo.
<input type=reset value=“Borrar consulta” >
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Entrada de Texto, varias líneas.
<TEXTAREA NAME="variable" ROWS=Filas
COLS=Columnas>
Texto de Inicialización que puede incluir varias líneas.
</TEXTAREA>
Ejemplo.
<TEXTAREA NAME=texto ROWS=10 COLS=60> Escriba aquí
</TEXTAREA>
9
Lenguaje HTML/Formularios
Lenguaje HTML. Formularios.
Selección entre múltiples opciones.
<SELECT NAME="variable">
< OPTION SELECTED VALUE=valor1> Opción
Primera
< OPTION VALUE=valor2> Opción Segunda
… </SELECT>
Ejemplo.
<SELECT NAME=dpto>
< OPTION SELECTED VALUE=ventas> Dpto.
Ventas
< OPTION VALUE=personal> Dpto. Personal
</SELECT>
Laboratorio de Informática
Distribuida
Sesión I. Lenguaje HTML/Formularios
Roberto Barchino Plata
10