Mostrando entradas con la etiqueta campos de seleccion. Mostrar todas las entradas
Mostrando entradas con la etiqueta campos de seleccion. Mostrar todas las entradas

martes, 17 de agosto de 2010

Formularios: Campos de selección, etiquetas 'select' y 'option', atributos 'selected' y 'multiple'

logo COEPALos campos de selección son los típicos campos de un formulario en los que hay que escoger opciones de las que aparecen en una lista desplegable:

  • Etiqueta '<select name="nombre-variable" >': es para abrir un campo de selección. Dentro de este campo de selección irá una etiqueta <option value="valor-de-variable" >texto de la opción a elegir</option> para cada uno de las opciones del 'select', y después se cierra la etiqueta '</select>'. Al igual que los otros campos de formulario vistos, el campo 'select' debe ir entre las etiquetas de apertura y cierre de formulario 'form':

    Aquí se puede usar el atributo selected="selected" para elegir una opción por defecto, del mismo modo que se hacia antes con checked="checked" en los campos del tipo 'checkbox' y 'radio'.

    <form method="post" action="http://..../validar.php">
    <label for="pais">Selecciona tu país </label>
    <select name="pais">
    <option value="Italia">Italia</option>
    <option value="Alemania">Alemania</option>
    <option value="Portugal">Portugal</option>
    <option selected="selected" value="España">España</option>
    </select>

    </form>

    Y el código anterior aparecerá así:

    En este campo también es típico poner una opción vacía, y en este caso no se usa el atributo 'selected':

    <form method="post" action="http://..../validar.php">
    <label for="pais">Selecciona tu país </label>
    <select name="pais">
    <option value=""></option>
    <option value="Italia">Italia</option>
    <option value="Alemania">Alemania</option>
    <option value="Portugal">Portugal</option>
    <option selected="selected" value="España">España</option>
    </select>
    </form>

    Y el código:

  • Atributo 'multiple="multiple"' para la etiqueta '<select ... >': con este atributo, manteniendo pulsada la tecla Ctrl (CONTROL) del teclado, se pueden seleccionar más de una opción:
    Aquí se puede usar el atributo selected="selected" para elegir más de una opción por defecto.
    <form method="post" action="http://..../validar.php">
    <label for="pais">Selecciona países en los que has estado </label>
    <select name="pais" multiple="multiple" >
    <option value="Italia">Italia</option>
    <option value="Alemania">Alemania</option>
    <option value="Portugal">Portugal</option>
    <option selected="selected" value="España">España</option>
    <option value="México">México</option>
    <option value="India">India</option>
    <option value="China">China</option>
    <option selected="selected" value="Japón">Japón</option>
    <option value="Argentina">Argentina</option>
    </select>
    </form>

    Ahora se puede seleccionar más de una opción -manteniendo pulsada la tecla CONTROL (Ctrl) del teclado- y el código aparecerá así: