Najlepszy sposób na layout w formularzach HTML?
Chcę wyświetlić formularz HTML zawierający zaznaczone pola tekstowe, TAK:
First Name: [_____________]
Last Name: [_____________]
Date of Birth: [________]
Moim oczywistym podejściem jest użycie <TABLE> i po prostu umieszczenie etykiet i pól tekstowych w komórkach, ale czy jest lepszy sposób, np. podejście oparte na CSS?
EDIT:
- szukam sposobu, który zmniejszy słowność w pliku HTML.
- i tak, Szukam automatycznego dopasowania etykiet. Zobacz podobne pytanie dotyczące pakowania etykiet
9 answers
Jeśli potrzebujesz etykiet po lewej stronie takich pól, po prostu Użyj tabeli. Tabele nie tylko ładnie degradują się w starszych przeglądarkach, ale również automatycznie dopasowują kolumnę etykiet do tekstu w nich (zakładając, że użyjesz white-space: no-wrap Na komórkach zawierających etykiety i / lub - i to jest prawdziwa herezja-zaufanego starego atrybutu nowrap na znaczniku th), dobrze radzą sobie z tym, że są dość wąskie i są łatwe. Niech każda komórka etykiety będzie nagłówkiem, a każda komórka pola zwykłą komórką. And it ' s a pain, ale upewnij się, że etykiety naprawdę są label s I Linkuj do ich pól, ponieważ dostępność ma znaczenie, nawet jeśli (być może szczególnie jeśli) używasz tabeli nie semantycznie.
Chciałbym usłyszeć o rozwiązaniach CSS, które automatycznie powiększają kolumny etykiet, dobrze radzą sobie z wąskimi kolumnami i nie wymagają hacków 18, aby poradzić sobie z niespójnościami w różnych przeglądarkach. Byłbym zachwycony, widząc je. Ale za każdym razem, gdy zaglądałem (a to jest kilka), wciąż była luka. Lukę, która wymaga wypełnienia, abyśmy mogli zatrzymać robi to bez noszenia spódniczek.
Dla każdego, kto czyta nie potrzebuje etykiet po lewej stronie, sprawdź jball ' s answer dla ładnej, semantycznej alternatywy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:29:36
Jeśli chodzi o użyteczność i jeśli pionowa spacja nie jest czynnikiem ograniczającym, lista pól z etykietą nad każdym polem jest najszybsza do odczytania i wypełnienia i może być wykonana estetycznie. Zobacz wiele badań użyteczności w Internecie, aby uzyskać więcej informacji, np. http://www.lukew.com/resources/articles/web_forms.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-25 21:24:25
Chciałbym użyć listy definicji (<dl>), które wydają się być semantycznie poprawne.
Etykieta jest definiowana przez wejście użytkownika. Dla mnie to ma sens.
<dl> wyraża treść semantyczną dokładniej niż tabela.
<dl>
<dt><label for="name>Name</label></dt>
<dd><input type="text" id="name" /></dd>
<dt><label for="email>Email</label></dt>
<dd><input type="text" id="email" /></dd>
</dl>
Oto przykład
Przy okazji rozkładają się wdzięcznie we wszystkich przeglądarkach, nawet tekstowych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-25 21:48:06
Myślę, że coś takiego właśnie robię, ale też nie będę autosizował do długości tekstu, ale moim zdaniem jest czystszy
<form>
<label for="firstName">First Name</label>
<input type="textfield" name="firstName" />
<label for="lastName">Last Name</label>
<input type="textfield" name="lastName" />
</form>
label {
float:left;
width:30px;
}
input {
float:left;
margin-left:30px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-25 21:27:31
Artykuł jest trochę stary, ale zawsze uważałem, że lista porad jest solidna: (jeśli chcesz się pozbyć swoich tabel)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-25 21:40:52
Wyświetlanie tabeli CSS
Z IE8 + możesz użyć wyświetlania tabeli CSS w tym celu:
<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>
<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>
<div>
<label></label>
<input type="submit" value="Send"/>
</div>
</form>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-10 17:58:29
Użyj frameworka CSS, takiego jak Blueprint i użyj go do stylizacji formularzy.
Kolejną sztuczką byłoby tworzenie wirtualnych "kolumn" za pomocą css i unoszenie ich obok siebie. Etykiety w jednej kolumnie i wejścia w innej. Umieść to (obie kolumny) w div o wystarczająco dużej szerokości i przesuń kolumny w przeciwnym kierunku, w jaki chcesz je wyrównać.
Oto Kod (ponieważ tworzę formularz), który będzie działał dla podstawowych formularzy. Jedynym ograniczeniem jest duże prawo marża na wejściach.
form input, form select
{
float: right;
margin-right: 650px;
}
form label
{
float: right;
margin-top: 5px;
margin-right: 10px;
}
form .nofloat
{
float: none;
margin: 0;
}
form br
{
clear: both;
}
I układ jak tak
<input type="text" id="name" />
<label for="name">Name</label>
<br />
Na szczycie tego małego, wąsko napisanego kodu znajduje się cały artykuł związany z tworzeniem formularzy bez tabletu w CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-07 12:24:39
Zazwyczaj zauważyłem, że istnieją co najmniej pewne problemy, gdy nie używam tabel dla formularzy. Ogólne rzeczy, których nie udało mi się rozwiązać:
- kolor tła dla pól / wejść nie jest tak naprawdę możliwy bez sztucznego tła
- Auto-wymiarowanie kolumn, ale myślę, że jest OK
- pole unosi się w CSS, możesz użyć JS, ale tabele mogą to zrobić z czystym CSS
Może brakuje mi kilku rzeczy, ale najbardziej elastyczny znacznik jeśli używasz CSS jest jak poniżej:
<div class='form-field'>
<label>Name</label>
<input />
</div>
Masz problemy, jeśli chcesz mieć wiele pól na sekcję etykiety, więc musisz wprowadzić inny div, aby trzymać wejścia (aby etykieta nadal płynęła w lewo itp.):
<div class='form-field'>
<label>Name</label>
<div class='form-inputs'>
<input />
<input />
</div>
</div>
Z powyższym znacznikiem możesz osiągnąć bardzo elastyczne formularze, Nie będę publikować CSS, ponieważ jest bardzo podobny do układu kolumn 2.
Nadal muszę usiąść i spróbować dowiedzieć się, czy czyste formularze CSS są realne na każdą okazję, ale tbh to bardzo mało prawdopodobne!
Formularze są najgorsze rzecz do stylu za pomocą CSS. Jedyne poważne problemy z przeglądarką, które miałem, to stylizacja elementów FieldSet i Legend. Żadnych włamań, ale trzeba trochę pracy, żeby dobrze wyglądać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-25 21:51:03
Jednym z problemów z tabelami jest błąd przestrzeni . Jeśli nie używasz tabel, możesz napisać etykietę i wprowadzić w następujący sposób:
<label for="foo">Blah <input id="foo" type="text"/></label>
, który prawidłowo hermetyzuje wejście i etykietę.
W tabeli, z drugiej strony, masz te rozdzielone:
<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>
Oznacza to, że obszar pomiędzy I nie odpowiada na kliknięcia myszką.
Nie jest tak źle z prostymi polami, jest to naprawdę denerwujące z przyciskami opcji i checkboxami (lub może jestem bardzo wybredna.)
Teraz, odpowiadając na twoje pytanie: myślę, że nie ma dobrego sposobu na formatowanie kolumny w CSS (chyba, że szerokość kolumny jest znana-można to uzyskać Za pomocą JavaScript...) Więc T. J. Crowder z pewnością ma doskonałą odpowiedź.
Jest jednak jeden argument za CSS (i wymuszonymi szerokościami), ponieważ w jednym przypadku stworzyłem bardzo duży formularz, który obejmował cały ekran. Wszystkie pola pojawią się na jednym ekranie (zgodnie z życzeniem klienta) i CMS nie wyświetla tabeli. Ale mimo to, tabela byłaby koszmarem po prostu dlatego, że wszystkie pola były dla wielu umieszczone w niezrównanych kolumnach. To byłoby dość trudne z tabeli (wiele rowspan przy użyciu tabeli jako siatki, która byłaby tabela dla układu!).
Aktualizacja:
Zgodnie z komentarzem poniżej, singe31 mówi, że <input/> nie może być zdefiniowana w tagu <label>. To jest złe. HTML 4.01 DTD jest łatwy do odczytania i widzimy, że:
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
Więc w inne słowa An {[3] } mogą pojawić się w znaczniku <label>. To całkowicie legalne.
HTML 5 wyraźnie pokazuje, że jest to legalne w dokumentacji na w3c tutaj:
Http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element
Przewiń trochę w dół do "przykładu kodu" i zobaczysz:
Przykład Kodu
Na przykład na platformach, gdzie kliknięcie lub naciśnięcie etykiety checkbox sprawdza pole wyboru, kliknięcie lub naciśnięcie etykiety w poniższy fragment może spowodować, że agent użytkownika uruchomi syntetyczne kroki aktywacji kliknięć na elemencie wejściowym, tak jakby sam element został uruchomiony przez użytkownika.]}
<label><input type=checkbox name=lost> Lost</label>Na innych platformach, zachowanie może być po prostu skupić kontrolę, lub nic nie robić.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-03 01:31:53