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

90

Oto pole tekstowe do wprowadzania tekstu HTML:

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

Jakie są możliwości określenia rozmiaru pudełka?

Jak można to zaimplementować w CSS?

html css input

— osos
źródło

możliwy duplikat Jak ustawić rozmiar pola tekstowego HTML?

— Tony

W niektórych przypadkach po prostu ustawienie max-widthjest wystarczające

— Christophe Roussy

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" />

— Darin Dimitrov
źródło

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

45

Ten sizeatrybut również działa

<input size="25" type="text">

— Analiza rozmyta
źródło

W jakich jednostkach normalnie mierzony jest ten atrybut rozmiaru?

— Thomas Kimber

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;
    }

— Janarthanan Ramu
źródło

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

— betrice mpalanzi
źródło

-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;">

— Daniel dos Santos
źródło