Sådan ændre bredden på Tekstboks CSS

Mens mange kodere stadig bruge "cols" og "rækker" tilskriver størrelse tekstbokse i HTML-formularer, disse målinger kommer med to fejl. Først browsere måle "cols" og "rækker" i forhold til størrelsen af ​​den skrifttype, der bruges i tekstfeltet. Den anden fejl angår adskillelse af indhold og stil; det er meget lettere at redesigne en hjemmeside, når alle stilarter er sat i en enkelt Cascading Style Sheets (CSS) fil. Af disse årsager bør du ændre bredden på en tekstboks ved hjælp af "width" ejendom i CSS kode.

Vejledning

1

Gå til "Start" på proceslinjen i Windows, og skriv "Notepad" eller navnet på en kode editor i søgefeltet. Tryk på "Enter" for at indlæse redaktøren.

2

Naviger til "File" i den øverste menubjælke og åbn HTML-filen til din web side, der indeholder tekstfeltet. Hvis din webside endnu ikke indeholder en tekstboks, tilføje sin kode som følger:

<Textarea> Sample Text </ textarea>

Ovenstående kode opretter en tekstboks med nogle standard tekst indeni, "Sample Text". Dette skal gå mellem et par "<form>" tags. Når du redigerer en eksisterende formular, vil du allerede har disse tags i din kode.

3

Ændre bredden på tekstfeltet med CSS kode ved at sætte "stil" attribut for boksen. Du bør indstille boksen "width" ejendom værdi i form af enten pixels eller en procent. En procentværdi gør boksen størrelse ændre sig med browseren størrelse, mens en pixelstørrelse altid forbliver den samme. Her er koden:

<Textarea style = "width: 200px;"> </ textarea>

Erstat "px" med "%" for at skifte til en procentværdi.

4

Skriv CSS kode for bredden af ​​din tekstboks i et eksternt typografiark som dette:

textarea {

bredde: 50%;

}

Denne kode kan også gå mellem "<style>" tags i hovedet af en HTML-fil. For at vælge et bestemt tekstfelt, give det et ID-attribut og ændre din kode til dette:

mybox {

bredde: 100px;

}

TIPS

  • De samme metoder til fastsættelse af tekstboks bredde gælder også for alle input felter i dine HTML-formularer.
  • Nogle gange kan en webside, der indeholder en form ikke har en HTML forlængelse. Du kan også kigge efter en fil med en PHP udvidelse, da PHP er et fælles sprog, der anvendes med HTML til at håndtere formularer.
  • Gem alle HTML og CSS filer, før du redigerer dem.
  • Fjern ikke "navn" attribut fra tags i enhver form du redigerer, medmindre du ved præcis, hvordan denne form fungerer. Mange scripts påberåbe sig denne egenskab for at få værdierne fra brugerinput.

Relaterede artikler