Jak można zdefiniować rozmiar wejściowego pola tekstowego w HTML?


Odpowiedzi:


129

Możesz ustawić jego width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

lub jeszcze lepiej zdefiniuj klasę:

<input type="text" id="text" name="text_name" class="mytext" />

aw osobnym pliku CSS zastosuj niezbędną stylizację:

.mytext {
    width: 300px;
}

Jeśli chcesz ograniczyć liczbę znaków, które użytkownik może wpisać w tym polu tekstowym, możesz użyć maxlengthatrybutu:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

11
również: możesz zmienić szerokość w kategoriach „em” (a nie „px”), a wtedy rozmiar będzie proporcjonalny do rozmiaru czcionki pola tekstowego
Alexander Bird


8

Spróbuj tego

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Albo

 <input type="text" id="txtbox">

z css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

3
Twoja odpowiedź nie dodaje nic nowego i powinieneś określić jednostki (px, pt,% v itd.) W css
Jon P

1
Cóż - rozmiar czcionki (style = "font-size: 18pt") był tym, którego szukałem, co również zwiększa rozmiar pudełka. Chociaż OP nie został wyraźnie o to poproszony, wnosi również wartość dodaną.
Wolf5

To zadziałało. Dlatego bardzo dziękuję. Jednak tekst wydaje się wyśrodkować w pionie. Czy mogę temu w jakikolwiek sposób zapobiec?
Aaron John Sabu

@AaronJohnSabu Przepraszamy za opóźnienie .. Spróbuj zwiększyć szerokość .. mam nadzieję, że już znalazłeś odpowiedź ..
Janarthanan Ramu

3

Możesz ustawić szerokość w pikselach za pomocą wbudowanego stylu:

<input type="text" name="text" style="width: 195px;">

Możesz również ustawić szerokość z widoczną długością znaków:

<input type="text" name="text" size="35">

-2
<input size="45" type="text" name="name">

„Rozmiar” określa widoczną szerokość znaków elementu wejściowego.

Możesz także użyć wysokości i szerokości z css.

<input type="text" name="name" style="height:100px; width:300px;">
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.