[XHTML] Formularz w tabeli a zgodność ze specyfikacją

[p_and]

Witam

Chciałbym rozmieścić pola formularza w poszczególnych komórkach tabeli, aby zaprojektować tym samym jego układ. Nie do końca jednak jestem pewien, czy zezwala na to standard XHTML, więc zwracam się z tym pytaniem do Was
Jeśli istnieje jakieś obejście, czy inna metoda zaprojektowania układu formularza proszę o odpowiedź.

Z góry dziękuje.

Pozwoliłem sobie edytować post i dodać fragment kodu:

Kod: Zaznacz cały

<table summary="formularz" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>Pozycja</th>
<th>Wartość</th>
</tr>
</thead>
<tbody>
<tr>
<td>Imię</td>
<td><input type="text" name="imie" id="imie" size="15" maxlength="15"/></td>
</tr>
<tr>
<td>Nazwisko</td>
<td><input type="text" name="nazwisko" id="nazwisko" size="25" maxlength="25"/></td>
</tr>
</tbody>
</table>

Czy taki zapis jest zgodny z XHTML?

[viraptor]

Na takie pytania odpowie ci http://validator.w3.org/
Prześlij odpowiedni kod, a on sprawdzi poprawność.

[Hawk]

@viraptor Walidator sprawdzi jedynie poprawnosc kodu, a nie to czy znaczniki sa uzyte zgodnie z ich przeznaczeniem, strona z layoutem zbudowanym w oparciu o tabele bez problemow przejdzie walidacje o ile jest napisana poprawnie.

Natomiast co do pytania, specyfikacja mowi ze tabel powinno sie uzywac tylko jezeli dane jakie maja byc przedstawione bezwzglednie tego wymagaja. Czyli gdybys chcial umiescic na przyklad rozklad jazdy autobusow, plan lekcji etc. to owszem mozna uzyc tabel ale stosowanie ich w celu sformatowanie ukladu formularza jest wg. mnie niezgodne ze specyfikacja.

Co do innej metody, na poczekaniu stworzylem cos takiego:

Kod: Zaznacz cały

  <div class="kontener">
    <div class="pozycja">Imię:</div>
    <div class="wartosc"><input type="text" name="imie" id="imie" size="15" maxlength="15"/></div>
    <div class="pozycja">Nazwisko:</div>
    <div class="wartosc"><input type="text" name="nazwisko" id="nazwisko" size="25" maxlength="25"/></div>
  </div>

I kod CSS:

Kod: Zaznacz cały

.pozycja {
  width: 120px;
  float: left;
}
.wartosc {
  width: 200px;
  float: left;
}
.kontener {
  width: 340px;
}

Wydaje mi sie, ze powinno sie dac wyelimimowac element kontener (uzywajac atrybutu clear). Niestety nie udalo mi sie, ale moze jest tu ktos kto powyzszy kod potrafi zapisac nieco prosciej.

[Stig]

Jeżeli chodzi o pełne zachowowanie zasad semantyki kodu to zaproponowałbym trochę inne rozwiązanie, od tego, które przedstawił Hawk:

Kod: Zaznacz cały

<fieldset>
<label for="imie">Imię</label><input type="text" name="imie" id="imie" size="15" maxlength="15" /><br />
<label for="nazwisko">Nazwisko</label><input type="text" name="nazwisko" id="nazwisko" size="25" maxlength="25" /><br />
</fieldset>

Gdzie kod CSS wygląda następująco:

Kod: Zaznacz cały

fieldset {
border: 0; 
}
label {
display: block;
width: 120px; 
float: left; 
}
input {
display: block;
width: 200px; 
float: left; 
}
br {
clear: both;
height: 0; 
}

[viraptor]

Walidator sprawdzi jedynie poprawnosc kodu, a nie to czy znaczniki sa uzyte zgodnie z ich przeznaczeniem, strona z layoutem zbudowanym w oparciu o tabele bez problemow przejdzie walidacje o ile jest napisana poprawnie.

Nie do końca jednak jestem pewien, czy zezwala na to standard XHTML, więc zwracam się z tym pytaniem do Was

To pytanie można i tak i tak zrozumieć. Jeśli chodzi o elementy <input> w <td> to są zgodne. Jeśli o zgodność z ideą użycia table, to różnie.

A co do specyfikacji, to:
1. "XHTML is a family of [..] document [..] that reproduce, subset, and extend HTML 4."
2. "The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."
3. "Tables should not be used purely as a means to layout document content [...]"
Czyli z jednej strony do layoutu jako takiego nie powinny być używane, ale jeśli chodzi o efekt "arrange data [...] into rows and columns", to jest to zachowanie porządane - a duża lista pól to najlepszy przykład.

Więc jest to podejście całkowicie poprawne, ale po prostu teraz odchodzi się od layoutu tabelkowego na rzecz div'ów. Co do sensowności użycia tabelek / div'ów musi sam autor zdecydować.
Jeśli chcesz mieć więcej rzędów danych niż imie / nazwisko, to stawiałbym na tabele, albo fieldset. Jeśli tylko te - można się bawić z div'ami. Weź pod uwagę, że jeśli chcesz np. używać dynamicznych opisów i inputów, to za pomocą div'ów nie uzyskasz możliwości dostosowania się szerokości kolumny, a za pomocą table i fieldset tak.