Los formularios permiten a los diseñadores de páginas web colocar elementos interactivos para poder recoger información, por ejemplo para un registro de datos, resolver un examen en línea, realizar una encuesta, entre otros.
En esta entrada estudiaremos la estructura que debe tener un formulario, los diferentes campos que podemos agregar y una buena parte de sus atributos.
Para comenzar veamos como se configura un formulario HTML:
form - es el nombre de la etiqueta que indica el inicio del formulario
action="-----" - permite establecer la acción que se realizará luego de presionar el boton al final (de acción) al final del formulario, esta puede ser: enviar datos a correo, procesar con un script de PHP, procesar los datos en un archivo PHP diferente, entre otras opciones.
name="-----" - permite establecer el nombre del formulario
id="-----" - permite definir el identificador del formulario (usado posteriormente en el procesamiento de los datos.
method="----" - indica cómo se enviarán las respuestas, "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación.
target="----" - permite indicar el lugar donde se mostrarán los resultados o mensajes informátivos luego de enviar los datos, las opciones que podemos usar en este atributo son: _new, _parent, _self_ o bien el nombre de un marco flotante.
enctype="-----" - Un atributo opcional de la etiqueta <form> es enctype, que especifica cómo se codifican los datos del formulario, por lo general solo se utiliza cuando se cargan archivos al servidor y la instrucción se completaria de esta forma: enctype="multipart/form-data".
Entre las etiquetas <form> y </form>
Esta estiqueta puede configurarse de diversas formas, a continuación daré algunos ejemplos y tambien ire mostrando los resultados.
1. <input type="text" name="nombre" size="40" maxlength="100" required />
2. <input type="password" name="password" size="10" maxlength="10" required />
3. <input type="mail" name="email" size="40" maxlength="100" required />
4. <input type="submit" value="Enviar" />
5. <input type="reset" value="Cancelar" />
6. <input type="file" name="subir_archivo" />
1. Nombre:
2. Password:
3. Correo Electrónico:
4.
5.
6. Subir un archivo:
Porsupuesto que no será este el resultado final, tansolo es un ejemplo de cada uno de los resultados que obtenemos al utilizar los atributos de la etiquetas <input>.
La etiqueta <textarea>
La etiqueta <textarea> se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta <input>. Esta etiqueta tiene los siguientes atributos:
La etiqueta <select> </select>
Ahora les dejo un formulario completo para que lo prueben, lo que escriban en el llegará a mi correo electrónico.
En esta entrada estudiaremos la estructura que debe tener un formulario, los diferentes campos que podemos agregar y una buena parte de sus atributos.
Para comenzar veamos como se configura un formulario HTML:
<form action="-----" name="-----" id="-----" method="-----" target="-----" enctype="-----">
form - es el nombre de la etiqueta que indica el inicio del formulario
action="-----" - permite establecer la acción que se realizará luego de presionar el boton al final (de acción) al final del formulario, esta puede ser: enviar datos a correo, procesar con un script de PHP, procesar los datos en un archivo PHP diferente, entre otras opciones.
name="-----" - permite establecer el nombre del formulario
id="-----" - permite definir el identificador del formulario (usado posteriormente en el procesamiento de los datos.
method="----" - indica cómo se enviarán las respuestas, "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación.
target="----" - permite indicar el lugar donde se mostrarán los resultados o mensajes informátivos luego de enviar los datos, las opciones que podemos usar en este atributo son: _new, _parent, _self_ o bien el nombre de un marco flotante.
enctype="-----" - Un atributo opcional de la etiqueta <form> es enctype, que especifica cómo se codifican los datos del formulario, por lo general solo se utiliza cuando se cargan archivos al servidor y la instrucción se completaria de esta forma: enctype="multipart/form-data".
Entre las etiquetas <form> y </form>
La etiqueta <form> actúa como contenedor para almacenar elementos que permiten al usuario seleccionar o
introducir datos. Todos los datos se enviarán a la dirección URL
indicada en el atributo action="url" de la etiqueta <form>, por el método indicado en el atributo method="----".
Se puede insertar cualquier elemento HTML en una etiqueta <form>
(como texto, botones, tablas y enlaces), pero los elementos
interactivos son los más interesantes. Estos elementos interactivos son:
- La etiqueta INPUT: Todos los botones y casillas de texto
- La etiqueta TEXTAREA: una casilla de texto
- La etiqueta SELECT: una lista de opciones múltiples
Esta estiqueta puede configurarse de diversas formas, a continuación daré algunos ejemplos y tambien ire mostrando los resultados.
1. <input type="text" name="nombre" size="40" maxlength="100" required />
2. <input type="password" name="password" size="10" maxlength="10" required />
3. <input type="mail" name="email" size="40" maxlength="100" required />
4. <input type="submit" value="Enviar" />
5. <input type="reset" value="Cancelar" />
6. <input type="file" name="subir_archivo" />
1. Nombre:
2. Password:
3. Correo Electrónico:
4.
5.
6. Subir un archivo:
Porsupuesto que no será este el resultado final, tansolo es un ejemplo de cada uno de los resultados que obtenemos al utilizar los atributos de la etiquetas <input>.
La etiqueta <textarea>
La etiqueta <textarea> se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta <input>. Esta etiqueta tiene los siguientes atributos:
- cols: representa el número de caracteres que puede contener un línea
- rows: representa el número de líneas
- name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor.
- readonly: impide que el usuario modifique el texto predeterminado en el campo
- value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto
<textarea rows="3" name="comentarios">
Escriba aquí sus comentarios
</textarea>
La etiqueta <select> </select>
La etiqueta <select> sirve para crear una lista desplegable de elementos (especificados por las etiquetas <option> dentro de ella). Los atributos de esta etiqueta son:
- name: representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
- disabled: crea un lista desactivada, que aparece atenuada
- size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista).
- multiple: Permite al usuario seleccionar varios campos de la lista
<select name="grado">
<option value="primero">Primero</option>
<option value="segundo">Segundo</option>
<option value="tercero">Tercero</option>
<option value="cuarto">Cuarto</option>
<option value="quinto">Quinto</option>
<option value="primero">Primero</option>
<option value="segundo">Segundo</option>
<option value="tercero">Tercero</option>
<option value="cuarto">Cuarto</option>
<option value="quinto">Quinto</option>
<option value="sexto">Sexto</option>
</select >
</select >
Ahora les dejo un formulario completo para que lo prueben, lo que escriban en el llegará a mi correo electrónico.
