Scribd
Cargar
139 vistas28 páginas

Formulario HTML

Este documento describe los formularios en HTML. Explica que los formularios permiten a los usuarios introducir datos en campos de texto y botones. Describe cómo crear un formulario básico con una etiqueta <FORM> que contenga campos de entrada como <INPUT> y botones de envío. También explica los diferentes tipos de controles de entrada como cajas de texto, contraseñas y botones de opción múltiple.

Cargado por

Nahomy Vilca Macedo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
139 vistas28 páginas

Formulario HTML

Este documento describe los formularios en HTML. Explica que los formularios permiten a los usuarios introducir datos en campos de texto y botones. Describe cómo crear un formulario básico con una etiqueta <FORM> que contenga campos de entrada como <INPUT> y botones de envío. También explica los diferentes tipos de controles de entrada como cajas de texto, contraseñas y botones de opción múltiple.

Cargado por

Nahomy Vilca Macedo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 28

Diseño Web

Docente: Mg. Manuel Alcázar Holguin


Formularios en HTML

No es necesario navegar mucho tiempo por Internet para encontrar


páginas Web en las que se piden datos a los navegantes. Quizá las
primeras páginas que hicieron uso de esta posibilidad fueron las de los
sistemas de búsqueda. Los formularios usados en estos sistemas son,
en general, bastantes sencillos, únicamente es necesario un elemento,
conocido como caja de texto, donde sea posible introducir la palabra o
frase que deseamos buscar.

Mg. Manuel Alcázar Holguin


Formularios en HTML

En el siguiente ejemplo


podemos encontrar una
página de sugerencias que
ilustra la utilidad de esta
forma de usar los formularios.
Podemos apreciar en esta
página, que como vemos
permite introducir datos en
varios campos, tras rellenarlos
deberemos pulsar sobre el
botón ’Enviar’ para mandar la
información.

Mg. Manuel Alcázar Holguin


Formularios en HTML

Para crear un formulario el lenguaje HTML proporciona la etiqueta


FORM. Al contrario que la mayoría de etiquetas que hemos visto en las
últimas sesiones ésta existe desde la especificación HTML 2.0 y por tanto
es entendida prácticamente por cualquier navegador existente
actualmente, por lo que puede ser usada con total libertad.
Esta etiqueta consta de una instrucción de inicio, <FORM>, y una
instrucción de fin, </FORM>, entre las cuales podremos insertar todos
los controles que deseemos. Dicho esto podemos crear nuestra primera
página con un formulario. En ella adelantaremos uno de los controles
más usados y sobre el que ya hemos hablado antes: la caja de texto. Un
poco más adelante la trataremos más en detalle, pero la usaremos en
este ejemplo para hacernos una idea de cómo se crea un formulario en
una página Web.
Mg. Manuel Alcázar Holguin
Formularios en HTML

Para empezar, como siempre que creamos una página nueva, creamos un
archivo nuevo en nuestro editor de texto o nuestro editor HTML. En él debemos
insertar el siguiente código:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Introduzca su nombre: <INPUT TYPE="Text">
</FORM>
</BODY>
</HTML>
Mg. Manuel Alcázar Holguin
Formularios en HTML

 La gran novedad de la caja de texto respecto a todos los elementos de las página Web
que hemos visto hasta ahora es que permite a los usuarios introducir texto en ella.
 El lenguaje HTML consta de una etiqueta, INPUT, que permite insertar varios tipos de
controles, entre los que se encuentra el botón de envío. Para indicar el tipo de control
que queremos insertar se usa el atributo TYPE. Para crear el botón de envío debemos
usar TYPE="submit". Por tanto si en el ejemplo anterior queremos insertar uno, debemos
añadir esta etiqueta (de ahora en adelante omitiremos las etiquetas HTML, HEAD y BODY,
pero por supuesto debe seguir usándose):

<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="Text">
<P><INPUT TYPE=“Submit” VALUE="Enviar consulta">
</FORM>

Mg. Manuel Alcázar Holguin


Formularios en HTML

Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite


la posibilidad de incluir varios. En este caso debemos usar un nuevo atributo,
NAME, para dar un nombre a cada uno que permita al servidor diferenciar cual
se ha pulsado.
<INPUT TYPE="Submit" NAME="Nombre" VALUE="Texto del botón">

Por ejemplo podían incluirse botones que simulasen distintas direcciones a las
que acceder tras introducir los datos:

<INPUT TYPE="Submit" VALUE="Arriba" NAME="arriba">


<INPUT TYPE="Submit" VALUE="Izquierda" NAME="izquierda">
<INPUT TYPE="Submit" VALUE="Derecha" NAME="derecha">
<INPUT TYPE="Submit" VALUE="Abajo" NAME="abajo">

Mg. Manuel Alcázar Holguin


Controles de Formularios
Todos los controles que pueden usarse a la hora de crear un formulario
permitirán al navegante insertar información. Unas veces esta información
consistirá en la inserción de un texto, que podrá ser de una sola línea o varias y
que podrá estar oculto o no. En otras ocasiones se ofrecerá entre una serie de
opciones entre las que simplemente hay que elegir una o varias. Todo ello se
podrá realizar de diferentes formas que ahora mismo comenzamos a estudiar.
Para empezar vamos a ver una serie de controles todos los cuales se crean con
la etiqueta INPUT. Para diferenciar entre unos controles y otros se hará uso del
atributo TYPE que puede tomar los siguientes valores: text, password, radio,
checkbox, submit, image, reset, file y hidden. Además del atributo TYPE, esta
etiqueta consta de algunos más cuya función variará del tipo de control estemos
insertando, es decir, en función del valor del atributo TYPE. Uno común a todos
es NAME, ya mencionado, con el que damos un nombre al control, y que es
recomendable usarlo siempre. Otro también común a todos será ALIGN, que
explicaremos con las cajas de texto.
Mg. Manuel Alcázar Holguin
Cajas de texto

Ya hemos introducido antes las cajas de texto. Como resumen recordaremos
que para insertar este tipo de control en una página Web se usa la etiqueta
INPUT (esta misma etiqueta será la utilizada para insertar la mayoría de
controles), con TYPE="text". Es decir:
<FORM>
<INPUT TYPE="text">
</FORM>

Si nuestra intención es insertar más de un control será conveniente darle un


nombre a la caja de texto. Para ello usaremos, tal y como hacíamos con el botón
de envío, el atributo NAME:
<FORM>
<INPUT TYPE="text" NAME="mitexto">
</FORM>
Mg. Manuel Alcázar Holguin
Cajas de texto

 Como podemos apreciar la etiqueta INPUT consta de una única instrucción. Ya hemos
visto los atributos TYPE y NAME que existe siempre en la etiqueta INPUT. Cuando
insertamos una caja de texto, es decir, cuando ponemos TYPE="text" existen otros dos:
 SIZE: Determina la anchura de la caja de texto. El valor por defecto de este atributo es
20 caracteres. En ocasiones convendrá decrementar o incrementar este valor por
defecto.
 MAXLENGTH: Con este atributo limitamos el número máximo de caracteres que
pueden ser escritos en una caja de texto. El valor de este atributo puede ser mayor o
menor que el especificado en SIZE, y que es totalmente independiente.
 VALUE: Sirve para especificar un texto que debe aparecer por defecto en la caja de
texto, antes de que el usuario escriba nada. Este texto suele ser bien instrucciones o
bien la respuesta más probable.
<P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aquí su nombre">
<P>¿Le gusta nuestro Web? <INPUT TYPE="text" VALUE="Si, muchísimo">

Mg. Manuel Alcázar Holguin


Alineamiento de controles

Tal y como hemos indicado antes, todos los controles que insertamos con la
etiqueta INPUT tienen un atributo, llamado ALIGN, que nos permitirá
seleccionar entre varios tipos de alineamiento. El atributo ALIGN puede tomar
los siguientes valores:
 ALIGN="top": Alinea verticalmente el control con la parte superior de la línea.
 ALIGN="bottom": Alinea verticalmente el control con la parte inferior de la línea.
 ALIGN="middle": Sitúa el control a una altura media entre el resto de elementos de la línea.
 ALIGN="left": En este caso estamos alineando el control horizontalmente a la izquierda. No
bordeará el control por su derecha, situándose éste en una línea propia.
 ALIGN="right": Este valor es idéntico al anterior en funcionamiento, sólo que ahora el
control se situará a la derecha de la ventana del navegador.
<INPUT TYPE="text" NAME="nombre" VALUE="valor por defecto" SIZE="tamaño"
MAXLENGTH="longitud_máxima" ALIGN="alineamiento">
Mg. Manuel Alcázar Holguin
Cajas de texto para claves

 En ocasiones puede ser conveniente pedir al usuario algún tipo de información


confidencial como puede ser una clave de acceso o password. Debemos tener en cuenta
que algunos usuarios pueden estar en algún lugar público o, al menos, con gente
alrededor que pueden leer lo que escriba en la pantalla y por tanto no le interesará que
lo que escribe sea mostrado en ésta. El lenguaje HTML permite utilizar, en estos casos,
una caja de texto modificada en la que al escribir se mostrarán únicamente asteriscos.
Para ello debemos usar TYPE="password" en la etiqueta INPUT. Un ejemplo típico de uso
de password es al pedir una identificación, por ejemplo para entrar en algunas secciones
de una página. Para crear este formulario podemos usar el siguiente código:

<H2><FONT COLOR="#8080FF">Formulario de autenticación</FONT></H2>


<FORM>
<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre">
<P>Introduzca su clave: <INPUT TYPE="password" NAME="clave">
<P><INPUT TYPE="submit" VALUE="Enviar">
</FORM>

Mg. Manuel Alcázar Holguin


Botones de elección

Estos controles reciben también el nombre de botones de radio, como


traducción directa de su denominación inglesa radio buttons y porque en
general los navegadores suelen darles una forma circular. Para insertar un botón
de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del
atributo TYPE será radio:
<FORM>
<INPUT TYPE="radio">
</FORM>

Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no


seleccionado (OFF), estando inicialmente todos en la posición OFF. También es
posible especificar que un botón determinado esté seleccionado inicialmente
insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:
<INPUT TYPE="radio" CHECKED>
Mg. Manuel Alcázar Holguin
Botones de elección
 Los botones de elección suelen ser insertados en los formularios en grupos, dando al
usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un
botón de radio le pasamos a la posición ON y permanecerá en ese estado hasta que
pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio
de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando
seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.
 Para indicar que una serie de botones de elección pertenecen a un mismo grupo
debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos
usar el atributo VALUE para dar un nombre distinto a cada uno de los botones.
Indique el tipo de música que más le guste:
<FORM>
<P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz
<P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop
<P><INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock
<P><INPUT TYPE="radio" NAME="musica" VALUE="Country">Country
</FORM>
Mg. Manuel Alcázar Holguin
Cajas de selección
 Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además
permitirán seleccionar varias opciones en una lista. Al igual que dichos botones tienen
dos posiciones, seleccionados o no seleccionados, estando en esta última posición
inicialmente, a no ser que hayamos usado el atributo CHECKED. Cada caja de selección es
independiente del resto, y por tanto el valor del atributo NAME debe ser diferente en
cada una.
 Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta
vez con TYPE="checkbox". Veamos un ejemplo de uso de este tipo de controles:

Indique su profesión (escoja todas las que procedan):


<FORM>
<P><INPUT TYPE="checkbox" NAME="medico">Médico
<P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador
<P><INPUT TYPE="checkbox" NAME="abogado">Abogado
<P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
</FORM>

Mg. Manuel Alcázar Holguin


Botón de borrado

La mayoría de los controles anteriores permitían al usuario introducir una serie
de datos o elegir entre una serie de opciones. En algún momento decida que
quiere dar marcha atrás y recuperar los datos que aparecieron al principio. Con
este fin existe en el lenguaje HTML un control que permite borrar los datos
actuales de todos los campos del formulario y restablecer los valores por
defecto, si es que los había. Este control recibe el nombre de botón de borrado
o botón de reseteado (reset button). La creación de este control es muy sencilla.
De nuevo usaremos la etiqueta INPUT, esta vez con TYPE="reset":
<INPUT TYPE="reset">

Veamos:

<INPUT TYPE=“reset” NAME=“nombre” VALUE="Texto del botón">

Mg. Manuel Alcázar Holguin


Botón Cerrar Ventana

Para completar la colección de botones de los formularios, nos encontramos con


la posibilidad de insertar un botón genérico, es decir, que no tiene ninguna
función definida, sino la que nosotros queramos darle.
Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden
indicarse con lenguajes de script como JavaScript o VBScript y no con HTML
estándar. Para insertar el código de estos lenguajes se usa el atributo ONCLICK:

<INPUT TYPE=“button” VALUE=“Texto del botón” ONCLICK="código de script">

Consistirá en un botón cuya función será cerrar una ventana del navegador. El
código necesario será:

<INPUT TYPE=“button” VALUE=“Cerrar ventana” onClick="window.close();">

Mg. Manuel Alcázar Holguin


Botón Enlace Ventana

Este tipo de botón es más usado aún y consiste en usar el botón con la misma
función que un enlace hipertexto.
El resultado es más atractivo, pero debemos usarlo con moderación, ya que no
todos los visitantes tendrán navegadores que entiendan este código:

<INPUT TYPE=“button” VALUE=“Cargar


otra ventana”
onClick="window.location.replace
(’button2.html’);">

Mg. Manuel Alcázar Holguin


Cajas de texto multilínea:
TEXTAREA
Las cajas de texto multilínea o áreas de texto son unos campos que funcionan
de manera similar a un editor de texto muy sencillo en el que el usuario puede
escribir. Al contrario de lo que sucedía con las cajas de texto convencionales
(<INPUT TYPE="text">), en esta ocasión será posible escribir varias líneas de
texto, lo que es muy útil para campos en los que se requiere una respuesta
extensa. Por ejemplo, si deseamos que el usuario pueda escribir una serie de
comentarios largos, las áreas de texto serán tremendamente útiles.

<FORM>
<TEXTAREA NAME="texto">
Es la mejor que he visto nunca.
</TEXTAREA>
</FORM>

Mg. Manuel Alcázar Holguin


Cajas de texto multilínea:
TEXTAREA
La etiqueta usada para insertar este nuevo control es TEXTAREA, que consta de
cuatro atributos:
 NAME: El nombre que queremos asignarle al control. Como siempre, este nombre
será enviado junto con los datos del área de texto al mandar el formulario.
 ROWS: El número de líneas de la caja de texto.
 COLS: El número de caracteres visibles de cada línea. Este atributo es similar al
atributo SIZE que vimos en las cajas de texto convencionales.

Por favor haga sus comentarios sobre esta página.


<FORM>
<TEXTAREA NAME=“texto” ROWS=“10” COLS="50">
Es la mejor que he visto nunca.
</TEXTAREA>
</FORM>
Mg. Manuel Alcázar Holguin
Cuadros de selección

Su función será dar a elegir entre una serie de opciones de manera que el
usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas
opciones, como una lista con desplazamiento, o mediante una persiana
desplegable. Enseguida veremos cómo es cada una y cómo crearlas.
Para insertar un cuadro de selección usaremos la etiqueta SELECT, que consta de
una instrucción de inicio y de una instrucción de fin, entre las cuales
introduciremos las diferentes opciones para el usuario. Para insertar estas
opciones usaremos una nueva etiqueta, OPTION, que consta de una única
instrucción. Veamos un ejemplo que ilustra el uso de uso de este tipo de
control:

Mg. Manuel Alcázar Holguin


Cuadros de selección

Veamos un ejemplo que ilustra el uso de uso de este tipo de control:

<FORM>
Elija un color:<BR>
<CENTER>
<SELECT NAME="color">
<OPTION>Verde
<OPTION>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</CENTER>
<INPUT TYPE=“submit” VALUE="Enviar elección">
</FORM>
Mg. Manuel Alcázar Holguin
Cuadros de selección

Existe un atributo, SELECTED, que nos permitirá elegir la opción que debe estar
seleccionada por defecto. Por ejemplo, si en el código anterior queremos que el
color negro aparezca seleccionado inicialmente tendremos que escribir:

<SELECT NAME="color">
<OPTION>Verde
<OPTION SELECTED>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>

Mg. Manuel Alcázar Holguin


Cuadros de selección

En ocasiones puede ser conveniente que todas, o al menos algunas de las
posibilidades sean mostradas directamente, sin tener que pulsar un botón. Para
conseguir esto el lenguaje HTML ofrece el atributo SIZE, que determina el
número de opciones que pueden ser vistas simultáneamente.
Si este valor es 1 (o no se usa el atributo SIZE), se mostrará una persiana
desplegable, como hemos visto hasta ahora. Si es mayor, se mostrará una lista,
que podrá tener barras de desplazamiento si no caben todas las opciones
disponibles. Veamos un ejemplo:

Mg. Manuel Alcázar Holguin


Cuadros de selección

Veamos un ejemplo que ilustra el uso de uso de este tipo de control:


<FORM>
Lista de la compra:<BR>
<CENTER>
<SELECT NAME=“compra” SIZE="6">
<OPTION VALUE="Fruta"> Fruta
<OPTION VALUE="Verdura"> Verdura
<OPTION VALUE="Ternera"> Ternera
<OPTION VALUE="Mantequilla"> Mantequilla
<OPTION VALUE="Salchichas"> Salchichas
<OPTION VALUE="Pasta"> Pasta
</SELECT>
</CENTER>
<P>
<INPUT TYPE=“submit” VALUE="Enviar lista de la compra">
</FORM>
Mg. Manuel Alcázar Holguin
Como usar los datos de un
formulario
Los lenguajes de script, que nos permitirán interactuar con el navegante sin
hacer uso del servidor. Pero la alternativa en la que nos centraremos aquí será
otra, que se basa en la posibilidad de mandar todos los datos de un formulario a
una dirección de correo electrónico. Simplemente necesitamos conocer los
datos del usuario para mandar el catálogo, no necesitamos interactuar con él en
manera alguna.
Para conseguir que los datos de un formulario sean enviados por e-mail
debemos usar las etiquetas ACTION, METHOD y ENCTYPE de la siguiente
manera:
<FORM ACTION="mailto:[email protected]" ENCTYPE="text/plain"
METHOD="post">
<!-- ... -->
</FORM>
Mg. Manuel Alcázar Holguin
Diseña el siguiente
formulario

Mg. Manuel Alcázar Holguin


Mg. Manuel Alcázar Holguin

También podría gustarte