Invoergrootte versus breedte

of

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

Welke is de optimale code voor meerdere browsers?

Natuurlijk hangt het af van de vereisten, maar ik ben benieuwd hoe mensen beslissen en op basis waarvan.


Antwoord 1, autoriteit 100%

Je kunt beide gebruiken. De CSS-stijl zal het kenmerk size overschrijven in browsers die CSS ondersteunen en het veld de juiste breedte geven, en voor degenen die dat niet doen, zal het terugvallen op het gespecificeerde aantal tekens.

Bewerken: ik had moeten vermelden dat het kenmerk size geen precieze methode is om de maat te bepalen: volgens de HTML-specificatie, moet verwijzen naar het aantal tekens van de huidige lettertype dat de invoer in één keer kan weergeven.

Tenzij het opgegeven lettertype echter een lettertype met vaste breedte/monospace is, is dit geen een garantie dat het opgegeven aantal tekens daadwerkelijk zichtbaar zal zijn; in de meeste lettertypen zullen verschillende tekens verschillende breedtes hebben. Deze vraag bevat enkele goede antwoorden met betrekking tot dit probleem .

Het onderstaande fragment demonstreert beide benaderingen.

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

Antwoord 2, autoriteit 26%

Ik stel voor dat de beste manier waarschijnlijk is om de breedte van de stijl in em-eenheid in te stellen 🙂 Dus voor een invoergrootte van 20 tekens, stel gewoon style='width:20em' in 🙂


Antwoord 3, autoriteit 11%

size is inconsistent in verschillende browsers en hun mogelijke lettertype-instellingen.

De stijl width die is ingesteld in px zal op zijn minst consistent zijn, modulo problemen met de grootte van dozen. U kunt ook de stijl in em instellen als u de grootte wilt aanpassen aan het lettertype (maar nogmaals, dit zal inconsistent zijn tenzij u de font-familie en grootte van de invoer expliciet instelt), of % als u een formulier met vloeibare opmaak maakt. Hoe dan ook, een stylesheet heeft waarschijnlijk de voorkeur boven het inline attribuut style.

Je hebt nog steeds size nodig voor <select multiple> om de hoogte goed uit te lijnen met de opties. Maar ik zou het niet gebruiken op een <input>.


Antwoord 4, autoriteit 7%

Ik wil zeggen dat dit indruist tegen de “conventionele wijsheid”, maar over het algemeen gebruik ik liever grootte. De reden hiervoor is precies de reden dat veel mensen zeggen van niet: de breedte van het veld zal van browser tot browser verschillen, afhankelijk van de lettergrootte. Het zal met name altijd groot genoeg zijn om het opgegeven aantal tekens weer te geven, ongeacht de browserinstellingen.

Als ik bijvoorbeeld een datumveld heb, wil ik meestal dat het veld breed genoeg is om 8 of 10 tekens weer te geven (tweecijferige maand en dag en twee- of viercijferige jaar, met scheidingstekens). Het instellen van het maatkenmerk garandeert me in wezen dat de hele datum zichtbaar zal zijn, met minimale verspilde ruimte. Hetzelfde geldt voor de meeste getallen: ik ken het verwachte bereik van waarden, dus ik zal het maatkenmerk instellen op het juiste aantal cijfers, plus decimaalteken indien van toepassing.

Voor zover ik weet, doet geen enkel CSS-kenmerk dit. Het instellen van een breedte in em is bijvoorbeeld gebaseerd op de hoogte, niet op de breedte, en is dus niet erg nauwkeurig als u een bekend aantal tekens wilt weergeven.

Natuurlijk is deze logica niet altijd van toepassing – een naaminvoerveld kan bijvoorbeeld een willekeurig aantal tekens bevatten. In die gevallen val ik terug op CSS-breedte-eigenschappen, meestal in px. Ik zou echter zeggen dat de meeste velden die ik maak een soort bekende inhoud hebben, en door het attribuut size op te geven, kan ik ervoor zorgen dat meeste van de inhoud, in meeste gevallen, wordt weergegeven zonder knippen.


Antwoord 5, autoriteit 3%

Zowel het size attribuut in HTML als de width eigenschap in CSS zal de breedte van een <input> instellen. Als u de breedte wilt instellen op iets dat dichter bij de breedte van elk teken ligt, gebruikt u de eenheid **ch** zoals in:

input {
    width: 10ch;
}

Antwoord 6, autoriteit 3%

Ik ben net klaar met vechten met een tafel die ik niet kleiner kon maken, welk element ik ook probeerde kleiner te maken, de breedte van de tafel bleef hetzelfde. Ik heb gezocht met firebug maar kon het element dat de breedte zo hoog instelde niet vinden.

Eindelijk heb ik geprobeerd het size attribuut van de invoertekstelementen te wijzigen en dat loste het op. Om de een of andere reden overschreed het size attribuut de css-breedtes. Ik gebruikte jQuery om dynamisch rijen toe te voegen aan een tabel en het waren deze rijen die de invoer bevatten. Dus misschien als het gaat om het dynamisch toevoegen van invoer met behulp van de appendTo()-functie, is het misschien beter om het size attribuut samen met de breedte in te stellen.


Antwoord 7

U krijgt meer consistentie als u breedte gebruikt (uw tweede voorbeeld).


Antwoord 8

U kunt het formaat wijzigen met behulp van stijl en breedte om het tekstvak te vergroten/verkleinen.
Hier is de code ervoor.

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

Antwoord 9

HTML bepaalt de semantische betekenis van de elementen. CSS bepaalt de lay-out/stijl van de pagina. Gebruik CSS wanneer u uw lay-out beheert.

Kortom, gebruik nooit size=””

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twelve + six =

Other episodes