Bagaimana ukuran kotak teks input didefinisikan dalam HTML?

90

Berikut adalah kotak teks input HTML:

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

Apa sajakah pilihan untuk menentukan ukuran kotak?

Bagaimana ini bisa diterapkan di CSS?

html css input

— osos
sumber

kemungkinan duplikat Bagaimana cara mengatur ukuran kotak teks HTML?

— Tony

Dalam beberapa kasus, pengaturan saja max-widthsudah cukup

— Christophe Roussy

129

Anda dapat mengaturnya width:

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

atau bahkan lebih baik mendefinisikan kelas:

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

dan dalam file CSS terpisah, terapkan gaya yang diperlukan:

.mytext {
    width: 300px;
}

Jika Anda ingin membatasi jumlah karakter yang dapat diketik pengguna ke dalam kotak teks ini, Anda dapat menggunakan maxlengthatribut:

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

— Darin Dimitrov
sumber

11

juga: Anda dapat mengubah lebar dalam istilah "em" (dan bukan "px") dan kemudian ukurannya sebanding dengan ukuran font kotak teks

— Alexander Bird

45

The sizeatribut bekerja, serta

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

— Analisis Fuzzy
sumber

Dalam satuan apa atribut ukuran ini biasanya diukur?

— Thomas Kimber

8

Coba ini

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

Atau

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

dengan css:

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

— Janarthanan Ramu
sumber

3

Jawaban Anda tidak menambahkan hal baru dan Anda harus menentukan unit (px, pt,% v, dll) di css

— Jon P

1

Baik- Font-size (style = "font-size: 18pt") adalah yang saya cari dan itu juga meningkatkan ukuran kotak. Meski tidak diminta secara eksplisit oleh OP, hal itu juga menambah nilai.

— Wolf5

Ini berhasil. Karenanya terima kasih banyak. Namun teks tersebut tampaknya memusatkan dirinya secara vertikal. Bisakah saya mencegah ini dengan cara apa pun?

— Aaron John Sabu

@AaronJohnSabu Maaf atas keterlambatan .. Coba tambah ukuran lebarnya .. harap Anda sudah menemukan jawaban ..

— Janarthanan Ramu

3

Anda dapat menyetel lebar dalam piksel melalui gaya sebaris:

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

Anda juga dapat mengatur lebar dengan panjang karakter yang terlihat:

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

— betrice mpalanzi
sumber

-2

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

"Ukuran" menentukan lebar yang terlihat dalam karakter masukan elemen.

Anda juga bisa menggunakan tinggi dan lebar dari css.

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

— Daniel dos Santos
sumber