Elemento INPUT en el formulario

El elemento INPUT quizás sea el elemento fundamental de cualquier formulario, no solo es la cajita en la que escribimos, abarca también los botones tipo enviar (submit) o resetear (reset) y más. Como habrás leído en estas páginas existen muchos tipos de campo INPUT, estos tipos corresponden con el tipo de dato que se espera en el campo: texto, número, un password, un email.... Estos tipos permiten que el navegador los valide y los complete con posibles valores para facilitar su uso.

Existen elementos input para cualquier tipo de dato que puedas necesitar. Las opciones de lista (datalist), el selector de fechas o el de colores facilitan enormemente el uso del formulario por parte del usuario. Cada input pasa su valor al programa que gestiona el formulario, configurado mediante el atributo action o formaction. Una cuestión elemental de seguridad: este programa siempre debe verificar los datos que recibe. Los datos deben ser del tipo y contenido previstos por el programa. Hay que tener mucho cuidado por ejemplo cuando esos datos se van a usar en una pagina que use una base de datos, se debe evitar que puedan introducirse órdenes SQL que comprometan la seguridad del sitio.

Los inputs pueden actuar como botones para cerrar y enviar el formulario o para realizar alguna acción en la página. Este grupo de inputs son los tipos button, submit, reset, image. Y todos comparten los siguientes atributos

atributo	sustituye a	uso
for	--	valor del id del form al que pertenece el control
formaction	action	url del programa
formnovalidate	novalidate	no comprobar los campos
formmethod	methof	forma de envio GET/ POST
formtarget	target	Destino de la página de resultado
formenctype	enctype	Tipo de codigo de caracteres

Excepto el atributo form, los restantes sobreescriben al correspondiente atributo del elemento <form>. El atributo for es útil cuando el botón está fuera del elemento <form></form>.

Dentro de este grupo de botones nos encotramos con diferentes tipos (<input type= ...>)

• submit: Al pulsar este botón se envía el formulario al programa que lo procesa con todos los datos tecleados.
• reset: Al pulsar todos los campos se resetean, se borrar lo escrito
• image: Es un botón submit pero con una imagen en lugar de un texto. Cuando se usa este tipo de botones para enviar los datos del formulario también se envía las coordenadas X, Y de la imagen donde se ha pulsado con el ratón. Posee un algunos atributos extra por la iamgen
  • Alt: Un comentario sobre la imagen
  • width, height: para el tamaño: ancho y alto
  • src: la url de la imagen.
• button: Es un botón genérico al que se le asocia un script mediante un evento

En ellos el atributo value es el texto que aparece en el botón, salvo en el caso de tipo imagen.

En HTML existe un elemento bastante similar a estos botones input, se trata del elemento <button></button>. Su atributo type permite que funcione como un boton sin comportamiento predeterminado (type="button"), sería como un <input type="button">, como un botón de envío (type="submit") sería similar a <input="submit"> o como un reset (type="reset")sería similar a un <input type="reset">. Por lo demás comparte todos los atributos señalados para este tipo de elementos input.

Estos elementos input engloban los campos que permtiten entradas desde el teclado con datos numéricos y de tipo fecha y hora. HTML5 añade atributos que enriquecen y facilitan la entrada de información. Los atributos comunes a estos controles son

Atributos específicos de números y fechas

autocomplete	on off	Habilita autocompletar para cuando se está escribiento texto. Hace más cómoda la entrada de texto, pero también puede ser inseguro.
list	datalist_id	Referencia a un elemento <datalist> con las opciones o valores predefinidos para un input. Esos inputs son listas desplegables.
max	número o fecha	Valor máximo admitido en el campo.
min	número o fecha	Valor mínimo admitido en el campo
placeholder	texto	El valor escrito en este atributo aparecerá dentro del campo y desaparece automáticamente al entrar con el cursor. Útil para dar información al usuario sobre lo que se espera que teclee.
readonly		El campo es de solo lectura, no puede escribirse en él.
required		Este campo debe ser rellenado antes de enviar el formulario
step	number	Para campo numéricos nos da el intervalo entre valores consecutivos. Por ejemplo si es 5 y los valores a teclear están entre 1 y 10 solo serán válidos 1,6,11,.....

Los tipos de input que comparten estos atributos son campos que aceptan números, fechas y rangos de valores. Estos elementos son los tipo: number, range y relativos a fechas y horas: date, month, week, time, local-date, local-time.

Algunos de estos atributos se usan también en otros tipos de input, y con la misma finalidad. O sea, vas a volver a verlos. Y ahora este ejemplo de formulario con este tipo de datos.

<form action="/editor/verdatos.php" method="post">

<p>Alquiler de EBooks por días</p>
<label>Fecha de comienzo:
<input type="date" name="inicio"></label>
<label><br>
<br>
¿Cuantos días (de 1 a 4)?:
<input type="number" min="1" max="4" name="dias" required>
</label><br>
<br>
<label for="precio">Precio </label>
<input type="text" value="1.25 €/dia" name="precio" readonly><br>
<br>
<label>Califica este servicio (0 a 10)
<input type="range" min="0" max="10" name="puntos">
</label></br>

<input type="submit" name="Enviar">
</form>

Puedes guardar este código para tu ejercicio07.html. Como ves el control range queda como una especie de slider o deslizador para números enteros por defecto entre 0 y 100, límites que puedes modificar con los atributos min / max.

Por defecto el elemento input considera lo que se teclea como texto (type="text"), pero HTML 5 permite distinguir algunos tipos particulares dentro del texto y los valida de acuerdo con con unas reglas adecuadas a cada tipo. Son los: email, password, search, url, telephone. Ya se ha visto el uso de url en algún ejemplo para mostrar el uso de validate. Ahra nos detenemos un pco en ellos. Primero los atributos que comparten

Atributos específicos para textos

autocomplete	on off	Habilita autocompletar para cuando se está escribiento texto. Hace más cómoda la entrada de datos, pero también puede ser inseguro.
list	datalist_id	Referencia del elemento <datalist> que contiene las opciones o valores predefinidos para un input. Esos imputs son listaas desplegables.
maxlength	número	Número máximo de caracteres del texto tecleado.
minlength	número	Número mínimo de caracteres del texto tecleado.
pattern	regexp	Expresión regular o patrón al que debe ajustarse el texto tecleado.
placeholder	texto	El valor escrito en este atributo aparecerá dentro del campo y desaparece automáticamente al entrar con el cursor. Útil para dar información al usuario sobre lo que se espera que teclee.
readonly		El campo es de solo lectura, no puede escribirse en él.
required		Este campo debe ser rellenado antes de enviar el formulario
size	número	Ancho en caracteres del cuadro de INPUT.

Los definidos como email, url, telephone son realmente tipo text con un pattern ya definido. Las expresiones regulares son una especie de reglas que usan comodines para definir un formato de texto determinado. Por ejemplo un codigo postal podría definirse como una serie de cinco números, esta definición se escribiría como [0-9]{5}. Puedes usar las expresiones regulares de Javascript.

El tipo email admite un atributo denominado multiple que permite escribir en el campo varios emails separados por coma.

El tipo text (o search) admite un atributo denominado dir para indicar idiomas escritos de derecha a izquierda (rtl) frente a los escritos de izquierda a derecha (rtl).

El input type="password" simplemente oculta lo que se teclea y muestra asteriscos o alguna forma para ocultar el texto a la vista.

Los inputs no siembre son campos para teclear datos también existen inputs en los que dar una respuesta tipo si/no, activado/desactivado. Allí donde solo dhay dos valores posibles. Son los inputs checkbox (casilla de verificación) y radio button (opción).

El control checkbox permite una entrada sino en un conjunto de valores, mientras que radio button se usa para entradas excluyentes entre si. Los argumentos exclusivos de estos inputs son

Atributos específicos de checkbox y radio

required		Este campo debe ser rellenado antes de enviar el formulario
checked	checked	Para campos tipo checkbox o radio, indica que la opción está selecionada por defecto.

Son controles típicos para respuestas como sexo (M/F), trabaja (si/no), y donde se puedan elegir varias respuestas. Por ejemplo en una compra puedes elegir una de tres formas de pago (radio button), pero puedes comprar el artículo en uno o varios formatos (checkbox)

Opciones para la compra
<form action="/editor/verdatos.php">
<p>Ha comprado el libro &quot;Los asquerosos&quot;.</p>
<p>Forma de pago</p>
<p>
<label>
<input type="radio" name="Pago" value="visa" id="Formato_0" required>

Visa
</label>
<label>
<input type="radio" name="Pago" value="paypal" id="Formato_1">
Paypal</label>
<label>
<input type="radio" name="Pago" value="transferencia" id="Formato_1">
Transferencia</label>
</p>
Formatos en que lo desea recibir
<p>
<label>
<input type="checkbox" name="Formato_0" value="Ebook" id="formato_0">

Ebook
</label>
<br>
<label>
<input type="checkbox" name="Formato_1" value="Papel" id="formato_1">
Papel </label>
<br>
<label>
<input type="checkbox" name="Formato_2" value="Audiolibro" id="formato_2">
Audiolibro</label>
<br>
</p>
<p>
<input type="submit" value="enviar">

Los inputs de tipo radio deben agrupar las opciones posibles para que al elegir una se desactiven las otras. Esto se logra usando el mismo atributo name para todas las opciones posibles. En el ejemplo se usa Pago (name="pago").

El input de tipo checkbox no necesita esa unificación de nombres, sin embargo es recomendable usar nombres que hagan ver que son valores que se refieren al mismo dato, para conseguir un código más claro y para el programa de gestión del formulario.

Mediante un formulario un usuario puede enviar archivos al servidor. Para eso se usa un tipo especial de input, el type=file. Para lograr que el archivo se envíe es necesario que el formulario use el meétodo POST y el enctype (tipo de cifrado) en multipart/form-data. De esta manera el programa de gestión recibirá el archivo y lo podrá almacenar en el servidor o hacer lo que esté programado.

Este campo utiliza el explorador del sistem operativo para que accedar al archivo que quieras subir. Si se usa la opción multiple puedes seleccionar varios archivos usando la tecla CTRL y el ratón (en windows).

Los atributos particulares para este tipo de control son

Atributos específicos para file

accept	Extensión audio/* video/* image/* tipo_de_medio	Indica el tipo de archivos que se esperan para subir. Actúa como un filtrado de la lista de archivos que el explorador mostrará a la hora de seleccionar los que se quieran subir. Es importante señalar que el navegador no comprueba el tipo de archivo enviado. POr uestión de seguridad el programa que procesa el formulario debe verificar que el archivo enviado se corresponde con la extensión y que es del tipo que se espera. Con el nombre de archivo también se envía información sobre el tamaño y el tipo
required		Este campo debe ser rellenado antes de enviar el formulario
multiple		Permite seleccionar varios ficheros. En Windows se usa la tecla CTRL con el ratón

 

<form action="/editor/verdatos.php" method="post">
<label>Seleccionar el archivo para subir: <br><br>
<input type="file" name="documento" accept=".doc">
</label><br><br>
<input type="submit" name="enviar" value=" Subir ">
</form>

El filtro accept tan solo filtra los archivos mostrados en el explorador que se abre para seleccionar el que quieras subir. El programa debe verificar que se trata del tipo adecuado. Las extensiones son poco o nada fiables para asegurar se se trata de una rchivo tipo texto o imagen.

Solo quedan dos tipos de campos input: hidden y color.

El input de tipo hidden es un campo oculto, que no se ve en el formulario. No tiene ningún atributo específicoy se utiliza para pasar valores de control al programa que procesa el formulario, valores que el usuario no necesita ver ni puede modificar. No hay que dejarse engañar por lo de campo oculto (hidden), cualquier usuario que acceda a las herramientas del desarrolaldor o a la vist de códigoverá su contenido. Por tnao nada de usarlo para códigos de acceso o cualquiere inofrmación sensible.

El tipo color como se nombre indica es una utilidad para poder seleccionar códigos de color con un color-pcker, o selector de colores. En este campo puedes seleccionar un color y el cuadro del campo se verá con ese color. No se ve el código que se envía al programa del formulario. Admite el aributo list con un dalaist conteniendo códigos hexadecimales para listar (si no se usa un datalist el navegador ofrece una gama de colores por defecto).

<form action="/editor/verdatos.php" method="post">
<label for="funda">Seleccionar color: </label><br><br>
<input type="color" name="funda" id="funda" list="colores" value="#ff0000">
<datalist id="colores">
<option value="#ff0000">
<option value="#0000ff">
<option value="#00ff00">
</datalist><br><br>
<input type="submit" name="enviar" value=" Subir ">
</form>