El Atributo SIZE

Se utiliza para definir el tamaño visible de elementos de formulario como campos de texto y listas desplegables.

El atributo size en HTML se utiliza para definir el tamaño visible de elementos de formulario como campos de texto (<input>) y listas desplegables (<select>). Este atributo es útil para controlar la presentación inicial de estos elementos, aunque su comportamiento varía según el contexto. A continuación, te explicamos cómo implementarlo correctamente.

1. Introducción al atributo size

  • Propósito:
    Especificar el ancho (en caracteres) de un campo de texto o el número de opciones visibles en una lista desplegable.

  • Elementos compatibles:

    • <input> (tipos: text, password, email, search, tel, url).

    • <select>.

  • Nota:
    El atributo size no es lo mismo que maxlength (que limita la cantidad de caracteres ingresados).

2. Uso en <input>

Sintaxis

html
Copy
<input type="text" size="número">
 
Run HTML

  • número: Cantidad de caracteres que define el ancho del campo (valor predeterminado: 20).

Ejemplo

html
Copy
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" size="30" placeholder="Ej: Juan Pérez">

<label for="código">Código:</label>
<input type="text" id="código" size="10" maxlength="10">
 
Run HTML

Resultado:

  • El campo "Nombre" será más ancho que el campo "Código".

3. Uso en <select>

Sintaxis

html
Copy
<select size="número">
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>
 
Run HTML

  • número: Cantidad de opciones visibles sin necesidad de desplazarse.

    • Si size="1" (valor predeterminado), se muestra como un dropdown.

    • Si size > 1, se muestra como una lista con scroll.

Ejemplo 1: Lista desplegable estándar

html
Copy
<label for="países">País:</label>
<select id="países" size="1">
  <option>México</option>
  <option>España</option>
  <option>Argentina</option>
</select>
 
Run HTML

Resultado:
Un dropdown clásico donde solo se ve una opción a la vez.

Ejemplo 2: Lista con scroll

html
Copy
<label for="colores">Colores:</label>
<select id="colores" size="4" multiple>
  <option>Rojo</option>
  <option>Verde</option>
  <option>Azul</option>
  <option>Amarillo</option>
</select>
 
Run HTML

Resultado:
Una lista que muestra 4 opciones simultáneamente y permite selección múltiple.

4. Consideraciones clave

  1. No es responsive:
    El tamaño definido por size es fijo y no se adapta automáticamente a pantallas pequeñas.

  2. CSS vs. size:
    Para un control preciso del ancho, usa CSS (ej.: width: 200px;). El atributo size es una aproximación basada en el tamaño de los caracteres.

  3. Accesibilidad:

    • Siempre usa <label> asociado al campo.

    • Evita valores de size demasiado pequeños que dificulten la lectura.

5. Diferencias entre <input> y <select>

Característica <input> <select>
Tipo de control Campo de texto Lista desplegable o con scroll
Valor predeterminado size="20" size="1"
Selección múltiple No aplica Requiere multiple

6. Ejemplo integrado

html
Copy
<form>
  <label for="usuario">Usuario:</label>
  <input type="text" id="usuario" size="15" required>

  <label for="películas">Películas favoritas:</label>
  <select id="películas" size="3" multiple>
    <option>El Padrino</option>
    <option>Interestelar</option>
    <option>Toy Story</option>
    <option>Parásitos</option>
  </select>

  <button type="submit">Enviar</button>
</form>
 
Run HTML

7. Conclusión

El atributo size es útil para:

  • Definir tamaños iniciales rápidos en formularios.

  • Controlar la cantidad de opciones visibles en listas.

  • ¡Recuerda!

    • Usa CSS para diseños más precisos y responsivos.

    • Combínalo con maxlength en <input> para limitar caracteres.

    • Prueba en diferentes navegadores y dispositivos.

Con este tutorial, podrás implementar controles de formulario mejor estructurados y visualmente coherentes. ????