Teoría
Teoría

Una lista de selección múltiple

Una lista desplegable puede convertirse en una lista de selección múltiple: una lista que permite elegir varias opciones.

Para hacerlo, agrega el atributo multiple a la etiqueta <select>.

Puedes seleccionar varias opciones haciendo clic en ellas mientras mantienes presionada la tecla Ctrl en Windows o Command en macOS.

La altura de la lista se puede cambiar con el atributo size de <select>. Su valor indica cuántas opciones se muestran a la vez.

Para seleccionar una o varias opciones de forma predeterminada, agrega el atributo selected a las etiquetas <option> correspondientes.

Para enviar varias opciones a un servidor que procesa los datos con PHP, se agregan los corchetes [] al final del nombre en el atributo name. Por ejemplo: <select name="days[]">. Los corchetes no son un requisito de las listas de selección múltiple: se usan para que PHP procese correctamente esos datos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Una lista de selección múltiple</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Cuestionario</h1> <form action="https://echo.htmlacademy.ru/courses" method="post"> <p>En una lista de selección múltiple puedes elegir varias opciones haciendo clic en ellas mientras mantienes presionada la tecla Ctrl en Windows o Command en macOS.</p> <p><i>Tus días favoritos de la semana:</i></p> <select name="days"> <option>Lunes</option> <option>Martes</option> <option>Miércoles</option> <option>Jueves</option> <option>Viernes</option> <option>Sábado</option> <option>Domingo</option> </select> <input type="submit" value="Enviar"> </form> </body> </html>

CSS

input[type="submit"] { display: block; margin-top: 10px; }

ObjetivosRealizado

Convierte la lista desplegable en una lista de selección múltiple.
Aumenta la altura de la lista para que muestre 7 opciones a la vez.
Haz que Domingo esté seleccionado de forma predeterminada.

Prueba enviar el formulario con varias opciones seleccionadas.