Rätt eller fel?

Jag skulle vilja påstå att inget av <p> eller <br /> är att föredra i ditt fall med formulär.

Jag gillar inte att länka så här, men jag antar att innehållet här hjälper när det kommer till formulär: http://www.dileno.com/default.aspx?CatId=4&ArtId=8

I övrigt så är <p> att föredra när du vill ha nya stycken medan <br /> ju enbart är en radbrytning.

Jag skulle nog snarare använda något i stil med:

<form action="login.php" method="post">
 <p><label>Användarnamn: <input type="text" name="username"></label></p>
 <p><label>Lösenord: <input type="password" name="password"></label></p>
 <p><input type="submit" value="Logga in"></p>
</form>

...eller möjligtvis:

<form action="login.php" method="post">
 <fieldset>
  <legend>Logga in</legend>
  <label>Användarnamn: <input type="text" name="username"></label>
  <label>Lösenord: <input type="password" name="password"></label>
  <input type="submit" value="Logga in">
 </fieldset>
</form>

Man bör inte använda P istället för BR där man vill ha en radbrytning. Man bör använda P för att dela upp sin text (eller formulärfält) i stycken. Om du vill ha en radbrytning här eller där för att det ser bättre ut, utan att det har någon större inverkan på vad som menas, så bör du använda CSS istället.

zcorpan skrev:

Jag skulle nog snarare använda något i stil med:

<form action="login.php" method="post">
 <p><label>Användarnamn: <input type="text" name="username"></label></p>
 <p><label>Lösenord: <input type="password" name="password"></label></p>
 <p><input type="submit" value="Logga in"></p>
</form>

...eller möjligtvis:

<form action="login.php" method="post">
 <fieldset>
  <legend>Logga in</legend>
  <label>Användarnamn: <input type="text" name="username"></label>
  <label>Lösenord: <input type="password" name="password"></label>
  <input type="submit" value="Logga in">
 </fieldset>
</form>

Man bör inte använda P istället för BR där man vill ha en radbrytning. Man bör använda P för att dela upp sin text (eller formulärfält) i stycken. Om du vill ha en radbrytning här eller där för att det ser bättre ut, utan att det har någon större inverkan på vad som menas, så bör du använda CSS istället.

:bire (y)

Okej...tack för era kloka synpunkter :) Tur för mig att det finns så hjälpsamma personer som inte tröttnar på att svara på frågor sådana här frågor!

Så här blev det till slut:

<form action="login.php" method="post">
	<p class="form"><label for="Användarnamn">Användarnamn:</label>
	<br /><input tabindex="1" type="text" name="username" id="Användarnamn" size="25" onfocus="this.style.backgroundColor='#FFFFCC';" onblur="this.style.backgroundColor='#ffffff';" /></p>
					
	<p class="form"><label for="Lösenord">Lösenord:</label>
	<br /><input tabindex="2" type="password" name="password" id="Lösenord" size="25" onfocus="this.style.backgroundColor='#FFFFCC';" onblur="this.style.backgroundColor='#ffffff';" /></p>
	<p class="form"><input type="submit" value="Logga in" /></p>
</form>

Är denna kod vettig som jag nu kör med?! Försöker få lite känsla/skapa mig en uppfattning om när det är okej att använda det ena eller andra elementet...

Det ser bättre ut. :)

Ett par frågor. Varför har du class="form"? Du kan selektera alla stycken inom formulär med följande selektor:

form p

En ID får inte innehålla åäö. Ändra till "Anvandarnamn" eller liknande.

Varför har du size=""? Kan du inte använda CSS istället?

Varför har du tabindex=""? Är inte tabbordningen bra från början?

Varför har du onfocus="" och onblur=""? Går det inte använda :focus med CSS (och ev. javascript för att vara snäll mot IE6)?

Vad har dina BR för syfte?

zcorpan skrev:

Ett par frågor. Varför har du class="form"? Du kan selektera alla stycken inom formulär med följande selektor:

form p

Det beror nog helt och hållet på min utbildningsståndpunkt! Har inte helt och hållet fått in tänket hur de olika selektorerna ärver egenskaper och hur det kan nyttjas fullt ut för att skriva så optimerad kod som möjligt. PHP tycker jag däremot att jag bemästrar hyffsat...det tar nog ett tag innan CSS känns lika hemtamt som det.

zcorpan skrev:

En ID får inte innehålla åäö. Ändra till "Anvandarnamn" eller liknande.

Check!

zcorpan skrev:

Varför har du size=""? Kan du inte använda CSS istället?

I och med att du säger det så kan jag/ska jag nog använda det :) Tanken har inte slagit mig bara. Hela tiden nu när jag får dessa små tips så läggs de till min minnesbak över hur det ska gå till. Koden blir förhoppningsvis mer och mer rätt hela tiden.

zcorpan skrev:

Varför har du tabindex=""? Är inte tabbordningen bra från början?

Jag såg ett exempel där det var med och tänkte för att det ska vara helt korrekt bör dessa kanske finnas med. Men de anger man bara om man vill ha en annan tabordning?

zcorpan skrev:

Varför har du onfocus="" och onblur=""? Går det inte använda :focus med CSS (och ev. javascript för att vara snäll mot IE6)?

zcorpan skrev:

Av samma anledning som tidigare. Har inte tänkt på att jag kunnat göra det med CSS istället för javascript. Hur skriver jag detta med CSS så att onfocus - onblur hamnar i alla inputfält som är omslutna av en <p>-tag?

zcorpan skrev:

Vad har dina BR för syfte?

Mina <br> i formulärkoden ovan syftar väl helt enkelt till att få ner input-fältet till en ny rad så att titeln och rutan inte hamnar på samma rad. Är det fel att använda <br> där?

Tack för den hjälp ni bistår med! Ovärdeligt! :)

lillebror skrev:

Jag såg ett exempel där det var med och tänkte för att det ska vara helt korrekt bör dessa kanske finnas med. Men de anger man bara om man vill ha en annan tabordning?

Ja. Det finns ingenting som säger att tabindex="" måste finnas, men det kan vara användbart om man vill ändra tabbordningen; till exempel kan man göra så att ett sökfält ligger först i tabbordningen genom att ange tabindex="1" på den och låta resten vara. (En annan lösning är att lägga sökfältet först i dokumentet.)

lillebror skrev:

Hur skriver jag detta med CSS så att onfocus - onblur hamnar i alla inputfält som är omslutna av en <p>-tag?

p input:focus { background-color:lime; color:black; }

Det kanske inte spelar så stor roll om de ligger i en P eller inte, så "p" kan plockas bort från selektorn. Däremot kanske du inte vill att stilregeln ska gälla för knappar, så det kan se ut ungefär såhär istället:

input[type=text]:focus,
input[type=password]:focus { /* ... */ }

Detta borde även fungera i IE7 tror jag.

lillebror skrev:

Mina <br> i formulärkoden ovan syftar väl helt enkelt till att få ner input-fältet till en ny rad så att titeln och rutan inte hamnar på samma rad. Är det fel att använda <br> där?

Fel och fel, det beror på hur hård man är på att använda elementtyper för det de är tänkta för. :) Du vill ha en radbrytning, men varför vill du ha en radbrytning? För att det ser bättre ut eller för att formuläret får en annan betydelse utan dem? Om det senare bör du använda <br>, om det tidigare bör du använda CSS:

input { display:block; }