Formularios

HTML5
 Formularios

<form> </form>
Elemento que crea interactividad con el usuario

Con este objeto el usuario podrá pedir y ofrecer información.

Dentro de los distintos usos de los formularios se encuentra:
Facilitar datos personales para recibir cierta información
Generar un listado de productos, para ser escogido por el usuario
y recibir dicha información.
Otras etiquetas que trabajan con formularios son:
<input /> (define los campos de entrada)
<select /> (define los campos de selección)
<textarea></textarea> (define las áreas de texto)
FORMULARIOS
<form action=“archivo de tratamiento” method=“post/get”>elementos
del formulario</form>

Declaración del formulario <form> atributos:

action determina la acción que debe realizarse al pulsar el botón de

ejecución

method indica el método de transferencia de la info. introducida den

el formulario. Pueden emplearse los método get cuando se trate de
scripts (cgi o php, por ejemplo) y post si la info. Va a ser enviada por
correo.

enctype determina la forma de codificación empleada para el

transporte del contenido del formulario.
Definición de campos de entrada <input />
Se emplea para definir todos los elementos del formulario, como
botones, cajas de texto, casillas de verificación, etc. El atributo que
determina el tipo de elemento es type. Los distintos tipos de entradas
son:
text se usa para la entrada de textos
checkbox cuadro vacío de selección. Permite selecciones múltiples.
hidden se usa para pasar los datos adquiridos a otro sin que se
visualice nada en pantalla
password permite la introducción de texto visualizándose para cada
carácter un asterisco
radio circulo vacío de selección. Solo permite una operaciones entre
varias
reset borra todos los datos introducidos en el formulario
submit envía la información del formulario
 FORMULARIOS
text campos básicos para todo formulario:

<input type=“text” id=“nombre” name=“nombre” size=“30” />

El valor por defecto del atributo type en los campos input es text; por lo tanto, si lo omitimos
en la declaración del input, el navegador lo interpretará como un campo de texto. Atributos:

type=“text” indica que se trata de un campo de texto

size determina el # de caracteres visibles en la casilla
id identificador del elemento, que impide que haya dos elementos con el mismo nombre
name asigna el nombre a la variable de campo
maxlength delimita el # máximo de caracteres a ser introducidos.
value permite poner un valor inicial para la casilla
title muestra una leyenda al situar el cursor sobre el campo

<input name=“Sugerencia” id=“Sugerencia” type=“text” title=“introduzca una sugerencia”

value=“escriba aquí ….” size=“20” maxlength=“180” />
Formularios

Se puede completar la definición del campo asociando un texto al

mismo, con la finalidad de informar al usuario. Para ello disponemos de
la etiqueta <label></label> que se encarga de asociar un texto con un
determinado elemento del formulario.

Password

Password se usa para introducir claves de acceso. Los atributos son

los mismos que los aplicados al campo texto.

<input name=“clave” id=“clave” type=“password” title=“introduzca la

clave de acceso” value=“” size=“8” maxlength=“8” />
Formularios

Hidden campos de texto ocultos para el usuario, son útiles para pasar
variables en formularios a las que no debe tener acceso el usuario. Aql
igual que el anterior es obligatorio especificar los atributos name, value e
id.

Checkbox
Checkbox casillas de verificación, usadas para seleccionar mediante un cuadrado
una serie de elementos del formulario. Requieren los atributos name, value e id. Por
regla general id y name se escriben con el mismo valor.
Puede incluirse el atributo checked por defecto así: checked=“checked”
<p>Seleccione una opci&oacute;n:<br />
<input name=“Sexo” id=“Hombre” type=“checkbox” value=“Hombre_ok” /><br />
<input name=“Sexo” id=“Mujer” type=“checkbox” value=“Mujer_ok” /></p>
 FORMULARIOS
Radio solo permite elegir una opción entre todas. Requieren los
atributos name, value e id. En este caso es muy importante que el
identificador y el nombre no sean idénticos, ya que solo se pude
seleccionar una opción de las disponibles.
FORMULARIOS
Definición de campos de selección <select></select> permite al usuario
seleccionar una única opción de un conjunto de elementos mostrados
como una lista desplegable. Las distintas opciones del campo de
selección se introducen mediante el elemento <option></option>
Con el atributo select se visualiza por defecto una determinada opción de
lista.
selected=“selected”

Otros atributos:
multiple como por defecto solo puede ser seleccionada una sola opción,
con este atributo se selecciona más de una, pulsando la tecla Ctrl junto
con la opción.
name especifica el nombre de la lista de selección
size determina el número de ítems visibles superior a 1. en este caso
muestra una barra de desplazamiento vertical

Formularios
<select name=“aspecto” size=“1”>
<option
selected=“selected”>hermosa</option>
<option>bonita</option>
<option>fea</option>
<option>horrible</option>
<option>horrorosa</option>
</select>
Área de texto <textarea>
<textarea> permite definir áreas de
texto de múltiples líneas. Requiere
de los atributos name, title e id. Para
definir las dimensiones del área de
texto se dispone los atributos:
cols numero de caracteres de ancho
de la ventana de texto
rows establece el numero de líneas
visibles del área de texto, en
caracteres
<textarea name=“quejas” id=“quejas”
rows=“8” cols=“60”>
Aproveche este espacio para realizar sus
quejas
</textarea>
Formularios

Boton reset se usa para limpiar el contenido del formulario, su nombre

se especifica con el atributo value.

<input type=“reset” value=“Borrar” />

Formularios

Boton submit se encarga de enviar el formulario. su nombre se especifica

igualmente con el atributo value.

<input type=“submit” value=“pulsa aqu&iacute; para enviar al formulario” />

Formularios
<fieldset>
Un formulario se puede dividir en varias secciones: datos de usuario,
datos bancarios, información adicional (cosas de interés, hobby etc). La
directiva <fieldset> nos da la posibilidad de agrupar lógicamente las
secciones de un formulario. Precisamente, coloca un borde alrededor de
cada sección, separándolas unas de otras.

<legend>
Con la directiva <legend> se puede añadir mas información a las
agrupaciones creadas con <fieldset>. Practicamente, la directiva añade un
titulo a cada agrupación, ayudando así a los usuarios en entender la lógica de
los datos requeridos.
<fieldset>
<legend>agrupaciom</legend>
<input type="text" />
</fieldset>
Ejemplo de Formulario
<form id="formulario">
<p>
<fieldset form="formulario">
<legend>Datos de usuario</legend>
<p><input type="text"> Nombre</p>
<p><input type="text"> Apellido</p>
</fieldset> </p>
<p>
<fieldset form="formulario">
<legend>Datos bancarios</legend>
<p>
<select>
<option>Selecionar tarjeta</option>
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
<option>Tarjeta Aurora</option>
</select>
</p>
<p><input type="number">Numero de tarjeta</p>
</fieldset> </p>
<p>
<input type="submit">
<input type="reset"> </p>
</form>