<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.
Odpowiedzi:
Możesz użyć obu. Styl css zastąpi
size
atrybut 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
size
atrybut 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.
źródło
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'
:)źródło
size
jest niespójny w różnych przeglądarkach i ich możliwych ustawieniach czcionek.width
Zestaw 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 żefont
wyraź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żstyle
atrybut wbudowany .Trzeba jeszcze
size
za<select multiple>
uzyskać wysokość do linii z prawidłowo opcji. Ale nie użyłbym tego na<input>
.źródło
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.
źródło
ex
do tego jednostki, chociaż użycie rozmiaru wciąż upraszcza większość przypadków, ponieważ nie masz dziesiątek identyfikatorów / klas w twoim css dla szerokości.ex
to wysokość znaku (konkretnie „X”), a nie szerokość - podobnie jakem
. Ponieważ nie ma stałej relacji między wysokością a szerokością znaku (x lub w inny sposób), nie ma powodu, aby sądzić, że użycie wysokości znaku do ustawienia szerokości pola spowoduje, że pole będzie miało odpowiednią szerokość, aby pokazać dowolną podana liczba znaków. Może być szerszy lub węższy, w zależności od czcionki. Terazch
jednostka wygląda obiecująco, ale nie jest obsługiwana w IE mniejszej niż 9, co byłoby problemem, gdy to napisałem.ch
mogłoby być niestety lepiej, niektóre zera są cienkie i może nie mierzyć pełnej przestrzeni znaków ...size
atrybut stara się to zrobić dokładnie. Być może masz rację, coex
jest rozsądną alternatywą, ale faktem jest, że jest to atrybut wysokości, a nie atrybut szerokości.size
jest atrybutem szerokości, ale nie css.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ą.
źródło
Uzyskasz większą spójność, jeśli użyjesz szerokości (drugi przykład).
źródło
Możesz zmienić rozmiar, używając stylu i szerokości, aby zmienić rozmiar pola tekstowego. Oto jego kod.
Użyj wyrównania, aby wyśrodkować pole tekstowe.
źródło
Zarówno
size
atrybut w HTML, jak iwidth
wł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:źródło
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 = ""
źródło