Registreringsskjema med css

[Pangaea]

Sliter litt med å få det til skikkelig. Ganske tungvint å måtte tilpasse alt hele tiden, og skrive en haug med klasser. Blir ganske mange skjema etter hvert, så lurer på hva som er den beste måten å gjøre det på. Må innrømme det er fristende å bare bruke table, men forstår det sånn at det er veldig ut nå...

 

Her er litt kode. Kom gjerne med innspill

 

HTML:

<h2>Register:</h2><br/><br/>
* means the field is mandatory.<br/>
<form name="register" method="post" action="validate_user.php">
Username:
<input class="reg_txt" type="text" name="username" maxlength="50"/><span class="reg_star">*</span><br/>
<br/>Password:
<input class="reg_psw" type="text" name="pass" maxlength="50"/><span class="reg_star">*</span><br/>

<br/>Password:
<input class="reg_psw" type="text" name="pass2" maxlength="50"/><span class="reg_star">*</span><br/>

<br/>E-mail:
<input class="reg_txt" type="text" name="email" maxlength="50"/><span class="reg_star">*</span><br/>

<br/>First Name:
<input class="reg_txt" type="text" name="firstname" maxlength="50"/><br/>

<br/>Last Name:
<input class="reg_txt" type="text" name="lastname" maxlength="50"/><br/>

<br/>Location:
<input class="reg_txt" type="text" name="location" maxlength="50"/><br/>

<br/>Homepage:
<input class="reg_txt" type="text" name="url" maxlength="50"/><br/>

<br/>ICQ Number:
<input class="reg_txt" type="text" name="icq" maxlength="50"/><br/>

<br/>MSN:
<input class="reg_txt" type="text" name="msn" maxlength="50"/><br/>

<br/>Notes:
<textarea class="reg_txtarea" name="notes"/></textarea><br/>

<input class="reg_submit" type="submit" name="submit" value="Register"/>
<input class="reg_reset" type="reset" name="reset" value="Reset Form"/>
</form>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Måtte legge inn mange <br/> for at footer'en skulle komme på rett plass.

 

CSS

.reg_txt
{
font-family: Courier;
border: 1px solid #FFF;
background: #999;
color: #FFF;
height: 18px;
position: absolute;
left: 250px;
}

.reg_psw
{
font-family: Courier;
border: 1px solid #FFF;
background: #999;
color: #FFF;
height: 18px;
position: absolute;
left: 250px;
}

.reg_submit
{
position: relative;
left: 95px;
top: 194px;
}

.reg_reset
{
position: relative;
left: 98px;
top: 194px;
}

.reg_txtarea
{
font-family: Courier;
border: 1px solid #FFF;
background: #999;
color: #FFF;
height: 200px;
position: absolute;
left: 250px;
}

.reg_star
{
font-family: Courier;
position: absolute;
left: 420px;
}

 

Jeg har inndelt siden i header, meny, main, footer (med bruk av table og include)

 

Så hva er den beste måten å få til skjema på? Ved bruk av position i css, eller enkelt og greit med table ?

 

Prøvde å bruke relative i steden for absolute, men da kom textfield'ene helt feil i forhold til hverandre.

[cfenzo]

bruk <fieldset> og <label> for å kontrollere utseende..

Og ingen grunn til å bruke position: noe; i det hele tatt etter min mening.. .

 

* slettet *

 

Se linken Satyrium har lagt ut i innlegget under...

(bruker du Opera, og sia ser litt deformert ut, refresh, da ser den normal ut...)

Endret 29. april 2004 av cfenzo

[haugsand]

http://www.themaninblue.com/writing/perspective/2004/03/24/

[Pangaea]

http://www.themaninblue.com/writing/perspective/2004/03/24/

Er sida nede? Funker ikke her vertfall...

[cfenzo]

funker helt fint her...

[pgdx]

http://www.themaninblue.com/writing/perspective/2004/03/24/

Skal siden se slik ut?

[Pangaea]

Merkelig. Spretter opp "Network Problem" i Opera.... funker ikke i IE heller for den saks skyld

[Pangaea]

Siden funker fortsatt ikke, men jeg har lest litt om label og fieldset. Men tror ikke det egentlig løser problemet mitt.

Det jeg lurer på er hvordan man enklest får laget et skjema, der tekst og <input> står i kolonner. Skriver man det rett inn blir tekstfeltene (input) ikke satt i kolonne naturligvis, og det ble de heller ikke når jeg brukte position og relative. Med absolute funket det, men da fikk jeg andre problemer. Det ble etter hvert ganske mye å fore inn i CSS for å få det til. Det ble bra på det ene skjemaet jeg har laget, men jeg kan ikke lage en haug med klasser for hvert eneste skjema, det må da være en enklere måte...?

 

Kan selfølgelig putte det i en tabell som jeg nevnte tidligere, er det det som er det beste, eller er det "ut" nå?

 

Håper jeg forklarte meg litt bedre nå

[haugsand]

label {
width: 700px;
clear: left;
display: block;
margin-bottom: 1em;
}

label span {
float: right;
width: 400px;
}

 

<label for="inputid">
<span><input></span>
Tekst
</label>

 

Denne bruker jeg for øyeblikket. Span kan fjernes, men er likevel nyttig å ha i tilfelle du vil ha mer enn én input-boks i den andre kolonnen. Endre width for å endre bredde på kolonnene.

[Zethyr]

kan noen forklare hva <label>-taggen og for attributten gjør?

[Pangaea]

label {
width: 700px;
clear: left;
display: block;
margin-bottom: 1em;
}

label span {
float: right;
width: 400px;
}

 

<label for="inputid">
<span><input></span>
Tekst
</label>

Takker, den fungerer glimrende

[pgdx]

kan noen forklare hva <label>-taggen og for attributten gjør?

O' store taglist