Curso de HTML 4.

0 y CSS

10.1- CAMPOS DE TEXTO

10.1.1- TEXTO CORTO.
Para crear una caja de texto utilizamos la etiqueta
<input> y dentro de esta hemos de especificar el valor
de los atributos type y name siendo atributos
imprescindibles.
La etiqueta es de la forma:
<input type="text" name="nombre">
mediante la cual creamos una caja de texto (valor del
atributo type) cuyo contenido ser llamado nombre
(valor del atributo name).

ejemplo01:
<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain">
Nombre: <input type="text" name="nombre">

10.1.2- TEXTO OCULTO

</form>

Para que aparezcan asteriscos en vez de texto

utilizamos el valor password en el atributo type. Esto es
muy til para los campos destinados a contraseas
(passwords).

10.1.3- TEXTO LARGO

Para obtener una caja de texto con varias lneas se
ha de utilizar la etiqueta <textarea> con su cierre
correspondiente </textarea>, y los atributos name, rows
(para definir el nmero de lneas) y cols (para definir
el nmero de columnas).
Tambin podemos predefinir el contenido del rea de
texto escribiendo entre la etiqueta <textarea> y
</textarea> (cierre) el texto que queramos. No se usa
el atributo value.

ejemplo03:

Disponemos tambin de otros atributos que no son

imprescindibles:

size: para asignar en pixels el tamao visible

de la caja de texto.

maxlength: para asignar el tamao mximo de

caracteres que va a admitir la caja de texto.

value: para asignar un valor predefinido, es

<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain">
<p>Password: <input type="password" name=
"password"></p>
<textarea name="comentario" rows="10"
cols="40">Escribe tu comentario...
</textarea>
</form>

decir, para que cuando se cargue el formulario

aparezca ya escrito el valor que hemos asignado a
value.

ejemplo02:
<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain">
<p>Tamao cambiado: <input type="text"
name="nombre" size="50"></p>
<p>Slo deja 5 caracteres: <input type="text"
name="nombre" maxlength="5"></p>
<p>Value: <input type="text" name="nombre"
value="Michael Jordan"></p>
</form>

Coleccin FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)

25 de 48

Curso de HTML 4.0 y CSS

</select>
</p>
<p><var><b>MULTIPLE</var></b>&nbsp;
<SELECT NAME="jugadores" size="4" align="top"
multiple>
<option>Ra&uacute;l</option>
<option>Zidane</option>
<option>Figo</option>
<option>Roberto Carlos</option>
</select>
</p>
<p><var><b>SELECTED</var></b>&nbsp;
<SELECT NAME="jugadores" size="4" align="top"
>
<option>Ra&uacute;l</option>

10.2- LISTAS DE OPCIONES

<option>Zidane</option>

Son los mens desplegables que nos permiten

escoger
una (o varias) de las opciones que nos
proponen.
Para crearlas utilizamos la etiqueta <select> y su
correspondiente cierre. Tambin asignaremos un nombre
al atributo name y cada opcin que queramos que
aparezca deber ser incluida en una lnea precedida de
la etiqueta <option>.

<option selected>Figo</option>
<option>Roberto Carlos</option>
</select>
</p>
</form>

Tambin disponemos de los siguientes atributos:

size:

para indicar el nmero de valores

mostrados o visibles de la lista. El resto se pueden
ver utilizando la barra lateral de desplazamiento
(scrollbar).

multiple:

para permitir
elementos de la lista.

seleccionar

varios

selected:

atributo de la etiqueta <option>

mediante el cual haremos que el elemento
correspondiente a esa etiqueta <option> sea el
elemento seleccionado por defecto.

value: atributo de la etiqueta <option> al cual

debemos asignar un valor numrico. Dicho valor
ser el enviado al programa o correo electrnico si
el usuario selecciona esa opcin.

ejemplo04:
<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain">
<SELECT NAME="jugadores">
<option>Ra&uacute;l</option>
<option>Zidane</option>
<option>Figo</option>
<option>Roberto Carlos</option>
</select>
<p><var><b>SIZE="2"</var></b>&nbsp;
<SELECT NAME="jugadores" size="2" align="top">
<option>Ra&uacute;l</option>
<option>Zidane</option>
<option>Figo</option>
<option>Roberto Carlos</option>

Coleccin FAST LEARNING -

10.3- BOTONES DE RADIO

Son otra alternativa a la hora de plantear una eleccin.
Mediante estos botones obligamos al usuario a
seleccionar una sola opcin de entre las que se
proponen.
Presenta la misma sintaxis que las cajas de texto, es
decir, la etiqueta <input> y los atributos type, name y
value. La diferencia reside en que el valor de type

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)

26 de 48

Curso de HTML 4.0 y CSS

ahora es radio y que todos los radiobuttons (botones
de radio) que queramos que sean excluyentes han de
tener el mismo valor en el atributo name, es decir, se
han de llamar igual. Distinguiremos la opcin elegida del
resto mediante el atributo value, es decir, cada opcin
ha de tener un valor (value) distinto.
Es importante
saber que la etiqueta <input
type=radio> tan slo crea una casilla pinchable en la
pgina pero no crea texto, por lo tanto, tenemos que
encargarnos de crear el texto y los saltos de lnea
correspondientes.
Podemos preseleccionar por defecto
opciones utilizando el atributo checked.

una

de

las

ejemplo05:
<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain">
<input type="radio" name="jugadores"
value="1">Ra&uacute;l
<br>
<input type="radio" name="jugadores"
value="2">Zidane
<br>
<input type="radio" name="jugadores"
value="3">Figo
<br>
<input type="radio" name="jugadores"
value="4">Roberto Carlos

La informacin que se enviar ser:

valor de name = valor de value
Por ejemplo, si seleccionamos la opcin
informacin que se enviar por e-mail ser:

Figo

la

jugadores = 3

<br><br>
Atributo <var><b>CHECKED</var></b>&nbsp;en la
segunda opcin:<br><br>

<input type="radio" name="jugadores"

value="1">Ra&uacute;l
<br>
<input type="radio" name="jugadores" value="2"
checked>Zidane
<br>
<input type="radio" name="jugadores"
value="3">Figo
<br>
<input type="radio" name="jugadores"
value="4">Roberto Carlos

y si seleccionamos la opcin Zidane:

jugadores = 2

10.4- CAJAS DE VALIDACIN

Las cajas de validacin o checkbox, son cajas que
pueden ser activadas o desactivadas por el usuario por
medio de un click con el ratn.
La sintaxis es la misma que la de los botones de radio
salvo en el valor del atributo type que ahora es
checkbox.
Podemos activar por defecto
atributo checked.

la caja utilizando el

</form>

ejemplo06:
<FORM
ACTION="MAILTO:pepito@usuarios.retecal.es"
method="post" enctype="text/plain">
<input type="checkbox" name="futbol">Me gusta
el f&uacute;tbol
<br><br>
Podemos activar por defecto la caja utilizando
el
atributo
<var><b>CHECKED</var></b>:<br><u>Ejemplo:</u><

Coleccin FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)

27 de 48

Curso de HTML 4.0 y CSS

sirve para borrar el formulario por completo en el
caso de que el usuario desee rehacerlo desde el
principio.

br><br>&nbsp;
<input type="checkbox" name="futbol"
checked>Me gusta el f&uacute;tbol

La sintaxis es lo mismo que en los botones normales

salvo el valor del atributo type que ahora es submit
para el botn de envo, y reset para el botn de
borrado.

</form>

ejemplo08:
<FORM ACTION="MAILTO:pepito@msn.com"
method="post" enctype="text/plain">
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>

La informacin que
programa ser del tipo:

llegar

nuestro

correo

valor de name = on (u off si est desactivada)

En el ejemplo anterior si activamos la casilla
informacin que llegar al correo espacificado ser:

la

futbol = on

10.5- BOTONES NORMALES

Para crearlos utilizamos la etiqueta <input> y los
atributos type = button y value.
El atributo value representa el texto que aparecer
escrito en el botn.

ejemplo07:
<FORM ACTION="MAILTO:pepito@msn.com"
method="post" enctype="text/plain">
<input type="button" value="Texto escrito en
el bot&oacute;n">
</form>

10.7- DATOS OCULTOS

Adems de los datos enviados por el usuario podemos
enviar datos establecidos por nosotros y que
permanecern ocultos al usuario (a menos que el
usuario solicite en el navegador ver el cdigo fuente).
Para ello utilizamos la etiqueta <input> y el atributo
type con valor igual a hidden (oculto).

Ejemplo:
<input type=hidden name=sitioweb
value=www.google.com>
Esta
etiqueta
enviar
especificado la informacin:

al

correo

programa

sitioweb = www.google.com
Utilizando lenguajes como JavaScript podemos definir
acciones a tomar cuando un visitante pulse el botn de
una pgina web.

10.6- BOTONES DE ENVIO Y

BORRADO
El botn de envo es imprescindible porque es el
encargado de dar por terminado el proceso de
relleno del formulario y hacerlo llegar a su
destino.
El botn de borrar, en cambio, no es imprescindible y
Coleccin FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)

28 de 48