Tamanho da entrada x largura

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

ou

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

Qual é o código ideal entre navegadores?

Claro que depende dos requisitos, mas estou curioso para saber como as pessoas decidem e com que base.

Você pode usar os dois. O estilo css substituirá o sizeatributo nos navegadores que suportam CSS e tornará o campo a largura correta e, para aqueles que não suportam, ele retornará ao número especificado de caracteres.

Editar: eu deveria ter mencionado que o sizeatributo não é um método preciso de dimensionamento: de acordo com a especificação HTML , ele deve se referir ao número de caracteres da fonte atual que a entrada poderá exibir de uma só vez.

No entanto, a menos que a fonte especificada seja uma fonte de largura fixa / monoespaçada, isso não garante que o número especificado de caracteres seja realmente visível; na maioria das fontes, caracteres diferentes terão larguras diferentes. Esta pergunta tem algumas boas respostas relacionadas a esse problema.

O trecho abaixo demonstra as duas abordagens.

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

Sugiro, provavelmente a melhor maneira é definir a largura do estilo na unidade em :) Então, para o tamanho de entrada de 20 caracteres, apenas defina style='width:20em':)

size é inconsistente em diferentes navegadores e em suas possíveis configurações de fonte.

O widthestilo definido em px será, pelo menos, consistente, com o tamanho do módulo . Você também pode definir o estilo em 'se' para dimensioná-lo em relação à fonte (embora, novamente, isso seja inconsistente, a menos que você defina fontexplicitamente a família e o tamanho da entrada ) ou '%' se estiver criando um formulário de layout líquido. De qualquer maneira, uma folha de estilo provavelmente é preferível ao styleatributo embutido .

Você ainda precisa sizepara <select multiple>obter a altura de alinhar com as opções corretamente. Mas eu não o usaria em um <input>.

Quero dizer que isso vai contra a "sabedoria convencional", mas geralmente prefiro usar tamanho. A razão para isso é precisamente a razão pela qual muitas pessoas dizem que não: a largura do campo varia de navegador para navegador, dependendo do tamanho da fonte. Especificamente, sempre será grande o suficiente para exibir o número especificado de caracteres, independentemente das configurações do navegador.

Por exemplo, se eu tiver um campo de data, normalmente desejo que o campo seja amplo o suficiente para exibir 8 ou 10 caracteres (mês e dia com dois dígitos e ano com dois ou quatro dígitos, com separadores). Definir o atributo size essencialmente me garante que toda a data estará visível, com o mínimo de espaço desperdiçado. Da mesma forma, para a maioria dos números - eu sei o intervalo de valores esperado, portanto, definirei o atributo size como o número adequado de dígitos, mais o ponto decimal, se aplicável.

Até onde eu sei, nenhum atributo CSS faz isso. Definir uma largura em em, por exemplo, baseia-se na altura, não na largura e, portanto, não é muito preciso se você deseja exibir um número conhecido de caracteres.

Obviamente, essa lógica nem sempre se aplica - um campo de entrada de nome, por exemplo, pode conter qualquer número de caracteres. Nesses casos, voltarei às propriedades de largura do CSS, normalmente em px. No entanto, eu diria que a maioria dos campos que eu faço tem algum tipo de conteúdo conhecido e, especificando o atributo size, posso garantir que a maior parte do conteúdo, na maioria dos casos, seja exibida sem recorte.

Acabei de lutar com uma mesa que não podia diminuir, não importa qual elemento tentasse diminuir, a largura da mesa permaneceu a mesma. Pesquisei usando o firebug, mas não consegui encontrar o elemento que estava definindo a largura tão alta.

Finalmente, tentei alterar o atributo size dos elementos de entrada de texto e isso foi corrigido. Por alguma razão, o atributo size substituiu as larguras de css. Eu estava usando o jQuery para adicionar linhas dinamicamente a uma tabela e foram essas linhas que continham as entradas. Portanto, talvez quando se trata de adicionar entradas dinamicamente usando a função appendTo (), talvez seja melhor definir o atributo size juntamente com a largura.

Você obterá mais consistência se usar a largura (seu segundo exemplo).

Você pode redimensionar usando estilo e largura para redimensionar a caixa de texto. Aqui está o código para isso.

<!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 alinhar para centralizar a caixa de texto.

O sizeatributo em HTML e a widthpropriedade em CSS definirão a largura de um <input>. Se você deseja definir a largura para algo mais próximo da largura de cada caractere, use a **ch**unidade como em:

input {
    width: 10ch;
}

HTML controla o significado semântico dos elementos. CSS controla o layout / estilo da página. Use CSS ao controlar seu layout.

Em resumo, nunca use size = ""