A formokat általában táblázat segítségével szokták elrendezni. A fejezetben javasoltam ehelyett egy másik megoldás, amikor csak CSS-sel rendezzük el a formot. Ez áttekinthetőbb kódot eredményez.
Azonban ha egy olyan elrendezést kívánunk megvalósítani, amivel sehogyan sem boldogulunk stíluslapokkal, akkor használhatunk táblázatot is ebben az esetben. Ilyenkor a table címkének ne adjuk meg a summary attribútumát, mert nem adattábla, hanem elrendezéshez használt táblázat.
CSS kód:
<form method="post" action="order.php">
<table>
<tr>
<td><label for="lname">Vezetéknév:</label></td>
<td><input type="text" id="lname" name="lastname"></td>
</tr>
<tr>
<td><label for="fname">Keresztnév:</label></td>
<td><input type="text" id="fname" name="firstname"></td>
</tr>
<tr>
<td><label for="mail">E-mail cím:</label></td>
<td><input type="text" id="mail" name="email"></td>
</tr>
<tr>
<td><label for="mailagain">E-mail cím újra:</label></td>
<td><input type="text" id="mailagain" name="emailagain"></td>
</tr>
<tr>
<td><label for="phone">Telefonszám:</label></td>
<td><input type="text" id="phone" name="phone"></td>
</tr>
<tr>
<td><label>Érdeklődési terület:</label></td>
<td><label>
<input type="checkbox" id="option1" name="option1" value="Honlapkészítés">
Honlapkészítés</label>
<br>
<label>
<input type="checkbox" id="option2" name="option2" value="Online marketing">
Online marketing</label>
<br>
<label>
<input type="checkbox" id="option3" name="option3" value="Webdesign">
Webdesign</label>
<br>
<label>
<input type="checkbox" id="option4" name="option4" value="Webhosting">
Webhosting</label></td>
</tr>
<tr>
<td><label for="country">Ország:</label></td>
<td><select id="country" name="country">
<option value="HU">Magyarország</option>
<option value="AT">Ausztria</option>
<option value="BE">Belgium</option>
<option value="BG">Bulgária</option>
<option value="GR">Görögország</option>
<option value="CZ">Csehország</option>
</select></td>
</tr>
<tr>
<td><label for="postal_code">Irányítószám:</label></td>
<td><input type="text" id="postal_code" name="postal_code"></td>
</tr>
<tr>
<td><label for="city">Város:</label></td>
<td><input type="text" id="city" name="city"></td>
</tr>
<tr>
<td><label for="address">Utca, házszám:</label></td>
<td><input type="text" id="address" name="address"></td>
</tr>
<tr>
<td><label>Átvétel módja:</label></td>
<td><label>
<input type="radio" name="delivery" value="Postai utánvéttel" checked="checked">
Postai utánvéttel</label>
<br>
<label>
<input type="radio" name="delivery" value="Elektronikus letöltés">
Elektronikus letöltés</label>
</td>
</tr>
</table>
<p style="text-align:center">
<input type="submit" value="Rendelés">
</p>
</form>
|