El atributo múltiple se usa para especificar si el usuario puede ingresar más de un valor en un elemento de entrada. Es un atributo booleano. Cuando se establece en verdadero, el elemento de entrada puede aceptar más de un valor. Las múltiples propiedades se pueden utilizar de las siguientes maneras.
- Con la etiqueta <input> solo el tipo de correo electrónico y archivo acepta el atributo múltiple.
- Con la etiqueta <select> cuando se usa el atributo múltiple, la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de la simple lista desplegable de una línea. Esto permite al usuario seleccionar múltiples opciones.
Ejemplo 1: este ejemplo muestra cómo se pueden ingresar varios correos electrónicos en el área de entrada. Cada correo electrónico está separado por una coma. Los espacios en blanco anteriores y posteriores se eliminan de cada dirección de la lista.
HTML
<html> <body> <form action=" "> <p> <label> Write down the E-Mails of the peoples you want to send the mail </label> <br> <sub> (You can enter multiple E-Mail with each seperated by comma) </sub> <input type="email" name="email" id="email" multiple size="50"> </p> <p> <input type="submit" value="Submit"> </p> </form> </body> </html>
Producción:
Antes de introducir las direcciones de correo electrónico
Después de ingresar las direcciones de correo electrónico
Ejemplo 2: este ejemplo muestra cómo se pueden seleccionar varios archivos con la etiqueta <input>. Normalmente, solo se permite un archivo; sin embargo, al usar múltiples, el usuario puede seleccionar más de un archivo.
HTML
<html> <body> <form action=" "> <p> <label for="file"> Upload the image files : </label> <input type="file" name="upload" id="upload" multiple accept=".jpeg,.jpg,.png"> <br><br> <label for="file"> Upload the Text files : </label> <input type="file" name="upload" id="upload" multiple accept=".txt"> </p> <p> <input type="submit" value="Submit"> </p> </form> </body> </html>
Producción:
Antes de agregar los archivos:
Después de agregar los archivos:
Ejemplo 3: Este ejemplo muestra cómo se pueden seleccionar múltiples opciones en una entrada <select>. El usuario puede seleccionar cero o más opciones de la lista de opciones usando el botón CTRL o usar una solución proporcionada por el desarrollador.
HTML
<html> <body> <form action=" "> <p> With multiple attribute: <label for="course"> Select the course you like: </label> <select multiple name="course" id="course"> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> <option>Java</option> <option>C++</option> <option>C</option> <option>Python</option> </select> </p> <p> Without multiple attribute: <label for="course"> Select the course you like: </label> <select name="course" id="course"> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> <option>Java</option> <option>C++</option> <option>C</option> <option>Python</option> </select> </p> <p> <input type="submit" value="Submit"> </p> </form> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por jimishravat2802 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA