(Clase 3) Formularios HTML

|

J

CORPORACIÓN UNIVERSITARIA
ADVENTISTA
TECNOLOGÍA DE SISTEMAS
Introducción a HTML
HTML (HyperText Markup Language, Lenguaje de
Marcado de Hipertexto) es el lenguaje en el que se
construyen las páginas web.
La primera descripción de HTML disponible públicamente

fue un documento llamado HTML Tags (Etiquetas
HTML),publicado por primera vez en Internet por Tim
Berners-Lee, un científico del CERN, en 1991.
La primera versión de HTML que se convirtió en un

estándar fue la 3.0, cuando el World Wide Web
Consortium (W3C) lo aceptó como uno de sus estándares
en 1995. En1999 llegó HTML 4.0. Y en el 2010 la versión
5.0.
á

J
á

J

HTML es un lenguaje basado en marcas
o etiquetas.
La sintaxis de las etiquetas es:
<nombre de la etiqueta [atributo1 =

"valor1", atributo2 = "valor2ơ,...]>
[contenido de la etiqueta]
[</nombre de la etiqueta> ]
á

J
á

J

Todo el contenido de un documento
HTML se encuentra entre las etiquetas
<html></html>
Cada página se divide a su vez en
cabecera (delimitada entre las etiquetas
<head> </head>) y cuerpo (delimitado
entre las etiquetas <body> </body>).
á

J
á

J


<html>
<head> <title> Título de nuestra primera
página </title> </head>
<body>
¡Hola mundo!
</body>
</html>
á

J
á

J

Tener en cuenta
HTML no distingue entre mayúsculas y
minúsculas en el nombre de las marcas. Es
decir, <html> es lo mismo que <HTML>.
Los espacios en blanco, tabulaciones y

retornos de carro que haya entre marcas
serán ignorados por el navegador web.
<html><head> <title> Título de nuestra primera página

</title></head><body>¡Hola mundo!</body></html>
á

J
á

J

Caracteres especiales
á

J
á

J

]ué son los formularios
HTML?
Los formularios se emplean para
recoger datos del usuario en una página
web y enviarlos a un servidor.
El procesamiento de un formulario se
realiza mediante CGIs o mediante
alguna tecnología de procesamiento en
servidor (ASP, PHP, JSP, servlets,etc.).
Se pueden validar datos en el cliente
mediante el uso de JavaScript.
á

J
á

J

Etiqueta <FORM> Ʀ</FORM>
Estas etiquetas son las que delimitan el
comienzo y el final de un formulario.
La pareja de etiquetas se introduce en

el código HTML dentro del BODY de la
página, en el lugar en que queramos
que nos aparezcan los elementos del
formulario.
á

J
á

J

<FORM>
á

J
á

J

Atributos de la etiqueta form
ë a Ë

ë aË

!" "#" " $%
& '#()
*

#()

ë a
Ë

+
* a a
m

a

,

m
-./ 0## +1 %

02302! m , 0.4
á

J
á

J

Atributos de la etiqueta form
ë Ë
*

ß
ë a Ë

"

Ë

*

'#() #()

á

J
á

J

GET Y POST
p

5
6 7 a
8
+Ë99:::7

916
*;"8
;"0&<=
El método GET añade los argumentos del formulario a la URL
especificada en el atributo action, utilizando como separador de las

distintas piezas de información el signo de interrogación"?".
p
"
*
1

POST envía los datos dentro del cuerpo de la petición
Get o Post
"

&(
"

+

7
">( !

?

&(

">( *
1 #(("%

7

@
5
&(Ë
A +;B
6
;BC
A9C
3

&

m
?

!" "#" " %
á

J
á

J

Etiquetas para controles de
entrada de datos
á

J
á

J

Atributos de Input

*
?

; %

?
i

O
?

+*

*

& *
a

& *
5

1

á

J
á

J

Atributos de Input
& *
a @
1

1

&

a

*
=

& *

m

á

J
á

J

Texto
âa

!

7 1
m

Ë
D 1 + = *

m
A

;BB +
;B
B m;B19 B
;B
BC

*Ë
A m;B1B 1 +;B-2B =;B-2B
;B
*BC
A9
C
á

J
á

J

RadioButtons
âa

" !

7

&
*

*

!

Ë
a
* B
*
@

*

&
*

r

* *

*

*

*

á

J
á

J

Ejemplo
A

;B
Ëm
E

B +
;B
B m;B19 B
;B
BC

Ë
A m;B
B ;B
B ;BF +GC
)
A m;B
B ;B
F ;B
BC
!
)
A m;B
B ;B
F ;B*
BC
4

A9
C
á

J
á

J

Checkbox
âa

!
3

7

*
m
*
H

+

Ë
a a
*
@
*

&
*

7

r r

* *

a a
*

m

á

J
á

J

Ejemplo
<form action="mailto:yo@miservidor.com" method="post"
enctype="text/plain" name="miform">
marca tu música favorita:
<input type="checkbox" name="musica" value="rock" checked>Rock

<input type="checkbox" name="musica" value="pop" checked>Pop
<input type="checkbox" name="musica" value="heavy">Heavy
<input type="checkbox" name="musica" value="tecno">Tecno
</form>
á

J
á

J

Button
â

que define un botón estandar. Este botón puede ser usado para
diferentes acciones, pero normalmente se le dá utilidad mediante
JavaScript, mediante el evento "OnClick".
Sus parámetros son:

, que asigna un nombre al botón, que nos puede
servir para acciones con lenguaje de script.
r r
, que define el texto que va a figurar en el botón.
¦¦, que desactiva el botón, de tal forma que no se produce
ninguna acción cuando se pulsa, pués permanece inactivo.
¦! , que especifica el orden de tabulador que tendrá el
campo respecto todos los elementos que incluye el formulario.
á

J
á

J

<form
action="mailto:yo@miservidor.com"
method="post" enctype="text/plain"
name="miform">
<input type="Button" name="boton"
value="pulsame">
<input type=ơbuttonơ value=ơEnviarơ
onclick=ơvalidar_formulario()ơ>
</form>
á

J
á

J

Password
â "
¦
Define una caja de texto para contener una clave o
password, por lo que el texto que introduzca el usuario
aparecerá como asteriscos, por motivos de seguridad. Sus
parámetros opcionales son los mismos que los del tipo !.
<form action="mailto:yo@miservidor.com" method="post"

<input type="password" size="15" maxlength="10">
</form>
á

J
á

J

Hidden
â #¦¦
Define un campo invisible, por lo que no se ve en pantalla.
Aunque parece así definido que no tiene utilidad, sus usos
son varios e importantes, y los veremos más tarde.
Sus atributos son:

, que asigna un nombre identificador
único al campo oculto.
r r
, que va a ser el valor fijo que se le va a
pasar al programa del servidor, ya que el usuario no
puede modificarlo. En realidad este valor no tiene porqué
ser fijo, ya que lo vamos a poder modificar mediante
código de script, lo que nos va a permitir ir pasando una
serie de variables ocultas de una página a otra.
á

J
á

J

<form
action="mailto:yo@miservidor.com"
name="miform">
<input type="hidden"
name="contraseña" value="123ABC">
</form>
á

J
á

J

Submit
âa

!

*
?

*

+

*

Ë
r r 1
*

?

*

a a
*

m

á

J
á

J

reset
â
Define un botón que al ser pulsado por el
usuario borra todos los datos que hubiera
introducido en cualquiera de los campos
del formulario. Sus atributos son los
mismos que los de SUBMIT.
á

J
á

J

<SELECT>...</SELECT>
Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable,
que presenta varias opciones de elección, de tal forma que el usuario puede elegir una o varias
de ellas, si así se especifica.
Sus atributos y valores son:

, que asigna un nombre identificador al campo, de tal forma que al
enviar los datos del formulario la opcción elegida será asociada a este nombre.
$, con n= nº entero, que define el número de opciones visibles. Si n=1 el campo
de selección se presenta como una lista desplegable, mientras que si se indica otro valor se
presenta como una caja de lista con barra de desplazamiento.
, que permite elegir varias de las opciones a la vez. Si no se especifica este
atributo solamente se podrá escoger una de las opciones. Para ello hay que mantener
pulsada la tecla CONTROL mientras se seleccionan y/o deseleccionan las diversas opciones.
¦¦, que desactiva la lista, de tal forma que no se produce ninguna acción cuando se
pulsa una opción, pués permanece inactiva.
¦! , que especifica el orden de tabulador que tendrá el campo respecto
todos los elementos que incluye el formulario.
á

J
á

J

<OPTION>
Para introducir cada una de las diferentes
opciones de la lista se utiliza la etiqueta
â á% , que admite como parámetros:
r , que fija el valor que será asociado al
parámetro name de <SELECT> cuando se
envíe el formulario. Este valor debe ser único
para cada opción.
¦, que establece la opción por defecto.
Si no se especifica este parámetro en ninguna
opción se tomará la primera de ellas por
defecto.
á

J
á

J

Ejemplo Lista
<form action="cgi-bin/control.exe" method="post" enctype="text/plain"
name="miform">
selecciona una de los siguientes valores:
<select>
<option value="uno">uno
<option value="dos">dos
<option value="tres">tres
</select>
</form>
<form action="cgi-bin/control.exe" method="post" enctype="text/plain"

name="miform">
selecciona una de los siguientes valores:
<select size="3">
<option value="uno">uno
<option value="dos">dos
<option value="tres">tres
</select>
</form>
á

J
á

J

<TEXTAREA>...</TEXTAREA>
& 7 7 1
@ ?

=

*
m

Ë
a a

*

?

1

7
1

@

* 7
1

# @
* 7 1

7 1

a

7

a a
*

m

á

J
á

J

<form action="cgi-bin/control.exe" method="post"
introduce un comentario:
<textarea name="comentario" cols="20" rows="10">
</textarea>
</form>
<form action="cgi-bin/control.exe" method="post"

<textarea name="comentario" cols="20" rows="10">
introduce un comentario:
</textarea>
</form>
á

J
á

J

<LABEL>...</LABEL>
Permite indicar explícitamente la etiqueta
o título de un control de un formulario.
<form action="cgi-bin/control.exe"
name="miform">
<label>
deseo que me envíen correo
</label>
</form>
á

J
á

J

Ejemplo
á

J
á

J

Tarea
á

J
á

J

Como enviamos los datos al servidor?
á

J
á

J

á&'?
á

J
á

J

(Clase 3) Formularios HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

(Clase 3) Formularios HTML

Cargado por

Copyright:

Formatos disponibles

|

La primera descripción de HTML disponible públicamente

La primera versión de HTML que se convirtió en un

<nombre de la etiqueta [atributo1 =

Los espacios en blanco, tabulaciones y

<html><head> <title> Título de nuestra primera página

La pareja de etiquetas se introduce en

ë aË

especificada en el atributo action, utilizando como separador de las

+*

D 1 + = *

marca tu música favorita:

<input type="checkbox" name="musica" value="rock" checked>Rock

Sus parámetros son:

<form action="mailto:yo@miservidor.com" method="post"

Sus atributos y valores son:

<form action="cgi-bin/control.exe" method="post" enctype="text/plain"

a a

<form action="cgi-bin/control.exe" method="post"

También podría gustarte

(Clase 3) Formularios HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

(Clase 3) Formularios HTML

Cargado por

Copyright:

Formatos disponibles

| 

 La primera descripción de HTML disponible públicamente

 La primera versión de HTML que se convirtió en un

<nombre de la etiqueta [atributo1 =

 Los espacios en blanco, tabulaciones y

<html><head> <title> Título de nuestra primera página

 La pareja de etiquetas se introduce en

ë aË      

especificada en el atributo action, utilizando como separador de las

   

    +*  

D  1 + =   *   

marca tu música favorita:

<input type="checkbox" name="musica" value="rock" checked>Rock

Sus parámetros son:

<form action="mailto:yo@miservidor.com" method="post"

Sus atributos y valores son:

<form action="cgi-bin/control.exe" method="post" enctype="text/plain"

 a  a   

<form action="cgi-bin/control.exe" method="post"

También podría gustarte

|

La primera descripción de HTML disponible públicamente

La primera versión de HTML que se convirtió en un

Los espacios en blanco, tabulaciones y

La pareja de etiquetas se introduce en

ë aË

+*

D 1 + = *

a a