Está en la página 1de 29

HTML

FORMULARIOS

PARTE 4
QUE ES UN FORMULARIO
Un formulario es una pagina web diseñada para que el
usuario pueda introducir datos estructurados (nombres,
apellidos, dirección, etc.) que luego serán
almacenados y procesados en un servidor.
HTML consta de una serie de etiquetas que permiten crear
de forma rápida y sencilla numerosos elementos de entrada
de datos. Estos elementos, que reciben el nombre de
controles.
Por lo tanto, un formulario no es más que un conjunto de
controles cuya información será enviada conjuntamente
cuando el usuario pulse sobre el botón de envío mediante
un programa procesador (Php, Asp, etc.) desde la página
Web hacia el servidor o al revés.
CREACIÓN DE UN FORMULARIO

Para crear un formulario, el lenguaje HTML nos


proporciona la etiqueta FORM.
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.
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Contenido del formulario
</FORM>
</BODY>
</HTML>
TIPOS DE CONTROLES
 Cajas de texto
 Botones tipo Radio
 Botones de selección
 Botón de envío
 Botón de Borrado
 Botones genéricos, etc.
Casi todos estos elementos (excepto las áreas de texto y los cuadros
de lista) se construyen con la etiqueta <input>. La misma que
dispone de un atributo type, con el cual, con solo cambiar su valor
(text, checkbox, radio, etc.), obtendremos el tipo de control que
necesitamos.
CAJAS DE TEXTO
• Para introducir una caja de texto debemos utilizar la
etiqueta INPUT
• <INPUT TYPE="text“ NAME="mitexto">
Además podemos añadir dos atributos mas:
SIZE: Determina la anchura de la caja de texto. El valor por
defecto de este atributo es 20 caracteres, pero en todo caso
siempre será conveniente mantener un valor menor de 50
caracteres

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.
<INPUT TYPE="text" SIZE="20" MAXLENGTH=“40">

 sino usamos el atributo MAXLENGTH el número de


caracteres que pueden introducirse en la caja de
texto no tendrá límite.
PLACEHOLDER: Sirve para especificar un texto que
debe aparecer por defecto en la caja de texto,
antes de que el usuario escriba nada.

<FORM>
<P>Nombre:<INPUT TYPE="text"
PLACEHOLDER="Introduzca aquí su - nombre">
</FORM>

caja-texto
 Para ingresar un email:
Email: <input type="email" />

 Para ingresar una dirección Web:


Web: <input type="url" />
 Para seleccionar un día en el calendario:
Día: <input type="date" />

CALENDARIO
ETIQUETA TEXTAREA

 El elemento textarea representa un campo para la entrada de


texto multilínea. El control asociado a este campo es una caja de
texto que permite editar múltiples líneas de texto regular.
<p><textarea placeholder="Comparte tu opinión!" cols="40"
rows="5"></textarea>

TEXTAREA
LISTA DE DATOS

<select name=“capitales">
<option value=“1">Tarija</option>
<option value=“2" >Sucre</option>
<option value=“3">Cochabamba</option>
</select> LISTA-DATOS
CAJAS DE TEXTO PARA CLAVES

 Siqueremos que el texto introducido en la caja de texto no


sea lejible entonces utilizaremos el atributo password en la
etiqueta input:

<INPUT TYPE="password" NAME="clave">


 Lacaja de texto para claves o passwords simplemente
impide que el texto que se escribe sea mostrado en
pantalla, sin embargo este texto no es codificado al ser
mandado al servidor Web, y por tanto no es seguro
mandar datos confidenciales.
 Las cajas de texto para claves también tienen los
atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos
anteriormente.
BOTONES TIPO RADIO
 Estos controles reciben también el nombre de botones de
radio. 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>


 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.
EJEMPLO:

 <FORM>

 <P><INPUT TYPE="radio" NAME="música" VALUE="Jazz">Jazz


 <P><INPUT TYPE="radio" NAME="música" VALUE="Pop">Pop
 <P><INPUT TYPE="radio" NAME="música" VALUE="Rock">Rock
 <P><INPUT TYPE="radio" NAME="música" VALUE="Country">Cumbia
 </FORM> RADIO
BOTONES DE SELECCIÓN
 Lascajas de selección guardan ciertos parecidos con los
botones de radio, pero además permitirán seleccionar
varias opciones en una lista.
 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 el
atributo:
<P><INPUT TYPE="checkbox“ NAME=“nombre“ >
EJEMPLO:

 <P>QUE TIPOS DE MEDIOS DE COMUNICACIÓN UTILIZA:


 <FORM>

 <P><INPUT TYPE="checkbox" NAME=“Television">Television


 <P><INPUT TYPE="checkbox" NAME=“Radio">Radio
 <P><INPUT TYPE="checkbox" NAME=“Periodico">Periodico
 <P><INPUT TYPE="checkbox" NAME=“Celular">Telefono Celular
 </FORM> SELECCION
BOTON DE ENVÍO

Una vez que hemos llenado nuestro formulario lo


podemos enviar con la etiqueta:
< INPUT TYPE="submit" VALUE="Enviar">
ENVIAR
BOTÓN DE BORRADO

 El botón de borrado permite borrar los datos


actuales de todos los campos del formulario y
restablecer los valores por defecto, si es que los
había.
<INPUT TYPE="reset“ VALUE="Restablecer">
BORRAR
IMAGENES

 HTMLpermite una manera alternativa para insertar un


botón de envío personalizado, al poder usar en lugar del
botón normal que hemos visto anteriormente una imagen
creada por nosotros mismos. En este caso la etiquet TYPE
deberá contemplar los siguientes atributos:

<INPUT TYPE="image" NAME=“nombre" SRC="envio.gif">


FF4
ALINEAMIENTO DE CONTROLES
Todos los controles que insertamos con la etiqueta INPUT tienen el atributo ALIGN, que
nos permite 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 en que


es insertado.
 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. Al contrario de lo que ocurría con las imágenes y con las tablas, el texto
no bordeará el control por su derecha, situándose éste en una línea propia.
PARA SU SITIO WEB “CURSO DE
HTML“ AÑADIR UN FORMULARIO DE
CONSULTAS.

PRACTICA 3: