Actualizado el 14-01-2007
versión para imprimir
Formularios ( II )
Otros input type="" selectores
"RADIO": Mediante esta forma de entrada de datos, el usuario puede seleccionar una de varias opciones disponibles:
<form> <input type="radio" name="editorfavorito" /> <input type="radio" name="editorfavorito" /> </form>
Como vemos, solo podemos elegir una de las opciones. Pero si todos los botones tienen el mismo nombre. ¿como sabemos cual se ha accionado? con el atributo value=""
<form> <input type="radio" name="editorfavorito" value="html-kit"/> <input type="radio" name="editorfavorito" value="front-page"/> </form>
Y naturalmente para que el usuario sepa que es lo que elige, debemos identificar cada botón con texto visible. Es el momento de advertir que dentro de las etiquetas form podemos insertar otras etiquetas html:
selecciona tu editor favorito:html-kit
front-page
<form> <h3>selecciona tu editor favorito:</h3> <input type="radio" name="editorfavorito" value="html-kit"/> html-kit <br /> <input type="radio" name="editorfavorito" value="front-page"/> front-page <br/> </form>
y si queremos podemos presentar una opción marcada por defecto, mediante el atributo checked
selecciona tu editor favorito:html-kit
front-page
<form> <b>selecciona tu editor favorito:</b><br /> <input type="radio" name="editorfavorito2" value="html-kit" checked /> html-kit <br /> <input type="radio" name="editorfavorito2" value="front-page"/> front-page <br/> </form>
"CHECKBOX" es muy similar a los botones radio. La principal diferencia es que el usuario puede escoger mas de una de las opciones presentadas:
selecciona tu helado favoritochocolate
limón
<form> <b>selecciona tu helado favorito:</b><br /> <input type="checkbox" name="chocolate" value="yes" checked /> chocolate <br /> <input type="checkbox" name="limon" value="yes"/> limón <br/> </form>
Observa que en este caso cada input tiene un nombre distinto, y el valor es siempre "yes". Si se enviara el formulario con la primera casilla marcada, se recibiria el par chocolate=yes. Si se marcasen las dos, se recibiría chocolate=yes limon=yes Comprueba por favor que puedes marcar cualquiera de las dos opciones, o las dos a la vez.
la etiqueta <select>
Si queremos presentar al usuario una lista de opciones para que escoja una, es muy util ofrecerles un menú desplegable, lo que conseguimos con las etiquetas <select></select>. Fíjate que a diferencia de <input>, se trata de una pareja de etiquetas. Veamos un ejemplo:
<form> <select name="helados"> <option value="chocolate">chocolate</option> <option value="limon">limón</option> <option value="fresa">fresa</option> <option value="nata">nata</option> <option value="pistacho">pistacho</option> <option value="turron">turrón</option> </select> </form>
Vemos que la opción que aparece seleccionada por defecto es la primera de la lista. Podemos marcar la que queramos por defecto, con el atributo select:
<option value="pistacho" selected>pistacho</option>
una buena práctica es colocar en primer lugar un espacio en blanco, o habilitar una opción genérica, para evitar que la gente seleccione cualquier dato al azar:
<option value="enblanco"></option>
Y una cosa mas, podemos convertir la ventana en un scroll fijo, sin mas que
añadir a select el atributo size="":
<select name="helados" size="4">
<select name="helados" size="6">
Y para terminar podemos permitir seleccionar varios elementos usando el atributo multiple (prueba a seleccionar varios items de la lista de abajo pulsando ctrl o shift y veras que pasa).
etiqueta <textarea>
Mediante esta forma de entrada habilitamos un espacio donde el usuario puede escribir libremente. Con sus atributos name="", cols="", rows="" especificamos la identidad del campo, anchura y altura respectivamente:
<textarea name="comentarios" rows="5" cols="45"></textarea>
podemos insertar texto por defecto, simplemente tecleandolo entre las dos etiquetas:
El atributo wrap="" se usa para indicar si las lineas introducidas deben ajustarse al ancho de la ventana y como. El valor "soft" significa que el texto se visualizará en la ventana ajustado, pero se enviará como una cadena continua. El valor "hard" significa que el texto se ajustara a la ventana, dividiendo las palabras y lineas donde sea necesario, y se enviara de la misma forma. El valor "off", que es el señalado por defecto, significa que no existe ajuste automatico de lineas y el texto se enviara tal cual fue tecleado.
Dos ultimos atributos para textarea: READONLY impide que el contenido escrito en el área de texto pueda ser editado por quienes vean la página (no obstante ese contenido esta activo, y será enviado con el resto del formulario). DISABLED desactiva el elemento. Su contenido no solamente no puede ser editado por el usuario, sino que tampoco será enviado con el formulario ni puede tener el foco del navegador.