Girdi metin kutusunun boyutu HTML'de nasıl tanımlanabilir?

92

İşte bir HTML giriş metin kutusu:

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

Kutunun boyutunu belirleme seçenekleri nelerdir?

Bu CSS'de nasıl uygulanabilir?

html css input

— osos
kaynak

olası kopyası Bir HTML metin kutusunun boyutunu nasıl ayarlarım?

— Tony

Bazı durumlarda sadece ayar max-widthyeterlidir

— Christophe Roussy

130

Şunları ayarlayabilirsiniz width:

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

hatta daha iyi bir sınıf tanımlayın:

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

ve ayrı bir CSS dosyasında gerekli stili uygulayın:

.mytext {
    width: 300px;
}

Kullanıcının bu metin kutusuna yazabileceği karakter sayısını sınırlamak istiyorsanız, şu maxlengthözelliği kullanabilirsiniz :

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

— Darin Dimitrov
kaynak

11

ayrıca: genişliği "em" cinsinden değiştirebilirsiniz ("px" değil) ve ardından boyut metin kutusunun yazı tipi boyutuyla orantılıdır

— Alexander Bird

45

sizeNitelik, hem de çalışır

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

— Bulanık Analiz
kaynak

1

Bu beden özelliği normal olarak hangi birimlerde ölçülür?

— Thomas Kimber

8

Bunu dene

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

Veya başka

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

css ile:

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

— Janarthanan Ramu
kaynak

3

Cevabınız yeni bir şey eklemiyor ve css'de birimleri (px, pt,% v, vb.) Belirtmelisiniz

— Jon P

1

Eh- Yazı tipi boyutu (style = "font-size: 18pt") aradığım şeydi ve bu da kutunun boyutunu artırıyor. OP tarafından açıkça istenmese de, aynı zamanda değer katmaktadır.

— Wolf5

Bu işe yaradı. Bu nedenle çok teşekkürler. Ancak metin dikey olarak ortalanıyor gibi görünüyor. Bunu herhangi bir şekilde engelleyebilir miyim?

— Aaron John Sabu

@AaronJohnSabu Gecikme için özür dilerim .. Genişliği artırmayı deneyin .. umarım zaten cevap

— bulmuşsunuzdur

3

Genişliği, satır içi stil yoluyla piksel cinsinden ayarlayabilirsiniz:

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

Genişliği, görünür bir karakter uzunluğuyla da ayarlayabilirsiniz:

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

— betrice mpalanzi
kaynak

-2

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

"Boyut", eleman girdisinin karakterleri cinsinden görünür genişliği belirtir.

Ayrıca css'den yüksekliği ve genişliği de kullanabilirsiniz.

<input type="text" name="name" style="height:100px; width:300px;">

— Daniel dos Santos
kaynak