Taille d'entrée vs largeur

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

ou

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

Lequel est le code cross-browser optimal?

Bien sûr, cela dépend des exigences, mais je suis curieux de savoir comment les gens décident et sur quelle base.

Vous pouvez utiliser les deux. Le style css remplacera l' sizeattribut dans les navigateurs qui prennent en charge CSS et rendra le champ de la bonne largeur, et pour ceux qui ne le feront pas, il retombera au nombre de caractères spécifié.

Edit: j'aurais dû mentionner que l' sizeattribut n'est pas une méthode précise de dimensionnement: selon la spécification HTML , il devrait se référer au nombre de caractères de la police actuelle que l'entrée pourra afficher à la fois.

Cependant, à moins que la police spécifiée soit une police à largeur fixe / monospace, cela ne garantit pas que le nombre de caractères spécifié sera réellement visible; dans la plupart des polices, différents caractères auront des largeurs différentes. Cette question a quelques bonnes réponses relatives à ce problème.

L'extrait ci-dessous illustre les deux approches.

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

Je suggère, le meilleur moyen est probablement de définir la largeur du style dans l'unité em style='width:20em':)

size est incohérent entre les différents navigateurs et leurs paramètres de police possibles.

Le widthstyle défini en px sera au moins un problème de taille de boîte modulo cohérent . Vous pouvez également définir le style dans 'em' si vous souhaitez le dimensionner par rapport à la police (mais là encore, cela ne sera pas cohérent sauf si vous définissez fontexplicitement la famille et la taille de l'entrée ), ou '%' si vous faites un forme de mise en page liquide. Dans les deux cas, une feuille de style est probablement préférable à l' styleattribut inline .

Vous avez encore besoin sizepour <select multiple>obtenir la hauteur pour aligner correctement avec les options. Mais je ne l'utiliserais pas sur un <input>.

Je veux dire que cela va à l'encontre de la "sagesse conventionnelle", mais je préfère généralement utiliser la taille. La raison en est précisément la raison pour laquelle beaucoup de gens disent de ne pas le faire: la largeur du champ variera d'un navigateur à l'autre, selon la taille de la police. Plus précisément, il sera toujours suffisamment grand pour afficher le nombre de caractères spécifié, quels que soient les paramètres du navigateur.

Par exemple, si j'ai un champ de date, je veux généralement que le champ soit suffisamment large pour afficher 8 ou 10 caractères (mois et jour à deux chiffres et année à deux ou quatre chiffres, avec séparateurs). La définition de l'attribut size me garantit essentiellement que la date entière sera visible, avec un minimum d'espace perdu. De même pour la plupart des nombres - je connais la plage de valeurs attendues, je vais donc définir l'attribut size sur le bon nombre de chiffres, plus le point décimal le cas échéant.

Pour autant que je sache, aucun attribut CSS ne fait cela. La définition d'une largeur en em, par exemple, est basée sur la hauteur et non sur la largeur et n'est donc pas très précise si vous souhaitez afficher un nombre connu de caractères.

Bien sûr, cette logique ne s'applique pas toujours - un champ de saisie de nom, par exemple, peut contenir n'importe quel nombre de caractères. Dans ces cas, je reviens aux propriétés de largeur CSS, généralement en px. Cependant, je dirais que la majorité des champs que je crée ont une sorte de contenu connu, et en spécifiant l'attribut size, je peux m'assurer que la plupart du contenu, dans la plupart des cas, est affiché sans écrêtage.

Je viens de me battre avec une table que je ne pouvais pas faire plus petite, peu importe l'élément que j'essayais de faire plus petit, la largeur de la table est restée la même. J'ai cherché à l'aide de Firebug mais je n'ai pas trouvé l'élément qui définissait la largeur si haut.

Enfin, j'ai essayé de changer l' attribut de taille des éléments de texte d'entrée et cela l'a corrigé. Pour une raison quelconque, l' attribut size a dépassé les largeurs css. J'utilisais jQuery pour ajouter dynamiquement des lignes à une table et ce sont ces lignes qui contenaient les entrées. Alors peut-être quand il s'agit d'ajouter dynamiquement des entrées à l'aide de la fonction appendTo (), il est peut-être préférable de définir l' attribut size avec la largeur.

Vous obtiendrez plus de cohérence si vous utilisez la largeur (votre deuxième exemple).

Vous pouvez redimensionner en utilisant le style et la largeur pour redimensionner la zone de texte. Voici le code pour cela.

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

Utilisez aligner pour centrer la zone de texte.

L' sizeattribut en HTML et la widthpropriété en CSS définiront la largeur d'un <input>. Si vous souhaitez définir la largeur à quelque chose de plus proche de la largeur de chaque caractère, utilisez l' **ch**unité comme dans:

input {
    width: 10ch;
}

HTML contrôle la signification sémantique des éléments. CSS contrôle la mise en page / le style de la page. Utilisez CSS lorsque vous contrôlez votre mise en page.

En bref, n'utilisez jamais size = ""