el
Comic
- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Formularios
Un formulario es un conjunto de controles (botones,
cajas de texto, casillas de verificación, botones radio, etc) que permiten al
usuario introducir datos y enviarlos al servidor web para su procesamiento.
La etiqueta que delimita un formulario es la etiqueta
<form> ...</form>. Los atributos más importantes de la etiqueta
<form> son:
action: contiene el nombre del agente que procesará
los datos remitidos al servidor (por ejemplo, un script de PHP)
method: define la manera de enviar los datos al
servidor. Los valores posibles son:
get: los valores enviados se añaden a la dirección
indicada en el atributo action
post: los valores se envían de forma separada
Si el atributo method no está establecido, el
formulario se comporta como si el valor fuera get.
La etiqueta <form> es un elemento de bloque. En
su interior puede haber cualquier elemento típico de una página web (párrafos,
imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean
los controles.
Las etiquetas que crean los controles en los
formularios son <input>, <button>, <select>,
<optgroup>, <option> y <textarea>. Además, se pueden
estructurar los controles con las etiquetas <fieldset> y <legend>.
Por último, la etiqueta <label> permite mejorar la accesibilidad de los
controles.
El navegador envía únicamente los datos de los
controles contenidos en el formulario. En una misma página puede haber varios
formularios que envíen datos al mismo o a diferentes agentes.
Atributos comunes de los controles
Algunos atributos se pueden utilizar en varios tipos
de controles.
El atributo type
El atributo type de la etiqueta <input> indica
el tipo de control de que se trata.
En HTML 4.01, los tipos de <input> eran: botón
para enviar submit, botón para reiniciar reset, texto text, contraseña
password, archivo file, imagen image y oculto hidden.
En HTML 5 se añadieron los tipos de <input>:
botón button, número number, búsqueda search, teléfono tel, dirección web url,
dirección de correo email, fecha date, hora time, color color y rango range.
En HTML 5.1 se añadieron los tipos de <input>:
mes month, semana week y fecha y hora local datetime-local.
El atributo name
El atributo name identifica al control.
Todos los controles de un formulario deben tener el
atributo name porque, en general, sólo se envían los controles que lo tienen
(aunque hay excepciones, como los controles de tipo imagen o los botones, que
no los necesitan).
En general, los atributos name no se deben repetir,
porque no se recibiría toda la información al enviarla. La única excepción es
el botón radio, como se explica en el apartado correspondiente.
El atributo value
El atributo value permite establecer el valor inicial
de un control, aunque cada control lo utiliza de una forma ligeramente distinta
y algunos controles no lo admiten (área de texto, archivo o imagen).
En algunos casos (botones) el valor se muestra al
usuario y el usuario no puede modificarlo. En otros casos (cajas de texto,
contraseña) el valor se muestra en la página y el usuario puede modificarlo. En
otros casos (casillas de verificación, botones radio, opciones de menú, oculto)
el valor no se muestra en la página y el usuario no puede modificarlo.
En algunos casos (botones, oculto, botones radio) el
atributo value es necesario. En otros casos (casilla de verificación, opciones
de menú) es conveniente. En otros casos (cajas de texto, contraseña, imagen)
puede omitirse. En el caso del selector de archivo, los navegadores no lo
admiten por motivos de seguridad.
El atributo required
El atributo required permite indicar qué controles es
obligatorio rellenar para enviar el formulario.
<p>Nombre:
<input type="text" name="nombre" required></p>
<p>Sexo:
<input type="radio"
name="hm" value="h" required> Hombre
<input type="radio"
name="hm" value="m" required> Mujer
</p>
El atributo placeholder
El atributo placeholder permite mostrar en los
controles de texto un texto que desaparece al escribir en el control.
<p>Apellidos:
<input
type="text" name="apellidos" size="40"
placeholder="Escriba sus dos apellidos">
</p>
El atributo size
El atributo size permite establecer la longitud de los
controles de texto (text, password, search, etc.). Por omisión, las cajas
suelen tener 20 caracteres de longitud.
<p>Nombre: <input type="text"
name="nombre"></p>
<p>Apellidos: <input type="text"
name="apellidos" size="40"></p>
<p>Nacionalidad: <input type="text"
name="nacionalidad" size="20"></p>
Los atributos maxlength y minlength
Los atributos maxlength y minlength permiten establecer
la longitud máxima y mínima, respectivamente, que puede escribir el usuario en
un control de texto (text, password, search, etc.).
<p>Usuario:
<input type="text" name="usuario"
maxlength="6"></p>
<p>Contraseña:
<input type="password" name="password"
minlength="6"></p>
Ejemplo Final
Ya para finalizar deje un ejemplo de un código en html bastante completo tomado ejemplos de atributos anteriormente vistos.
<form action="ejemplo.php" method="get">
<p>Nombre: <input type="text" name="nombre" size="40"></p>
<p>Año de nacimiento: <input type="number" name="nacido" min="1900"></p>
<p>Sexo:
<input type="radio" name="hm" value="h"> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</p>
</form>
Comentarios
Publicar un comentario