Entrada de datos en Formularios
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.
Select: listas desplegables
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.
Datalist: listas completar
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>
Texto multilínea
<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>