Moet ik een tekstgebied aanpassen met CSS width/ height of HTML cols/rows attributen?

Elke keer als ik een nieuw formulier ontwikkel dat een textareabevat, heb ik het volgende dilemma wanneer ik de afmetingen ervan moet specificeren:

Gebruik CSSof gebruik de textarea‘s attributen colsen rows?

Wat zijn de voor- en nadelen van elke methode?

Wat is de semantiek van het gebruik van deze attributen?

Hoe wordt het meestal gedaan?


Antwoord 1, autoriteit 100%

Ik raad aan om beide te gebruiken. Rijen en kolommen zijn vereist en nuttig als de client geen CSS ondersteunt. Maar als ontwerper overschrijf ik ze om precies de gewenste maat te krijgen.

De aanbevolen manier om dit te doen is via een externe stylesheet, bijvoorbeeld

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>

Antwoord 2, autoriteit 36%

textarea { height: auto; }
<textarea rows="10"></textarea>

Antwoord 3, autoriteit 4%

Volgens de w3c zijn cols en rijen beide vereiste attributen voor tekstgebieden. Rijen en Cols zijn het aantal karakters dat in het tekstgebied zal passen in plaats van pixels of een andere potentieel willekeurige waarde. Ga met de rijen/kolommen.


Antwoord 4, autoriteit 3%

Voor tekstgebied kunnen we onderstaande css gebruiken om de grootte vast te stellen

   <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

Getest in angularjs en angular7


Antwoord 5, autoriteit 2%

Het antwoord is “ja”. Dat wil zeggen, u moet beide gebruiken. Zonder rijen en kolommen (en er zijn standaardwaarden, zelfs als u ze niet expliciet gebruikt) is het tekstgebied onbruikbaar als CSS is uitgeschakeld of overschreven door een gebruikersstijlblad. Houd altijd rekening met toegankelijkheidsproblemen. Dat gezegd hebbende, als je stylesheet het uiterlijk van het tekstgebied mag bepalen, zul je over het algemeen eindigen met iets dat er een stuk beter uitziet, goed past in het algemene pagina-ontwerp, endat de grootte kan wijzigen om gebruikersinvoer bij te houden (uiteraard binnen de grenzen van goede smaak).


Antwoord 6, autoriteit 2%

<textarea style="width:300px; height:150px;" ></textarea>

Antwoord 7

De grootte van een tekstgebied kan worden gespecificeerd door de attributen cols en rijen, of zelfs beter; door de eigenschappen van CSS voor hoogte en breedte.
Het cols attribuut wordt ondersteund in alle belangrijke browsers.
Een belangrijk verschil is dat <TEXTAREA ...>een containertag is: deze heeft een starttag ().


Antwoord 8

Normaal gesproken geef ik heightniet op, maar wel width: ...en rowsen cols.

Meestal zijn in mijn gevallen alleen widthen rowsnodig om het tekstgebied er mooi uit te laten zien in verhouding tot andere elementen. (En colsis een uitwijkmogelijkheid als iemand geen CSS gebruikt, zoals uitgelegd in de andere antwoorden.)

((Het specificeren van zowel rowsals heightvoelt een beetje als het dupliceren van gegevens denk ik?))


Antwoord 9

Een belangrijk kenmerk van tekstgebieden is dat ze uitbreidbaar zijn. Op een webpagina kan dit ertoe leiden dat er schuifbalken in het tekstgebied verschijnen als de tekstlengte de door u ingestelde ruimte overvult (of dat nu rijen of CSS is). Dat kan een probleem zijn wanneer een gebruiker besluit af te drukken, vooral met ‘afdrukken’ naar PDF – dus stel een comfortabel grote min-hoogte in voor afgedrukte tekstgebieden met een voorwaardelijke CSS-regel:

@media print { 
textarea {
min-height: 900px;  
}
}

Antwoord 10

HTML-rijen en -kolommen reageren niet!

Dus ik definieer de grootte in CSS. Als tip: als je een klein formaat voor mobiele telefoons definieert, denk dan eens aan het gebruik van textarea:focus {};

Voeg hier wat extra ruimte toe, die zich pas ontvouwt op het moment dat een gebruiker daadwerkelijk iets wil schrijven


Antwoord 11

als je niet elke keer gebruikt, gebruik dan line-height:’..’; eigenschap zijn controle over de hoogte van het tekstgebied en de breedte-eigenschap voor de breedte van het tekstgebied.

of u kunt gebruik maken van lettergrootte door css te volgen:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

Antwoord 12

JA!….maak altijd textareaop met CSS en vermijd de attributen, tenzij je een heel oude agent moet ondersteunen die geen stylesheets ondersteunt. Anders heb je de volledige macht om CSS te gebruiken. Hieronder staat mijn standaard CSS-opmaak voor tekstgebied dat er op elke website mooi uitziet. Pas het aan zoals u houdt van. Opmerkingen zijn hieronder opgenomen, zodat u kunt zien waarom ik die CSS-eigenschappen en -waarden heb gekozen:

textarea {
    display: inline-block;
    margin: 0;
    padding: .2em;
    width: auto;
    min-width: 30em;
    /* The max-width "100%" value fixes a weird issue where width is too wide by default and extends beyond 100% of the parent in some agents. */
    max-width: 100%;
    /* Height "auto" will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering. Remove this if you want a pre-set height. Use "em" to match the font size set in the website. */
    height: auto;
    /* Use "em" to define the height based on the text size set in your website and the text rows in the box, not a static pixel value. */
    min-height: 10em;
    /* Do not use "border" in textareas unless you want to remove the 3D box most browsers assign and flatten the box design. */
    /*border: 1px solid black;*/
    cursor: text;
    /* Some textareas have a light gray background by default anyway. */
    background-color: #eee;
    /* Overflow "auto" allows the box to start with no scrollbars but add them as content fills the box. */
    overflow: auto;
    /* Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually. Note: Resize isn't supported by most older agents and IE. */
    resize: both;
}

In mijn “reset” element stylesheet stel ik deze waarden standaard in voor “textarea”standaard, die al je textarea een mooie look en feel geven met scrollen wanneer gedetecteerd, een resizing tab ( niet-IE-browsers), en oplossingen voor afmetingen, waaronder een hoogte waarmee de box zichzelf kan aanpassen op basis van bestaande inhoud die u erin plaatst voor de gebruiker en een breedte die niet verder gaat dan de beperkingen van de bovenliggende containers.


Antwoord 13

CSS


input
{
    width: 300px;
    height: 40px;
} 

HTML


<textarea rows="4" cols="50">HELLO</textarea>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

1 × 1 =

Other episodes