Dimensione input vs larghezza

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

o

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

Quale è il codice cross-browser ottimale?

Naturalmente dipende dai requisiti, ma sono curioso di sapere come le persone decidono e su quali basi.

Puoi usare entrambi. Lo stile CSS sovrascriverà l' sizeattributo nei browser che supportano CSS e renderà la larghezza corretta del campo e, per quelli che non lo fanno, tornerà al numero specificato di caratteri.

Modifica: avrei dovuto menzionare che l' sizeattributo non è un metodo preciso di dimensionamento: secondo la specifica HTML , dovrebbe riferirsi al numero di caratteri del carattere corrente che l'input sarà in grado di visualizzare contemporaneamente.

Tuttavia, a meno che il carattere specificato non sia un carattere a larghezza fissa / monospazio, ciò non garantisce che il numero specificato di caratteri sarà effettivamente visibile; nella maggior parte dei caratteri, caratteri diversi avranno larghezze diverse. Questa domanda ha alcune buone risposte relative a questo problema.

Lo snippet di seguito mostra entrambi gli approcci.

@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>

Suggerisco, probabilmente il modo migliore è impostare la larghezza dello stile nell'unità em :) Quindi, per una dimensione di input di 20 caratteri, basta impostare style='width:20em':)

size è incoerente tra i diversi browser e le loro possibili impostazioni dei caratteri.

Lo widthstile impostato in px sarà almeno coerente, problemi di ridimensionamento del modulo . Potresti anche voler impostare lo stile in 'em' se vuoi ridimensionarlo rispetto al carattere (anche se di nuovo, questo sarà incoerente a meno che tu non imposti fontesplicitamente la famiglia e la dimensione dell'input ), o '%' se stai facendo un forma di layout liquido. In entrambi i casi, un foglio di stile è probabilmente preferibile styleall'attributo inline .

Hai ancora bisogno sizeper <select multiple>per ottenere l'altezza per allinearsi con le opzioni correttamente. Ma non lo userei su un <input>.

Voglio dire che questo va contro la "saggezza convenzionale", ma generalmente preferisco usare le dimensioni. Il motivo è proprio il motivo per cui molte persone non dicono: la larghezza del campo varia da browser a browser, a seconda della dimensione del carattere. In particolare, sarà sempre abbastanza grande da visualizzare il numero specificato di caratteri, indipendentemente dalle impostazioni del browser.

Ad esempio, se ho un campo data, in genere desidero che il campo sia sufficientemente ampio da visualizzare 8 o 10 caratteri (mese e giorno a due cifre e anno a due o quattro cifre, con separatori). L'impostazione dell'attributo size mi garantisce sostanzialmente che l'intera data sarà visibile, con uno spazio minimo sprecato. Allo stesso modo per la maggior parte dei numeri: conosco l'intervallo di valori previsti, quindi imposterò l'attributo size sul numero corretto di cifre, più il punto decimale, se applicabile.

Per quanto ne so, nessun attributo CSS lo fa. L'impostazione di una larghezza in em, ad esempio, si basa sull'altezza, non sulla larghezza, e quindi non è molto preciso se si desidera visualizzare un numero noto di caratteri.

Naturalmente, questa logica non si applica sempre: un campo di immissione nome, ad esempio, può contenere un numero qualsiasi di caratteri. In quei casi tornerò alle proprietà della larghezza CSS, in genere in px. Tuttavia, direi che la maggior parte dei campi che creo hanno una sorta di contenuto noto e, specificando l'attributo size, posso assicurarmi che la maggior parte del contenuto, nella maggior parte dei casi, venga visualizzato senza ritaglio.

Ho appena finito di litigare con un tavolo che non potevo rimpicciolire, indipendentemente dall'elemento che ho cercato di ridurre, la larghezza del tavolo è rimasta invariata. Ho cercato usando firebug ma non sono riuscito a trovare l'elemento che stava impostando la larghezza così in alto.

Alla fine ho provato a modificare l' attributo size degli elementi di testo di input e questo è stato risolto. Per qualche motivo l' attributo size ha superato le larghezze CSS. Stavo usando jQuery per aggiungere dinamicamente righe a una tabella ed erano queste righe che contenevano gli input. Quindi forse quando si tratta di aggiungere dinamicamente input usando la funzione appendTo () forse è meglio impostare l' attributo size insieme alla larghezza.

Otterrai maggiore coerenza se usi la larghezza (il tuo secondo esempio).

Puoi ridimensionare usando stile e larghezza per ridimensionare la casella di testo. Ecco il codice per questo.

<!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>

Usa allinea per centrare la casella di testo.

Sia l' sizeattributo in HTML che la widthproprietà in CSS imposteranno la larghezza di un <input>. Se vuoi impostare la larghezza su qualcosa di più vicino alla larghezza di ogni personaggio usa l' **ch**unità come in:

input {
    width: 10ch;
}

HTML controlla il significato semantico degli elementi. CSS controlla il layout / stile della pagina. Usa CSS quando controlli il layout.

In breve, non usare mai size = ""