Entrada de datos en Formularios

La entrada de datos al formulario se puede realizar con distintos tipos de elementos. El elemento input es quizás el más completo en esta tarea, pero tiene limitaciones y es completado con los elementos select, datalist y textarea.

Al igual que con los restatnes datos enviados al programa de servidor, la información recogida con estos tipos de campo también debe ser filtrada y comprobada para evitar fisuras de seguridad en el sitio web.

El elemento select permite mostrar una lista de valores desde la que el usuairo puede seleccionar uno o más de ellos. Al seleccionar el elemento se despliega una lista con valores entre las que el usuario selecciona uno (por defecto) o varios (si posee el atributo multiple ), para esto se usan las teclas CTRL-Click (CMD-Click en Mac).

Atributo	Uso
autocomplete	Permite completar automáticamente lo tecleado por un usuario. No tiene sentido en este elemento
disabled	Bloquea el control para qu no pueda editarse
multiple	Indica si pueden seleccionar más de un valor (CTRL-click o CMD-click)
required	Si es obligadtorio rellenar este campo
size	Alto del control, en número de filas.

La lista de valores se construye con elementos <option></option> , esta etiqueta encierra el texto que se verá en la lista, mientras que en su atributo value anotamos el valor que se enviará al programa que procesa el formulario. También pude llevar el atributo selected, para aquella o aquellas opciones (si multiple) que deban aparecer como seleccionadas por defecto. Si no se usa el valor seleccionado por defecto es el primero de la lista.

<form action="/editor/verdatos.php" method="post">
<label>Elige la marca de tu Ebook </label>
<p>
<select name="marcas">
<option value="">Seleccionar...</option>
<option value="kindle">Amzon Kindle</option>
<option value="fnac">Lector de la Fnac</option>
<option value="bq">El lector BQ</option>
</select>
</p>
<input type="submit" value="Enviar">
</form>


En este ejemplo se dan tres posibles respuestas. Observa que el valor (value) es lo que envía el formulario al programa, el texto de cada opción solo se usa para mostrarlo en el navegador.

El elemento datalist se parece al select porque ofrece una lista de valores, pero en este caso son valores sugeridos. El valor enviado con el formulario es el valor tecleado en un campo input.

Este elemento solo funciona con los elementos input numéricos o de textos. No posee ninguno de los atributos usados en los elementos de los formularios.

<form action="/editor/verdatos.php" method="post">
<label for="generos">¿Qué genero de literatura prefieres?</label>
<div>
<input name="generos" list="generos">
<datalist id="generos" >
  <option value="Ficcón">
  <option value="Histórica">
  <option value="Divulgación">
  <option value="Poesía">
</datalist>
</div>

En este ejemplo puedes elegfir de la lista de opciones o teclear un valor no contenido en esa lista. Se trata solo de ofrecer algunos valores posibles. Si has usado el formulario con anterioridad y se coloca el atributo autocomplete= "on", el navegador añade a esta lista otros valores usados anteriormente.

Observa que el tamaño del área de texto es modificable por el usuario, en la esquina inferior derecha verás un pequeño tirángulo: si pulsas y arrastras con el ratón verás que el tamaño del area se modifica. Puedes desactivar este redimensionado mediante la regla de estilo CSS resize:

<form action="/editor/verdatos.php" method="post">
<label for="sugerencias">Escribe tus sugerencias<p>
<textarea name="sugerencias" cols="40" rows="5" maxlength="140" placeholder="Máximo 140 caracteres" style="resize:none">
</textarea>
</p>
<input type="submit" value="Enviar">
</form>