Ich muss ein Formular für die Dateneingabe erstellen, sagen wir FirstName und LastName. Ich weiß, wie man das mit einem Tisch macht. In der ersten <td> würde ich ein Label-Tag und in der zweiten würde ich ein Eingabe-Tag mit einem type="text" Attribut verwenden. Auf diese Weise würden die Beschriftungen und Textfelder in zwei Spalten angeordnet.HTML Formularlayout mit CSS
Gibt es eine Möglichkeit, dies mit CSS zu tun?
CSS wird funktionieren - wenn Sie mit der Eingabe Pixelbreiten für die Dinge in Ordnung sind aber leider nicht, wenn Sie Ihre Strings müssen lokalisieren und entdecken Etiketten passen. Für ein Adresseingabeformular würde ich weiterhin Tabellen verwenden, da sie das richtige Größenänderungs- und Umbruchverhalten durchführen und ohne Probleme in fast jedem Browser arbeiten.
BEARBEITEN: Ich wundere mich irgendwie, wenn einer der Down-Wähler das Layout für diese S.O. überprüft hat. Seiten
Etwas, stimme ich zu. CSS ist in der Theorie nett und wäre großartig, wenn es gut funktioniert, aber jedes Mal, wenn ich es für das Layout verwende, verbringe ich Stunden damit, zu testen und zu debuggen, um das zu erreichen, was ich in ein paar Minuten mit Tabellen hätte machen können. Wenn es dann funktioniert, sieht es in einem anderen Browser nicht richtig aus! – PTBNL
Ich wette, Sie mögen auch auf Lochkarten codieren! –
Vielleicht brauchen Sie nur mehr Übung mit CSS. Darüber hinaus werden Menschen mit Bildschirmlesern und dergleichen Sie definitiv hassen. – patricksweeney
Eine wirklich gute Möglichkeit, dies selbst zu tun ist, Firebug auf Firefox zu installieren und Elemente auf Websites zu überprüfen, die dies wirklich gut implementieren.
Es gibt eine große smashing maagzine on sign up forms. Einige Ansätze in CSS sind zu sehen, mit einigen wirklich großartigen Beispielen.
Sie brauchen keine Tabellen, um großartige HTML-Formulare zu erstellen. Eigentlich willst du sie nicht! Versuchen Sie diesen Code zu Hause und sehen, was Sie denken ..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>
<LINK href="main2.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
fieldset.nested
{
position: relative;
margin-top: 15px;
}
fieldset.nested legend
{
position: absolute; top: -8px; left: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div>
<form>
<fieldset class="main">
<legend>Contact info</legend>
<fieldset class="nested">
<legend>Name</legend>
<ol>
<li>
<label for="textboxName">Name</label>
<input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxName" >Title</label>
<input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCompany">Company</label>
<input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Address</legend>
<ol>
<li>
<label for="textboxAddress1" >Street address</label>
<input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxAddress2" >Street address</label>
<input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCity" >City</label>
<input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxRegion" >City/Region</label>
<input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxPostalCode" >Postal code</label>
<input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCountry" >Country</label>
<input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Phone numbers</legend>
<ol>
<li style="display:none">
<label for="textboxName" >Name</label>
<input id="text1" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li style="display:none">
<label for="textboxAddress1" >Address</label>
<input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
</li>
<li>
<label for="textboxAddress2" >Phone</label>
<input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<div class="buttonsContainer">
<input class="button" type="submit" value="OK" />
<input class="button" type="button" value="Cancel" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
fieldset.main
{
margin: 1.5em 0 0 1.5em;
padding: 1em 0 0 0;
width: 400px;
font-size: .9em;
}
fieldset.main legend
{
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset.main ol
{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset.main li
{
padding-bottom: .5em;
}
fieldset.main ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
fieldset.nested
{
margin: 0 0 1em 1em;
padding: 0;
width: 93%;
font-size: .8em;
border: 1px solid gray;
background: #B0C4DE;
}
fieldset.nested legend
{
margin-left: 1em;
font-weight: normal;
font-size: .9em;
color: black;
background-color: white;
padding: 0 1em 0 1em;
border: 1px solid black;
}
fieldset.nested ol
{
padding: 0 1em 0 1em;
list-style: none;
}
fieldset.nested li
{
/* Control leading between rows. */
padding-bottom: .7em;
}
fieldset.nested ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
input.button
{
/* border-style: none; */
width: 6em;
height: 2.5em;
}
div.buttonsContainer
{
float: right;
margin: 1em 1em 1em 0;
}
+1 - BAM! Genau das, was ich gesucht habe. Könnte jemand die Bedeutung der IE-spezifischen Stile erklären, und warum sind sie IE-spezifisch? –
ACHTUNG - das Tutorial BR-Tags in HTML hat und das ist nicht gut –
@OlegMikheev möglich Setzen Sie jede Zeile des Formulars in '
', um die Verwendung von '' zu vermeiden. –