Giriş boyutu ve genişlik karşılaştırması

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

veya

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

Hangisi en iyi tarayıcılar arası kod?

Tabii ki bu şartlara bağlı, ancak insanların nasıl ve hangi temelde karar verdiğini merak ediyorum.

Her ikisini de kullanabilirsiniz. Css stili, sizeCSS'yi destekleyen tarayıcılarda özelliği geçersiz kılar ve alanı doğru genişlik yapar ve yapmayanlar için belirtilen karakter sayısına geri döner.

Düzenleme: Bunu bahsetmeliydik size: nitelik boyutlandırma kesin bir yöntem değildir HTML şartnamesine uygun , bu olmalıdır giriş kerede görüntülemek mümkün olacak geçerli yazı tipi karakter sayısına bakın.

Ancak, belirtilen yazı tipi sabit genişlikli / tek aralıklı yazı tipi değilse , belirtilen karakter sayısının gerçekten görüneceği garanti edilmez ; çoğu yazı tipinde farklı karakterler farklı genişliklerde olacaktır. Bu sorunun bu konuyla ilgili bazı iyi cevapları var.

Aşağıdaki kod parçası her iki yaklaşımı da göstermektedir.

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

Ben önermek, muhtemelen en iyi yolu em biriminde stil genişliği ayarlamaktır :) Yani 20 karakter giriş boyutu için sadece ayarlanmış style='width:20em':)

size farklı tarayıcılarda ve olası yazı tipi ayarlarında tutarsız.

widthPx tarzı seti en azından tutarlı olacaktır, modulo kutu boyutlandırma sorunları . Ayrıca, yazı tipine göre boyutlandırmak istiyorsanız stili 'em' olarak ayarlamak isteyebilirsiniz (yine de, girişin fontailesini ve boyutunu açık bir şekilde ayarlamadığınız sürece bu tutarsız olacaktır ) veya sıvı düzen formu. Her iki durumda da, bir stil sayfası satır içi styleözniteliğine tercih edilebilir .

Yüksekliğin, seçeneklerle doğru şekilde hizalanması sizeiçin hala ihtiyacınız vardır <select multiple>. Ama bunu bir <input>.

Bunun "geleneksel bilgeliğe" aykırı olduğunu söylemek istiyorum, ama genellikle boyutu kullanmayı tercih ederim. Bunun nedeni birçok kişinin söylememesinin sebebidir: alanın genişliği yazı tipi boyutuna bağlı olarak tarayıcıdan tarayıcıya değişecektir. Özellikle, tarayıcı ayarlarından bağımsız olarak, belirtilen sayıda karakteri görüntülemek için her zaman yeterince büyük olacaktır.

Örneğin, bir tarih alanım varsa, alanın genellikle 8 veya 10 karakter görüntüleyecek kadar geniş olmasını isterim (iki basamaklı ay ve gün ve iki veya dört basamaklı yıl, ayırıcılarla). Size boyut özniteliğinin ayarlanması, asgari olarak boşa giden alanla birlikte tüm tarihin görünmesini garanti eder. Çoğu sayı için benzer şekilde - Beklenen değerlerin aralığını biliyorum, bu nedenle boyut niteliğini uygun basamak sayısına ve varsa ondalık noktaya ayarlayacağım.

Anlayabildiğim kadarıyla, hiçbir CSS özelliği bunu yapmaz. Örneğin, em'de bir genişlik ayarlamak, genişliği değil yüksekliği temel alır ve bu nedenle, bilinen sayıda karakteri görüntülemek istiyorsanız çok kesin değildir.

Tabii ki, bu mantık her zaman geçerli değildir - örneğin bir ad giriş alanı herhangi bir sayıda karakter içerebilir. Bu durumlarda, genellikle piksel cinsinden CSS genişliği özelliklerine geri döneceğim. Ancak, alanların çoğunluğu ı bilinen içerik çeşit olun ve ben emin olabilirsiniz boyutu niteliğini belirterek söyleyebilirim en içeriğin, içinde çoğu durumlarda, kırpma olmadan görüntülenir.

Bir masa ile kavga ettim, hangi parçayı küçültmeye çalışsam da, masanın genişliğini aynı tutmaya çalışsam da küçülemedim. Firebug kullanarak arama yaptım ama genişliği çok yüksek ayarlayan öğeyi bulamadım.

Sonunda girdi metin öğelerinin boyut özniteliğini değiştirmeyi denedim ve bu düzeltti. Nedense, boyut özelliği css genişliklerinin üzerine çıktı. Dinamik olarak bir tabloya satır eklemek için jQuery kullanıyordum ve girişleri içeren bu satırları oldu. Bu nedenle, appendTo () işlevini kullanarak dinamik olarak girdi eklemek söz konusu olduğunda, size boyut özniteliğini genişlikle birlikte ayarlamak daha iyi olabilir .

Genişliği kullanırsanız daha fazla tutarlılık elde edersiniz (ikinci örneğiniz).

Metin kutusunu yeniden boyutlandırmak için stili ve genişliği kullanarak yeniden boyutlandırabilirsiniz. İşte bunun kodu.

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

Metin kutusunu ortalamak için hizalama işlevini kullanın.

Hem sizeHTML'deki özellik hem de CSS'deki widthözellik bir <input>. Genişliği, her karakterin genişliğine yakın bir şeye ayarlamak istiyorsanız **ch**birimi aşağıdaki gibi kullanın :

input {
    width: 10ch;
}

HTML, öğelerin anlamsal anlamını kontrol eder. CSS sayfanın düzenini / stilini kontrol eder. Düzeninizi kontrol ederken CSS kullanın.

Kısacası, asla size = "" kullanmayın