Tamaño de entrada vs ancho

<input name="txtId" type="text" size="20" />

o

<input name="txtId" type="text" style="width: 150px;" />

¿Cuál es el código óptimo del navegador cruzado?

Por supuesto, depende de los requisitos, pero tengo curiosidad por saber cómo deciden las personas y sobre qué base.

Puedes usar ambos. El estilo css anulará el sizeatributo en los navegadores que admiten CSS y harán que el campo tenga el ancho correcto, y para aquellos que no lo hagan, recurrirá al número especificado de caracteres.

Editar: debería haber mencionado que el sizeatributo no es un método preciso de dimensionamiento: de acuerdo con la especificación HTML , debe referirse al número de caracteres de la fuente actual que la entrada podrá mostrar a la vez.

Sin embargo, a menos que la fuente especificada sea una fuente de ancho fijo / monoespacio, esto no garantiza que el número especificado de caracteres sea realmente visible; en la mayoría de las fuentes, los diferentes caracteres serán de diferentes anchos. Esta pregunta tiene algunas buenas respuestas relacionadas con este tema.

El fragmento a continuación muestra ambos enfoques.

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

Sugiero, probablemente la mejor manera es establecer el ancho del estilo en la unidad em :) Entonces, para el tamaño de entrada de 20 caracteres, simplemente configure style='width:20em':)

size es inconsistente en diferentes navegadores y sus posibles configuraciones de fuente.

El widthestilo establecido en px será al menos consistente, problemas de tamaño de caja de módulo . También es posible que desee establecer el estilo en 'em' si desea cambiar su tamaño en relación con la fuente (aunque de nuevo, esto será inconsistente a menos que configure fontexplícitamente la familia y el tamaño de la entrada ), o '%' si está haciendo un forma de diseño líquido. De cualquier manera, una hoja de estilo es probablemente preferible al styleatributo en línea .

Todavía es necesario sizepara <select multiple>conseguir la altura para alinearse con las opciones correctamente. Pero no lo usaría en un <input>.

Quiero decir que esto va en contra de la "sabiduría convencional", pero generalmente prefiero usar el tamaño. La razón de esto es precisamente la razón por la que muchas personas dicen que no: el ancho del campo variará de un navegador a otro, dependiendo del tamaño de la fuente. Específicamente, siempre será lo suficientemente grande como para mostrar el número especificado de caracteres, independientemente de la configuración del navegador.

Por ejemplo, si tengo un campo de fecha, normalmente quiero que el campo sea lo suficientemente ancho como para mostrar 8 o 10 caracteres (mes y día de dos dígitos y año de dos o cuatro dígitos, con separadores). Establecer el atributo de tamaño esencialmente me garantiza que la fecha completa será visible, con un mínimo espacio desperdiciado. De manera similar para la mayoría de los números: conozco el rango de valores esperado, por lo que estableceré el atributo de tamaño en el número adecuado de dígitos, más el punto decimal si corresponde.

Por lo que puedo decir, ningún atributo CSS hace esto. Establecer un ancho en em, por ejemplo, se basa en la altura, no en el ancho, y por lo tanto no es muy preciso si desea mostrar un número conocido de caracteres.

Por supuesto, esta lógica no siempre se aplica: un campo de entrada de nombre, por ejemplo, podría contener cualquier número de caracteres. En esos casos, recurriré a las propiedades de ancho de CSS, generalmente en px. Sin embargo, diría que la mayoría de los campos que hago tienen algún tipo de contenido conocido, y al especificar el atributo de tamaño puedo asegurarme de que la mayor parte del contenido, en la mayoría de los casos, se muestre sin recortar.

Acabo de terminar peleando con una mesa que no pude hacer más pequeña, sin importar qué elemento intenté hacer más pequeño, el ancho de la mesa permaneció igual. Busqué usando firebug pero no pude encontrar el elemento que estaba configurando el ancho tan alto.

Finalmente intenté cambiar el atributo de tamaño de los elementos de texto de entrada y eso lo solucionó. Por alguna razón, el atributo de tamaño superó los anchos css. Estaba usando jQuery para agregar filas dinámicamente a una tabla y fueron estas filas las que contenían las entradas. Entonces, tal vez cuando se trata de agregar entradas dinámicamente usando la función appendTo (), tal vez sea mejor establecer el atributo de tamaño junto con el ancho.

Obtendrá más consistencia si usa ancho (su segundo ejemplo).

Puede cambiar el tamaño usando estilo y ancho para cambiar el tamaño del cuadro de texto. Aquí está el código para ello.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

Use alinear para centrar el cuadro de texto.

Tanto el sizeatributo en HTML como la widthpropiedad en CSS establecerán el ancho de un <input>. Si desea establecer el ancho en algo más cercano al ancho de cada carácter, use la **ch**unidad como en:

input {
    width: 10ch;
}

HTML controla el significado semántico de los elementos. CSS controla el diseño / estilo de la página. Use CSS cuando controle su diseño.

En resumen, nunca use size = ""