Rozmiar wejściowy a szerokość

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

lub

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

Który kod jest optymalny dla różnych przeglądarek?

Oczywiście zależy to od wymagań, ale jestem ciekawy, jak ludzie decydują i na jakiej podstawie.

Możesz użyć obu. Styl css zastąpi sizeatrybut w przeglądarkach obsługujących CSS i sprawi, że pole będzie mieć prawidłową szerokość, a dla tych, które tego nie zrobią, spadnie do określonej liczby znaków.

Edit: Powinienem wspomnieć, że sizeatrybut nie jest precyzyjna metoda wymiarowania: zgodnie ze specyfikacją HTML , to powinien odnosić się do liczby znaków w bieżącej czcionki wejście będzie w stanie wyświetlić naraz.

Jednakże, chyba że podana czcionka jest czcionką o stałej szerokości / monospace, nie jest to gwarancją, że określona liczba znaków będzie faktycznie widoczna; w większości czcionek różne znaki będą miały różne szerokości. To pytanie ma kilka dobrych odpowiedzi dotyczących tego problemu.

Poniższy fragment pokazuje oba podejścia.

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

Sugeruję, prawdopodobnie najlepszym sposobem jest ustawienie szerokości stylu w jednostce em :) Więc dla wielkości wejściowej 20 znaków wystarczy ustawić style='width:20em':)

size jest niespójny w różnych przeglądarkach i ich możliwych ustawieniach czcionek.

widthZestaw w stylu px będą przynajmniej być spójne, modulo problemy z materacem wielkości . Możesz także ustawić styl w „em”, jeśli chcesz zmienić jego rozmiar względem czcionki (choć znowu będzie to niespójne, chyba że fontwyraźnie określisz rodzinę i rozmiar danych wejściowych ) lub „%”, jeśli tworzysz formularz układu płynnego. Tak czy inaczej, arkusz stylów jest prawdopodobnie lepszy niż styleatrybut wbudowany .

Trzeba jeszcze sizeza <select multiple>uzyskać wysokość do linii z prawidłowo opcji. Ale nie użyłbym tego na <input>.

Chcę powiedzieć, że jest to sprzeczne z „konwencjonalną mądrością”, ale ogólnie wolę używać rozmiaru. Powodem tego jest właśnie powód, dla którego wiele osób mówi, że nie: szerokość pola będzie się różnić w zależności od przeglądarki, w zależności od rozmiaru czcionki. W szczególności zawsze będzie wystarczająco duży, aby wyświetlić określoną liczbę znaków, niezależnie od ustawień przeglądarki.

Na przykład, jeśli mam pole daty, zwykle chcę, aby pole było wystarczająco szerokie, aby wyświetlało 8 lub 10 znaków (dwucyfrowy miesiąc i dzień oraz dwu- lub czterocyfrowy rok z separatorami). Ustawienie atrybutu rozmiaru zasadniczo gwarantuje, że cała data będzie widoczna, przy minimalnej marnowanej przestrzeni. Podobnie w przypadku większości liczb - znam zakres oczekiwanych wartości, więc ustawię atrybut size na odpowiednią liczbę cyfr plus kropka dziesiętna, jeśli dotyczy.

O ile wiem, żaden atrybut CSS tego nie robi. Na przykład ustawienie w nich szerokości opiera się na wysokości, a nie na szerokości, a zatem nie jest bardzo precyzyjne, jeśli chcesz wyświetlić znaną liczbę znaków.

Oczywiście ta logika nie zawsze ma zastosowanie - na przykład pole wprowadzania nazwy może zawierać dowolną liczbę znaków. W takich przypadkach powrócę do właściwości szerokości CSS, zwykle w px. Powiedziałbym jednak, że większość pól, które tworzę, zawierają jakąś znaną treść, a określając atrybut size, mogę upewnić się, że większość treści, w większości przypadków, jest wyświetlana bez przycinania.

Właśnie przeszedłem walkę ze stołem, którego nie mogłem zmniejszyć, bez względu na to, który element starałem się zmniejszyć, szerokość stołu pozostała taka sama. Szukałem za pomocą firebuga, ale nie mogłem znaleźć elementu, który ustawiał szerokość tak wysoko.

W końcu próbowałem zmienić atrybut rozmiaru wejściowych elementów tekstowych i to naprawiłem. Z jakiegoś powodu atrybut rozmiaru przesłonił szerokości css. Korzystałem z jQuery do dynamicznego dodawania wierszy do tabeli i to właśnie te wiersze zawierały dane wejściowe. Być może więc, jeśli chodzi o dynamiczne dodawanie danych wejściowych za pomocą funkcji appendTo (), może lepiej ustawić atrybut size wraz z szerokością.

Uzyskasz większą spójność, jeśli użyjesz szerokości (drugi przykład).

Możesz zmienić rozmiar, używając stylu i szerokości, aby zmienić rozmiar pola tekstowego. Oto jego kod.

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

Użyj wyrównania, aby wyśrodkować pole tekstowe.

Zarówno sizeatrybut w HTML, jak i widthwłaściwość w CSS ustawią szerokość pliku <input>. Jeśli chcesz ustawić szerokość na mniejszą niż szerokość każdego znaku, użyj **ch**jednostki jak w:

input {
    width: 10ch;
}

HTML kontroluje semantyczne znaczenie elementów. CSS kontroluje układ / styl strony. Użyj CSS, gdy kontrolujesz swój układ.

Krótko mówiąc, nigdy nie używaj size = ""