Ukuran input vs lebar

<input name="txtId" type="text" size="20" />

atau

<input name="txtId" type="text" style="width: 150px;" />

Manakah kode lintas-browser yang optimal?

Tentu saja itu tergantung pada persyaratan, tapi saya ingin tahu bagaimana orang memutuskan dan atas dasar apa.

Anda bisa menggunakan keduanya. Gaya css akan mengesampingkan sizeatribut di browser yang mendukung CSS dan membuat bidang lebar yang benar, dan bagi mereka yang tidak, itu akan jatuh kembali ke jumlah karakter yang ditentukan.

Sunting: Saya seharusnya menyebutkan bahwa sizeatribut itu bukan metode ukuran yang tepat: menurut spesifikasi HTML , itu harus merujuk pada jumlah karakter dari font saat ini input akan dapat ditampilkan sekaligus.

Namun, kecuali font yang ditentukan adalah font dengan lebar tetap / monospace, ini bukan jaminan bahwa jumlah karakter yang ditentukan benar-benar akan terlihat; di sebagian besar font, karakter yang berbeda akan memiliki lebar yang berbeda. Pertanyaan ini memiliki beberapa jawaban bagus terkait masalah ini.

Cuplikan di bawah ini menunjukkan kedua pendekatan.

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

Saya sarankan, mungkin cara terbaik adalah mengatur lebar style di unit em :) Jadi untuk ukuran input dari 20 karakter hanya mengatur style='width:20em':)

size tidak konsisten di berbagai browser dan pengaturan font yang mungkin.

The widthGaya set di px akan setidaknya konsisten, modulo masalah box-sizing . Anda mungkin juga ingin mengatur gaya di 'em' jika Anda ingin mengukurnya relatif terhadap font (meskipun sekali lagi, ini akan menjadi tidak konsisten kecuali jika Anda mengatur keluarga input fontdan ukuran secara eksplisit), atau '%' jika Anda membuat bentuk tata letak cair. Either way, stylesheet mungkin lebih baik daripada styleatribut inline .

Anda masih perlu sizeuntuk <select multiple>mendapatkan ketinggian agar selaras dengan opsi dengan benar. Tapi saya tidak akan menggunakannya pada <input>.

Saya ingin mengatakan ini bertentangan dengan "kebijaksanaan konvensional", tetapi saya biasanya lebih suka menggunakan ukuran. Alasan untuk ini justru alasan yang banyak orang katakan tidak: lebar bidang akan bervariasi dari peramban ke peramban, tergantung pada ukuran font. Secara khusus, itu akan selalu cukup besar untuk menampilkan jumlah karakter yang ditentukan, terlepas dari pengaturan browser.

Misalnya, jika saya memiliki bidang tanggal, saya biasanya ingin bidang cukup lebar untuk menampilkan 8 atau 10 karakter (dua digit bulan dan hari dan dua atau empat digit tahun, dengan pemisah). Mengatur atribut ukuran pada dasarnya menjamin saya bahwa seluruh tanggal akan terlihat, dengan ruang yang terbuang minimal. Demikian pula untuk sebagian besar angka - Saya tahu kisaran nilai yang diharapkan, jadi saya akan mengatur atribut ukuran ke jumlah digit yang tepat, ditambah titik desimal jika berlaku.

Sejauh yang saya tahu, tidak ada atribut CSS yang melakukan ini. Mengatur lebar dalam em, misalnya, didasarkan pada ketinggian, bukan lebar, dan karenanya tidak terlalu tepat jika Anda ingin menampilkan jumlah karakter yang diketahui.

Tentu saja, logika ini tidak selalu berlaku - bidang entri nama, misalnya, dapat berisi sejumlah karakter. Dalam kasus itu saya akan kembali ke properti lebar CSS, biasanya dalam px. Namun, saya akan mengatakan mayoritas bidang yang saya buat memiliki semacam konten yang diketahui, dan dengan menentukan atribut ukuran saya dapat memastikan bahwa sebagian besar konten, dalam banyak kasus, ditampilkan tanpa kliping.

Aku baru saja melalui pertarungan dengan sebuah meja yang aku tidak bisa membuat lebih kecil tidak peduli elemen apa yang aku coba untuk mengecilkan lebar meja tetap sama. Saya mencari menggunakan pembakar tetapi tidak dapat menemukan elemen yang mengatur lebar begitu tinggi.

Akhirnya saya mencoba mengubah atribut ukuran elemen teks input dan memperbaikinya. Untuk beberapa alasan atribut ukuran over-rode lebar css. Saya menggunakan jQuery untuk secara dinamis menambahkan baris ke tabel dan baris inilah yang berisi input. Jadi mungkin ketika datang untuk menambahkan input secara dinamis menggunakan fungsi appendTo () mungkin lebih baik untuk mengatur atribut ukuran bersama dengan lebarnya.

Anda akan mendapatkan lebih banyak konsistensi jika Anda menggunakan lebar (contoh kedua Anda).

Anda dapat mengubah ukuran menggunakan gaya dan lebar untuk mengubah ukuran kotak teks. Ini kode untuk itu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

Gunakan menyelaraskan ke pusat kotak teks.

Kedua sizeatribut dalam HTML dan widthproperti di CSS akan mengatur lebar dari suatu <input>. Jika Anda ingin mengatur lebar menjadi sesuatu yang lebih dekat dengan lebar setiap karakter, gunakan **ch**unit seperti pada:

input {
    width: 10ch;
}

HTML mengontrol makna semantik elemen. CSS mengontrol tata letak / gaya halaman. Gunakan CSS saat Anda mengontrol tata letak Anda.

Singkatnya, jangan pernah gunakan size = ""