Textfeld Ausrichten

[cctnt]

Hallo

Ich habe eine Frage: Kann ich ein Textfeld mit HTML alleine ausrichten? Oder brauch ich dazu auch CSS

Bei meiner Page sind mehrere Textfelder und die sind nicht alle in einer reihe untereinander.

Für jede Hilfe dankbar

mfg

 

[Maik]

Hi,

kannst du mal den Quellcode zeigen, damit man nachvollziehen kann, weshalb die Textfelder (input type=text?) nicht in einer Reihe untereinander angeordnet sind?

 

[cctnt]

Hier bitte sehr.

Der code ist nicht der schönste aber er erfüllt im grossen und ganzen seinen Zweck.

<span class="Stil3"><form action="index.php?section=sendwebstart" method="POST" name="form1" id="form1">
  Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="name" type="text" maxlength="160" /><br />
Surname:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="surname" type="text" maxlength="160" /><br> 
Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="email" type="text" maxlength="160" /><br />
Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="address" /><br />
Postcode/Zipcode:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="postcode" /><br />
City:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="city" /><br />
Country:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="country" /><br />
State:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="state" />(US Only)<br />
Subdomain:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="subdomain" />(i.e. test.dev-corner.net)<br /><br />
By Pressing on the Submit Button, you will be registered as Webspace Owner on Dev-Corner.net.<br />
By doing this, you aggree with the rules.<br />    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="Submit" value="Submit" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Reset" type="reset" value="Reset" />
</form>

mfg

 

[Maik]

Und wieso verwendest du an dieser Stelle nicht eine zweispaltige Tabelle, anstelle die erzwungenen Leerzeichen   einzusetzen?

 

[cctnt]

Das ist nen Versuch wert.

Hab jetzt fast ein 3/4 Jahr nichts mit dem Zeugs gemacht.

Danke fürs erste

 

[Gumbo]

Mein Vorschlag:

<form action="index.php?section=sendwebstart" method="post">
  	<div><label for="name">Name:</label> <input name="name" id="name" type="text" maxlength="160" /></div>
	<div><label for="surname">Surname:</label> <input name="surname" id="surname" type="text" maxlength="160" /></div>
	<div><label for="email">Email:</label> <input name="email" id="email" type="text" maxlength="160" /></div>
	<div><label for="address">Address:</label> <input type="text" name="address" id="name" /></div>
	<div><label for="postcode">Postcode/Zipcode:</label> <input type="text" name="postcode" id="postcode" /></div>
	<div><label for="city">City:</label> <input type="text" name="city" id="city" /></div>
	<div><label for="country">Country:</label> <input type="text" name="country" id="country" /></div>
	<div><label for="state">State:</label> <input type="text" name="state" id="state" /> (US Only)</div>
	<div><label for="subdomain">Subdomain:</label> <input type="text" name="subdomain" id="subdomain" /> (i.e. test.dev-corner.net)</div>
	<p>By Pressing on the Submit Button, you will be registered as Webspace Owner on Dev-Corner.net.<br />By doing this, you aggree with the rules.</p>
	<div class="control"><input type="submit" name="Submit" value="Submit" /> <input name="Reset" type="reset" value="Reset" /></div>
</form>

Und dazu das Stylesheet:

form label {
	display: block;
	width: 12em;
	float: left;
}
form div.control {
	text-align: center;
}

Lesestoff: „Prettier Accessible Forms“ von Nick Rigby

 

[Maik]

Anstelle der Tabelle liesse sich das Formular beispielsweise auch mit einer unsortierten Liste und etwas CSS einrichten

<form>
  <ul>
    <li><span>Name:</span><input type="text" /></li>
    <li><span>Surname:</span><input type="text" /></li>
    <li><span>Email:</span><input type="text" /></li>
    <li><span>Address:</span><input type="text" /></li>
    <li><span>Postcode/Zipcode:</span><input type="text" /></li>
    <li><span>City:</span><input type="text" /></li>
    <li><span>Country:</span><input type="text" /></li>
    <li><span>State:</span><input type="text" />(US Only)</li>
    <li><span>Subdomain:</span><input type="text" />(i.e. test.dev-corner.net)</li>
    <li>By Pressing on the Submit Button, you will be registered as Webspace Owner on Dev-Corner.net.<br />By doing this, you aggree with the rules.</li>
    <li><input type="submit" name="Submit" value="Submit" class="button" /><input name="Reset" type="reset" value="Reset" class="button" /></li>
  </ul>
</form>

* {
margin:0;
padding:0;
}

ul {
list-style-type: none;
}

li span {
float: left;
width: 160px;
}

input.button {
margin-left: 70px;
}

 

[Gumbo]

Das input-Element ist allerdings ein leeres Element und muss daher in XHTML wie folgt notiert werden:

<input type="text" />

 

[Maik]

Danke für den Hinweis - hab den "Fehler" meines eingesetzten HTML-Editors im obigen Quellcode ausgemerzt, der bei der Eingabe des input-Tags automatisch das schliessende </input>-Tag gesetzt hat, was an der Option "Automatische Tagvervollständigung aktivieren" liegt :-(