Módulo 3 - Lección 19 - Etiquetas form, input

Un formulario es una sección de un documento que contiene:
- Contenido normal
- Código

- Controles

- Rótulos

Permiten que el usuario envíe información al servidor

Etiquetas de formularios:

<form>
<form action="http://www.rutadestino.com" method="get">
Fundamental para que el resto de elementos puedan ser enviados

Todos los datos que se quieran enviar deben estar entre las etiquetas <form> y </form>

Sin representación grafica
Atributos:

·       action es el único atributo requerido. Espera una cadena de texto que especifique la url o ruta a la acción de destino que procese los datos de la petición. Es posible utilizar una ruta absoluta o una relativa.

·       method indica la forma de envío.
acepta dos valores:
GET (por defecto)
Es el que utilizamos normalmente al navegar
- Datos visibles en la URL
- Limitada. El límite depende de cada navegador.
- Favoritos
Utilizaremos GET en los casos en el resultado del envío sea siempre el mismo y cuando queramos que el resultado se pueda guardar, por ejemplo en un formulario de búsqueda.
POST
- Es un método más seguro que GET para el envío de información sensible como pueden ser contraseñas y que los datos no son visibles en la URL del navegador.
- No tiene límite en el envío
- posibilita en envío de archivos al servidor.
Ejemplo: un formulario de registro

·       accept-charset
Espera una lista de juego de caracteres separados por coma.
Normalmente se utiliza el juego de caracteres UTF-8 y en algunos casos ISO-8859-1 que define el alfabeto latino.
No es un atributo muy común.

·       enctype
Tipo de codificación:
- application/x-www-form-urlencoded (por defecto) convertirá todos los espacio en signos + y caracteres especiales en valores ASCI hexadecimal.
- multipart/form-data se utiliza cuando vayamos a subir ficheros mediante el formulario
- text/plain solo convierte los espacios en signos + pero los caracteres especiales no son convertidos.

<input>
<input type="text" name="nombre" id="nombre">

Es una de las etiqueta más utilizadas en los formularios.
Con ella podemos definir gran parte de los controles de los formularios como:
- Texto
- Casillas de verificación

- Casillas de opción (radio)

- Archivos
- Texto enmascarado (password)

- Campos Ocultos
- Botones varios

El etiqueta input no tiene etiqueta de cierre, pero debe cerrarse convenientemente <input.../>

Atributos:

·       name
es común a todos los campos del formulario, no explusivo de input. Indica el nombre que recibirá el campo al ser inviado.
Ejemplo <input name="email" /> donde email es el nombre del campo.

·       type
Es uno de los atributos más importantes ya que define en qué se convertirá el control. Pese a que no es obligatorio, es recomendable su uso.
Atributos:

o   "text" Por defecto es de tipo “text”
El tipo de <input /> por defecto es “text”, no en vano el campo de texto el más común.
Los <input /> de tipo texto, pueden limitar el número de caracteres que se insertan.
Esto es útil, por ejemplo, para controlar que ciertos campos, que en base de datos están limitados, no lleguen con más datos de los que se pueden almacenar.
“maxlength” es el atributo encargado de ello y el valor debe ser un número entero.
El atributo “size”, también espera un número y se traduce en la anchura del campo de texto en caracteres; es decir, un <input /> con size=“3” será lo suficientemente ancho para mostrar tres caracteres, pero no cuatro.
Al estar directamente relacionado con el estilo, desaconsejo el uso de este atributo. En la medida de lo posible, trata de separar estructura de estilo en tus desarrollos web, te facilitará el mantenimiento.
El campo “value” en <input /> de tipo texto, indica el valor que tiene este campo por defecto.
Por ejemplo, y aunque en la actualidad no se realice esta práctica, podríamos poner el texto “Buscar…” en un campo para aclarar su funcionamiento.
Este texto no se borrará cuando el componente obtenga el foco y el usuario deberá borrarlo para poder insertar su propia cadena.
Normalmente esta práctica se realiza apoyándose en Javascript o con atributos nuevos de HTML5.

o   “checkbox” indica que el campo será una casilla de verificación, después.
Como estas casillas suelen organizarse en grupos de selección múltiple, es importante que el atributo “name” de todas las casillas de verificación del mismo grupo tenga el mismo nombre, de forma que al recibirlas, el servicio destino sepa que esos valores corresponden al mismo campo.
<input type="checkbox" name="temas" /> HTML
<input type="checkbox" name="temas" /> CSS
El atributo “checked” toma como valor el texto “checked” e indica que la casilla aparece marcada por defecto.
<input type="checkbox" checked="checked" /> HTML
<input type="checkbox" /> CSS
El atributo “value” en este tipo de elementos es imprescindible.
Le indica al formulario qué valor debe enviar si la casilla está activada.
Si no se declara, el formulario enviará información imposible de procesar.
<input type="checkbox" value="html" /> HTML
<input type="checkbox" name="css" /> CSS

o   “radio” dibujará una casilla de opción o un botón tipo radio.
Son casillas de opción
La particularidad de estas casillas es que, a diferencia de las de verificación, solo es posible seleccionar una de las opciones.
<input type="radio" name="tema" /> HTML
<input type="radio" name="tema" /> CSS
Para que el control funcione correctamente es necesario que todos los elementos de cada grupo de casillas de opción, tengan el mismo valor para el atributo “name”.
Del mismo modo que las casillas de verificación, un <input /> de tipo “radio”, mediante el atributo “checked”, se mostrará seleccionado por defecto.
<input type="radio" checked="checked" /> HTML
<input type="radio" /> CSS
El atributo “value” del <input /> seleccionado, será el que se envíe junto al formulario.
<input type="radio" value="html" /> HTML
<input type=" radio " name="css" /> CSS

o   “file” muestra un botón, que abrirá una ventana para seleccionar un archivo, también muestra el nombre o la ruta al archivo, dependiendo del navegador.
Según la W3Schools, con el atributo “accept” es posible especificar los tipos de archivo que aparecen para ser seleccionables pero, ni está implementado por todos los navegadores mayoritarios, ni supondrá filtro alguno, ya que la opción de “Todos los archivos” permitirá al usuario subir cualquier tipo de archivo.
<input type="file" accept="image/gif" />
Recuerda que la etiqueta <form> tiene un atributo “enctype” que debe tener el valor “multipart/form-data” para el envío de archivos.
<form enctype="multipart/form-data">
            <input type="file".../>
</form>

o   “password” genera un campo de texto enmascarado, ideal para campos de contraseña;
Tienen las mismas opciones que los campos de tipo texto.

o   “hidden” es un campo oculto, para almacenar información que el usuario no vaya a introducir de forma activa. Por ejemplo, podríamos incluir el tiempo que ha tardado el usuario en rellenar el formulario.
En campos type=“hidden” solo son útiles los atributos “name” y “value”, puesto que no son visibles para el usuario.

o   “button” mostrará un botón;
Los botones son otro elemento común en los formularios.
Cada vez es más raro verlos con los estilos del navegador por defecto, puede que porque sean demasiado feos o porque no encajen en el diseño de la web.
Para cada tipo de botón se utiliza un tipo de <input /> diferente, vamos a verlos todos:

§  Al marcar un <input /> como tipo “submit”, se dibujará un botón con el texto “Enviar” cuya acción será enviar el formulario al destino marcado en el atributo “action” de la etiqueta <form>.

§  Los botones del tipo “reset” suelen tener un texto similar a “Restablecer”. Este botón reinicia el formulario, dejándolo como si el usuario no hubiese modificado nada.

§  También es posible insertar botones con otro tipo de acciones, para ello se establece el atributo type=“button”.

o   Para dotar de acción a estos botones, es necesario trabajar con eventos Javascript; bien intrusivo, mediante atributos como “onclick” o bien no intrusivo, haciendo uso de librerías o scripts no incrustados en HTML.
Esto se verá en el tema Javascript.
Existe un tipo, raramente utilizado, que consiste en usar una imagen como botón.
Si establecemos el atributo type=“image”, podremos ver este resultado.
Para este tipo de <input />, se utilizan, del mismo modo que para las imágenes, los atributos alt, para incluir un texto alternativo y src, para especificar la ruta a la imagen.
Este tipo de botones está a medio camino entre estructura y diseño, por lo que desaconsejo su uso. Podremos trabajar el estilo del botón mediante CSS
El atributo “value”, empleado en botones, especifica el texto que aparece en el botón; salvo en el caso de los botones de tipo imagen que, obviamente, no muestran texto.

o   “submit” dibuja un botón “Enviar” que al pulsarlo enviará el formulario a la acción que corresponda;

o   “image” utiliza una imagen con la misma función que el botón de tipo “submit”. esta opción es poco utilizada;  

o   “reset” inserta un botón que reiniciará el formulario, borrando los datos insertados por el usuario.

o   "maxlength" Los <input /> de tipo texto, pueden limitar el número de caracteres que se insertan.
Esto es útil, por ejemplo, para controlar que ciertos campos, que en base de datos están limitados, no lleguen con más datos de los que se pueden almacenar.
“maxlength” es el atributo encargado de ello y el valor debe ser un número entero.

o   "size"
El atributo “size”, también espera un número y se traduce en la anchura del campo de texto en caracteres; es decir, un <input /> con size=“3” será lo suficientemente ancho para mostrar tres caracteres, pero no cuatro.
Al estar directamente relacionado con el estilo, desaconsejo el uso de este atributo. En la medida de lo posible, trata de separar estructura de estilo en tus desarrollos web, te facilitará el mantenimiento.

o   " checked "
El atributo “checked” toma como valor el texto “checked” e indica que la casilla aparece marcada por defecto.
           

·       disabled
Bloquea el campo para que no pueda ser utilizado. Para cumplir con estándares (argumento=“valor”), “disabled” se iguala a la cadena “disabled”.
<input tipe="text" value="Hola Mundo" disabled="disabled">
Dibujará en pantalla un campo bloqueado con el texto "Hola Mundo"

·       readonly
readonly” funciona de forma parecida a “disabled” pero, aplicado por ejemplo a un input de tipo “text”, sería posible seleccionar el texto y copiarlo.
Sería un campo de solo lectura.

·       value
Ciertos campos necesitan de un atributo “value” para completar su funcionalidad, como veremos en los ejemplos a continuación.
El campo “value” en <input /> de tipo texto, indica el valor que tiene este campo por defecto.

Consejos

·       sin form no hay envío pero si campos
·       implementa siempre <input type="value">
·       implementa siempre <input type="submit">
·       separa contenido de estilos

<html>

<head>

<title>Formularioe</title>

</head>

<body>

<h1>Formulario de registro</h1>

<form action="http://www.rutadestino.com" method="get">

  <p>

    <label for="nombre">Nombre: </label>

    <input type="text" name="Nombre" id="nombre">

    <br/> <br/>

    <label for="apellido">Apellidos: </label>

    <input type="text" name="apellido" id="apellido">

    <br/> <br/>

    <label for="sexo">Sexo: </label>

    <input type="radio" name="sexohombre" id="sexohombre" value="hombre">

    <label for="sexo">hombre </label>

    <input type="radio" name="sexomujer" id="sexomujer" value="hujer">

    <label for="sexo">mujer </label>   

    <br/> <br/>

    <label for="correo">Correo: </label>

    <input type="text" name="correo" id="correo">   

    <br/> <br/>   

    <input type="checkbox" name="infor" checked="checked" id="infor">   

    <label for="infor">Deseo recibir información sobre novedades y ofertas: </label>  

    <br/> <br/>   

    <input type="checkbox" name="condiciones" id="condiciones">   

    <label for="infor">Declaro haber recibido informacion sobre condiciones generales del programa y normativa sobre protección de datos: </label>  

    <br/> <br/>   

    <br/> <br/>

    <input type="submit" value="Enviar">

    <input type="reset">

  </p>

</form>

</body>

</html>

.