5 svar · 653 visningar · startad av invecklaren
Hej, jag undrar vad som är bästa sätt att positionera element på t ex en loginsida under följande förutsättningar:
- Ett html-element för anv namn
- Ett html-element för lösenord
- En knapp för att skicka
- Elementen ska vara centrerade på sidan
- Skickaknappen ska vara högerställd och placerad under lösenords-elementet.
Ska man använda tabeller, eller divs eller vad är eg best practise?
Det finns många sätt att lösa det på men jag tycker absolut att du skall använda DIV och CSS. Här är ett sätt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Logga in</title>
<style type="text/css">
* {margin:0;padding:0;}
HTML,BODY {height:100%;height:100%;font-family:"Trebuchet MS", sans-serif;}
P {float:left;margin-bottom:4px;clear:both;font-size:0.8em;}
INPUT {float:right;margin-bottom:4px;clear:both;}
#login {width:260px;margin:100px auto;padding:10px;background:#F9F9F9;border:1px solid #CCC;}
</style>
</head>
<body>
<div id="login">
<p>Namn:</p> <input type="text" style="width:160px;" /><br />
<p>Lösenord:</p> <input type="password" style="width:160px;" /><br />
<input type="submit" value="Logga in" />
</div>
</body>
</html>
jag skulle vilja påpeka några små brister i Tors exempel:
<p> taggarna har inget där att göra
för formulärettiketter använder man <label>
Jag skulle nog gjort nånting i stil med
<style type="text/css">
#login {width:260px;margin:100px auto;padding:10px;background:#F9F9F9;border:1px solid #ccc; text-align:right;}
label {float:left;font-size:0.8em; width:90px; text-align:left;}
input[type=text],input[type=password]{width:160px;margin-bottom:4px;}
</style>
<div id="login">
<form>
<label for="txtUser">Namn:</label><input id="txtUser" type="text" /><br />
<label for="txtPass">Lösenord:</label><input id="txtPass" type="password" /><br />
<input type="submit" value="Logga in" />
</form>
</div>
Ska vi börja leta fel i varandras markup nu? Ok, då föreslår jag att man väljer en modulbaserad approach, t.ex. enligt följande:
<form class="login">
<fieldset>
<legend>Logga in</legend>
<div class="username">
<label for="usernameInput">Användarnamn</label>
<input type="text" name="usernameInput" id="usernameInput"...>
</div>
<div class="password">
<label for="passwordInput">Lösenord</label>
<input type="password" name="passwordInput" id="passwordInput">
</div>
<div class="execution-eller-nåt">
<input type="submit...
</div>
</fieldset>
</form>
</besserwisser> ;) :bire
Som jag skrev så finns det många sätt att lösa det här på och mitt exempel var just det – ett exempel.
Det handlar om hur mycket tid du vill lägga ner. Vilken målgrupp du har och hur intresserad du är av att knacka HTML.
Bara för att jag har tråkigt fyller jag på med min variant:
<form action="#">
<fieldset>
<legend>Logga in</legend>
<label for="usernameInput">Användarnamn
<input type="text" name="usernameInput" id="usernameInput"...></label>
<label for="passwordInput">Lösenord
<input type="password" name="passwordInput" id="passwordInput"></label>
<input type="submit" value="skicka" />
</fieldset>
</form>
</besserwisser> ;) :bire