Formularze: czy twoje css uwzględniają twoje oznaczenia lub odwrotnie?

Question

chodzi formularzy HTML, bardzo powszechny wzorzec znaczników jest:

<form ...> 
    <p> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

Ile znaczników (klasy, itp) Czy zwykle zapewniają, aby umożliwić jak najbardziej elastycznego formatowania wizualnego formularza? To znaczy, ile znaczników dodajesz, aby pomóc w wyborze selektorów css i czy używasz generycznych selektorów?

<form ...> 
    <p class='name'> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p class='birthdate'> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

vs.

<form class='person' ...> 
    <p class='name string'> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p class='birthdate date'> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

W drugim przypadku, dodając typy rodzajowe („Data”) prosto z bazy danych może uczynić go bardziej łatwe konsekwentnie data pola formatu. Zawijanie grupowania ("osoba"), aby pokazać model, z którego pochodzą pola, może również pomóc. (Albo mógłbym użyć wewnętrznego DIV.) Jednak, aby zwiększyć ponowne wykorzystanie CSS, znajduję się dodając dodatkowy znacznik. W niektórych książkach, które czytałem, słyszę, że im mniej znaczników, tym lepiej (i ta linia może być bardzo szara, chociaż brzmi prawdziwie dla mnie). Na przykład mogłem bardzo dobrze wykorzystać znaczniki z jednego z wcześniejszych bloków i dodać znacznie więcej selektorów do css.

Jakie są twoje zasady decydowania o tym, ile znaczników ma sens? Lub ile umieścić na stronie css?

Ponadto, wiem, że mogę wybrać z nazwy wejścia, ale ponieważ jest to element zagnieżdżony, tracę możliwość kontrolowania formatowania z zewnętrznego opakowania ("p"), które zwykle jest tam, gdzie chcę, aby ta dodatkowa kontrola .

Answer 1

Staram się zachować i ograniczyć znaczniki html do minimum.

formularze HTML są najtrudniejsze do utrzymania HTML i CSS do minimum, ponieważ jest bardzo trudno dotrzeć do wszystkich różnych wejść we wszystkich przeglądarkach bez dodawania klas do nich, takie jak pole tekstowe do tekstowych itp

Jeśli wszystkie formularze dla tej witryny używają prostych pól tekstowych i niewiele więcej, minimalne podejście do marży działa dobrze. Jednak kontrole ze złożonymi marżami, takie jak telerikontrolery RAD nie działają z prostą marżą i często potrzebne są dodatkowe znaczniki i klasy.

Te małe sztuczki dodają markę, ale także sprawiają, że css są znacznie czystsze i bez wątpienia ułatwią stylizację takich elementów.

Dla pozostałych maszyn ogólnego html/css, staram się używać jak kilka klas, jak to możliwe, takie jak

.Menu {} 
.Menu li {} 
.Menu li a {} 

Ten rodzaj wzorca mogą być ponownie wykorzystane wiele powtarzanych danych i szablony mogą być wykonane i zaprojektowane z bardzo małym znacznikiem html.

Czasami nieuniknione dodawanie klas i cokolwiek, ale myślę, że jeśli ogólnie myślisz o zarówno css jak i html, powinieneś skończyć ze zręcznym znacznikiem.

Z witryny na witrynę rzadko używam CSS. Jego szybkie i łatwe wybieranie stylów na dowolne życzenie, przeprojektowanie istniejącej skóry w celu dopasowania do nowej witryny często nie jest warte tego IMO.

Głównie z CSS I mają tendencję do wiedzy Nauczyłem się od poprzednich stron i stosować go do nowych miejsc, aby kodowanie dla wszystkich przeglądarek łatwych :)

Answer 2

I mają tendencję do używania tagów do listy definicji stylu moje formularze.

<form> 
    <dl> 

    <dt><label for="name">Name:</label></dt> 
    <dd><input name="name" /></dd> 

    <dt><label for="birthdate">Birthdate:</label></dt> 
    <dd><input name="birthdate" /></dd> 

    ... 
    </dl> 
</form> 

ja też użyć następującego CSS:

FORM DT { 
    clear:both; 
    width:33%; 
    float:left; 
    text-align:right; 
} 

FORM DD { 
    float:left; 
    width:66%; 
    margin:0 0 0.5em 0.25em; 
} 

Więcej informacji tutaj: http://www.clagnut.com/blog/241/

jest to wiele znaczników, ale efekt jest spójna i skuteczna.

Inną możliwą do przyjęcia metodą formowania formularzy jest używanie tabel. Wystarczy pomyśleć o formie jako "interaktywne dane tabelaryczne".

Answer 3

Nie użyłbym znacznika <p> do grupowania etykiety i jej pola, ponieważ nie jest to akapit. Jeśli nie masz innego zastosowania dla <fieldset>, możesz użyć jednego na "wiersz". Jeśli masz trzy wejścia na urodziny, to zestaw pól jest całkowicie odpowiedni.

Lista definicji, jak sugerował Gavin, nie jest złym pomysłem, ale wydaje się niepotrzebnym znacznikiem - można po prostu ułożyć etykiety i dane wejściowe na odpowiednie szerokości i unieść je.

Dodawanie klas wrapperów jest również całkowicie poprawne - pamiętaj, że nie musisz ich używać w CSS, niezależnie dodają warstwę semantyczną. Może być nawet microformat, którego możesz użyć w niektórych przypadkach.

Można również użyć atrybutu selektorów do wejść typu ładnie:

input[type="text"], input[type="password"] { 
    border: 1px solid #ccc; 
    background: #fff; 
} 
input[type="submit"], input[type="reset"] { 
    border: 1px solid #666; 
    background: #ccc; 
} 

Answer 4

Osobiście po prostu zrobić:

<form> 
    <label for="foo">Foo</label> 
    <input type="text" id="foo" name="foo" /> 
    <br /> 
    <label for="foo2" class="block">Foo 2</label> 
    <textarea id="foo2" name="foo2"></textarea> 
    <br /> 

Potem przez css to zależy od tego, czy nie chcę element będzie inline to lub nie

form label.block{ 
    display: block; 
} 

Lub możesz zablokować + unieść je jak @DisgruntledGoat napisał. (Nienawidzę dodatkowych znaczników)

Answer 5

Po wielu latach, ja przybyłem na:

 
<fieldset> 
    <div> 
    <label for="Whatever">A text field</label> 
    <input type="text" id="Whatever" /> 
    </div> 
    <div class="required"> 
    <label for="RequiredField">A required field</label> 
    <input type="text" id="RequiredField" /> 
    </div> 
    <div class="stretch"> 
    <label for="LongField">A long field (stretched across 100% form width)</label> 
    <input type="text" id="LongField" /> 
    </div> 
    <div class="cmd"> 
    <button type="submit">Do whatever</button> 
    </div> 
<fieldset> 

Dodatkowo, mam dwie klasy CSS, które mogą ubiegać się:

 
fieldset div { 
    clear: both; 
} 

fieldset.block label { 
    display: block; 
    font-weight: bold; /* labels above fields */ 
} 

fieldset.aligned label:first-child { 
    width: 20%; 
    float: left; 
} 

fieldset.block .stretch input, 
fieldset.block .stretch textarea, 
fieldset.block .stretch select { 
    width: 100%; 
} 

fieldset.aligned .stretch input, 
fieldset.aligned .stretch textarea, 
fieldset.aligned .stretch select { 
    width: 79%; /* leave space for the label */ 
}