# Textfeld Ausrichten



## cctnt (9. Juni 2007)

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 (9. Juni 2007)

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 (9. Juni 2007)

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 (9. Juni 2007)

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


----------



## cctnt (9. Juni 2007)

Das ist nen Versuch wert.

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

Danke fürs erste


----------



## Gumbo (9. Juni 2007)

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 (9. Juni 2007)

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 (9. Juni 2007)

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



```
<input type="text" />
```


----------



## Maik (9. Juni 2007)

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  :-(


----------

