css: label / textinput issue - Softwareontwikkeling

vrijdag 17 oktober 2008 17:40

Acties:

Verwijderd

Topicstarter

Dag mensen,

Het zijn zo van die dagen dat je je rot zoekt naar een oplossing voor iets simpels, maar die oplossing blijkt vooralsnog niet toereikend.

Ik heb een simpele site met een formuliertje erin.
Het formuliertje met een label en input heb ik gestyled met css...
en om een of andere reden wordt het label2 horizontaal uitgelijnd met het einde van label1.
De overige labels worden wel weer netjes horizontaal uitgelijnd met label 1.
Voor de hidden inputs moet ik de border nog op 0 zetten...

Ik snap er niks van.. iemand een hint?

Afbeeldingslocatie: http://www.raketje.com/tweakers/voorbeeld.JPG

Afbeeldingslocatie: http://www.raketje.com/tweakers/voorbeeld.JPG

HTML:

<body>
<div id="wrapper">

    <div id="header">
        header tekst
    </div>

    <div id="content">
    <form >
<label for="label1">label1:</label><input type="text" name="label1" id="label1" size="32" />
<label for="label2">label2:</label><input type="text" name="label2" id="label2" size="32"  />
<label for="label3">label3:</label><input type="text" name="label3" id="label3" size="32" />
<label for="label4">label4:</label><input type="text" name="label4" id="label4" size="32" />
<label for="label5">label5:</label><input type="text" name="label5" id="label5" size="32" />
<input class="hidden" type="hidden" name="hidden1" id="hidden1" size="32" value="hidden1" />
<input class="hidden" type="hidden" name="hidden2" id="hidden2" size="32" value="hidden2" />

<input type="submit" name="submit_login_form" value="login" />

</form> </div>
    <div id="footer">
        footer tekst
    </div>
</div>

</body>

Cascading Stylesheet:

html,body {
    background-color: #EEEEEE;
    color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    margin:0;
    padding:0;
}


#wrapper {
    background-color: #FFFFFF;
    border-bottom:#CCCCCC solid 1px;
    border-left:#CCCCCC solid 0px;
    border-right:#CCCCCC solid 1px;
    border-top:#CCCCCC solid 0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    padding:10px;
    position:relative;
    width:900px;

}

#header {
    border-bottom:#CCCCCC dotted 1px;
    height:60px;
    width:100%;
}

#content {
    clear:both;
    width:100%;
}

#footer {
    border-top:#CCCCCC dotted 1px;
    height:20px;
    width:100%;
}

label {
    float: left;
    font-weight:bold;
    text-align:left;
    background-color:#FFFF00;
}
input {
    border:solid 1px #cccccc;
    display: block;
    margin: 5px 0px 0px 180px;
    font-size:10px;
}

vrijdag 17 oktober 2008 17:42

Acties:

Bosmonster

*zucht*

Je mag geen formelementen direct binnen een formtag gebruiken, daar moet een block-level tag omheen.

Je kunt of DIV's gebruiken, maar beter is bijvoorbeeld een OL/UL. Of in sommige gevallen kan een table semantisch gezien zelfs dienst doen als form-opmaker.

Wat je dus doet is zoiets:

HTML:

<form ... >
<ol>
   <li><label for="mijntekstveld">Naam:</label><input type="text" name="mijntekstveld" id="mijntekstveld"></li>
</ol>
</form>

<style type="text/css">
ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

ol label {
   display: block;
   float: left;
   width: 150px;
}
</style>

Oid.. komt alles netjes naast en onder elkaar.

[ Voor 45% gewijzigd door Bosmonster op 17-10-2008 17:46 ]

vrijdag 17 oktober 2008 17:45

Acties:

CH4OS

It's a kind of magic

Met welke browser heb je getest? Internet Explorer is nou niet echt een browser die geschikt is om te testen.
Ik test altijd eerst met FireFox en daarna pas in Internet Explorer.

Wat je kan proberen is een float: right; op de input velden...

vrijdag 17 oktober 2008 17:51

Acties:

Verwijderd

Topicstarter

Ik test altijd eerst met Firefox..

float:right geeft m.i. niet het juiste resultaat.

Ik wil de labels gewoon netjes tegen de linker zijde van mijn pagina..
met een margin kan ik de inputvelden toch op een gelijke afstanden van mijn labels 'duwen' ?

vrijdag 17 oktober 2008 18:42

Acties:

moozzuzz

wellicht is je label te hoog tov de input. Aangezien je ze float, floaten ze langs alles dat "in de weg zit".

vrijdag 17 oktober 2008 18:52

Acties:

harrald

Bosmonster schreef op vrijdag 17 oktober 2008 @ 17:42:
Je mag geen formelementen direct binnen een formtag gebruiken, daar moet een block-level tag omheen.

Je kunt of DIV's gebruiken, maar beter is bijvoorbeeld een OL/UL. Of in sommige gevallen kan een table semantisch gezien zelfs dienst doen als form-opmaker.

wat misschien ook wel een handig block element is voor een form: fieldset

maandag 20 oktober 2008 13:43

Acties:

Verwijderd

kan dit misschien als hulpmiddel dienen?
http://www.naarvoren.nl/artikel/formulieren/

edit: heb het artikel nog eens doorgelezen en het gaat u niet helpen met uw layoutprobleem...

[ Voor 36% gewijzigd door Verwijderd op 20-10-2008 14:11 ]

maandag 20 oktober 2008 20:07

Acties:

Repsaj_Nav

Hallo, ik ben Jasper

Op een site van me is het zo gedaan:

HTML:

    <form action="/contact.php" method="post">
    <p>
        <label for="naam">Naam:</label>
        <input alt="Je voornaam en eventueel achternaam. Een nickname is ook toegestaan." id="naam" name="naam" value="">
    <br>    
        <label for="email">E-mail:</label>

        <input alt="Je emailadres, dit wordt niet verspreid!" id="email" name="email" value="">
    <br>
        <label for="website">Website:</label>
        <input alt="Als je dit invult kunnen we je website bekijken." id="website" name="website" value="">
    <br>
        <label for="onderwerp">Onderwerp:</label>
        <input alt="Onderwerp" id="onderwerp" name="onderwerp">
    <br>

        <label for="opmerking">Opmerking:</label>
        <textarea id="opmerking" name="opmerking" rows="10" cols="30"></textarea>
    <br>
        <label for="bevestiging">Visuele bevestiging:</label>
        <img id="visual" alt="Visuele bevestiging" src="/bevestiging.php">
        <input name="userdigit" id="bevestiging" maxlength="5">
    <br>

        <input alt="Verzenden" id="verzend" type="submit" value="Verzend!">
    </p>
    </form>

In de CSS stond het zo:

Cascading Stylesheet:

label, input, textarea{width:275px; margin-bottom:5px; display:block; float:left}
input, textarea{padding:3px; border:1px solid}
label           {width:100px; padding:0 2px; text-indent:0}
br              {clear:left}
input.hidden            {display:none!important}

Online voorbeeld staat hier
Hoop dat je er iets aan hebt

woensdag 22 oktober 2008 00:01

Acties:

XWB

Devver

Ik doe het altijd zo:

Cascading Stylesheet:

1
2
3

dl.data { overflow: hidden; }
dl.data dt { float: left; padding: 1px; }
dl.data dd { margin-left: 140px; padding: 1px; }

HTML:

<dl class="data">
    <dt><label for="username">username</label></dt>
    <dd><input type="text" name="username" id="username" size="32" /></dd>
    <dt><label for="password">password</label></dt>
    <dd><input type="text" name="password" id="password" size="32" /></dd>
    <dt><label for="blaat">blaat</label></dt>
    <dd><input type="text" name="blaat" id="blaat" size="32" /></dd>
</dl>

March of the Eagles

woensdag 22 oktober 2008 00:11

Acties:

imp4ct

Mja, 'k weet niet maar <br> is nu niet echt de meest gepaste oplossing voor dit geval vind ik.
'k Heb een tijdje geleden op GoT een topic gevonden om via een goed gebruik van CSS formulieren te maken.
't Heeft me even tijd gekost om alles door te krijgen en de CSS naar mijn eigen had te zetten, maar deze code zou moeten werken in FF, IE 7, IE 6, Opera, Safari.

Artikel : http://www.sitepoint.com/article/fancy-form-design-css/
GoT topic : [CSS] Accessible forms in IE, layout niet goed

PHP: form.php

<div id="frm_m">
  <div class="frm_m_form">
    <form action="doYourAction.php" method="post" name="nameoftheform">
      <h4>Your account</h4>
      <fieldset class="alt">
        <legend>your account</legend>
        <ol>
          <li>
            <label for="email">Email address:</label>
            <input id="email" name="email" type="text" value="" maxlength="50">
          </li>
          <li>
            <label for="username">Username:</label>
            <input id="username" name="username" type="text" value="" maxlength="50">
          </li>
          <li>
            <label for="password">Password:</label>
            <input id="password" name="password" type="password" value="">
          </li>
          <li>
            <label for="passwordconfirm">Confirm password:</label>
            <input id="passwordconfirm" name="passwordconfirm" type="password" value="">
          </li>
        </ol>
      </fieldset>
      <div><input class="submit" type="submit" value="Register"></div>
    </form>
  </div>
</div>

Cascading Stylesheet: main.css

#frm_m{width:580px; margin:10px 0 0 29px; float:left;}
#frm_m h4{color:#000; font-size:0.7em; font-family:Tahoma,Verdana,Arial; margin:13px 0 13px 0; font-weight:bold;}

#frm_m div.frm_m_form{}
#frm_m div.frm_m_form form{}
#frm_m div.frm_m_form form div {width:200px; margin:10px 0 0 0;}
#frm_m div.frm_m_form form div input.submit{width:100px; font-size:0.6em; font-family:Verdana,Arial,Tahoma; vertical-align:top;}
#frm_m div.frm_m_form form fieldset{clear:both; padding:0; border:1px solid #CCC; background-color:#FFF; margin:0px;}
#frm_m div.frm_m_form form fieldset legend{display:none;}
#frm_m div.frm_m_form form fieldset ol{list-style:none; background-color:#FFF; margin:1px 0 0 1px;} 
#frm_m div.frm_m_form form fieldset ol li{float:left; clear:left; width:576px; padding:0px; background-color:#FFF; height:26px;} 
#frm_m div.frm_m_form form fieldset ol li label{position:relative; display:block; float:left; padding-left:5px; font-size:0.7em; font-weight:normal; font-family:Verdana,Arial,Sans-serif; width:200px; background-color:#EEE; line-height:25px; vertical-align:middle;} 
#frm_m div.frm_m_form form fieldset ol li input{vertical-align:middle; width:200px; float:left; margin:3px 0 0 5px; height:15px; padding-top:1px; display:block; font-size:0.7em; font-family:Verdana,Arial,Tahoma; }

Om een kleine bug in IE te fixen dien je wel een aparte CSS file te maken met dit erin.

Cascading Stylesheet: main-ie.css

1	#frm_m div.frm_m_register form fieldset ol{list-style:none; background-color:#FFF; margin:2px 0 0 1px;}

[ Voor 16% gewijzigd door imp4ct op 22-10-2008 00:35 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

woensdag 22 oktober 2008 00:12

Acties:

XWB

Devver

Dat is nogal een smak code, als je weet dat ik met dl hetzelfde bereik (en valideert, dl mag gewoon in je form staan).

March of the Eagles

woensdag 22 oktober 2008 00:25

Acties:

imp4ct

Hacku schreef op woensdag 22 oktober 2008 @ 00:12:
Dat is nogal een smak code, als je weet dat ik met dl hetzelfde bereik (en valideert, dl mag gewoon in je form staan).

True, maar komt er ook weer bij dat jij in xHTML iets typt en ik in HTML en soms maakt dat wel een groot verschil. 'k Heb niet het volledige artikel doorlezen, maar 'k denk dat diegene die deze methode hanteert hier ook wel een goede reden voor zal hebben. Nu 'k ga jou manier ook eens proberen! We leren elke dag bij

[ Voor 14% gewijzigd door imp4ct op 22-10-2008 00:27 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

woensdag 22 oktober 2008 09:39

Acties:

tec

TEC

Waarom kiezen jullie voor een OL? De volgorde waarin de formfields ingevuld moeten worden ligt toch helemaal niet vast. Als je dan een lijst gebruikt zou een UL beter passen.

Overigens vind ik een lijst niet echt toepasbaar op formfields ik kies altijd voor een div (met class formItem) om elke label input constructie, en dan overkoepelend een fieldset met legend.

woensdag 22 oktober 2008 09:48

Acties:

BtM909

Watch out Guys...

tec schreef op woensdag 22 oktober 2008 @ 09:39:
Waarom kiezen jullie voor een OL? De volgorde waarin de formfields ingevuld moeten worden ligt toch helemaal niet vast. Als je dan een lijst gebruikt zou een UL beter passen.

De volgorde van invullen misschien niet, maar in beginsel is een form bedoelt om input te vragen en die (vraag)volgorde ligt in principe wel vast...

Overigens, gebruik ik zelf vaker <dd><dt><dl>'s

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 22 oktober 2008 10:10

Acties:

Bosmonster

*zucht*

tec schreef op woensdag 22 oktober 2008 @ 09:39:
Waarom kiezen jullie voor een OL? De volgorde waarin de formfields ingevuld moeten worden ligt toch helemaal niet vast. Als je dan een lijst gebruikt zou een UL beter passen.

Overigens vind ik een lijst niet echt toepasbaar op formfields ik kies altijd voor een div (met class formItem) om elke label input constructie, en dan overkoepelend een fieldset met legend.

De meeste formulieren, laten we als voorbeeld een contactformulier pakken, hebben wel een logische vaste volgorde. Het is iig nogal onlogisch eerst het adres te vragen, dan de opmerking, dan het tussenvoegsel, e-mailadres, voornaam, etc.

Als je een list gebruikt is een OL dus wel meestal de meest logische keuze. Het formulier is bijna altijd ontworpen met een bepaalde logische volgorde in gedachten.

Overigens vind ik div's gebruiken dan weer niet zo handig. Er zijn zoveel WEL semantisch correcte alternatieven (OL,DL, zelfs TABLE's soms), dat het wat zinloos is semantiek-loze DIV's te gebruiken. (Dat je een list niet toepasbaar vindt snap ik ook niet zo goed. Een formulier is toch per definitie een LIJST van input-velden.)

[ Voor 5% gewijzigd door Bosmonster op 22-10-2008 10:12 ]

woensdag 22 oktober 2008 20:10

Acties:

DiSiLLUSiON

Hmm, even buiten het semantische om: TS, ik ben er niet helemaal met m'n hoofd bij, maar werkt het als je je floats direct cleared? 'clear: left; float: left;' op je labels dus?

woensdag 22 oktober 2008 22:41

Acties:

_Thanatos_

Ja, en kaal

Het acute probleem kun je oplossen door ieder paar van label+input in een div te gooien. Die set divs gooi je dan netjes in een fieldset en die weer in je form.

Een <ol> past niet, omdat als je CSS uitzet, je ziet dat er een echt lijstje staat. Je moet dan de nummers hardop voor de labels lezen (dan weet je van een visueel gehandicapte hoort uit z'n reader). Daarmee "forceer" je dus een volgorde van invoeren.

Een <ul> past niet, omdat ieder form-element semantische gezien een op zichzelf staand geheel wordt, terwijl er ook een mate van nesting kan bestaan. Met divs breng je alleen technisch een structuur aan, maar niet semantisch. Dat doe je weer met fieldsets en combinaties van label+input.

Een <dl> past niet, omdat je daarmee forceert dat de input een "beschrijving" van de label is. Een <dl> is volgens mij bedoeld om informatief te zijn. Daarnaast kom je in de problemen als de label achter de input staat, wat bij checkboxen en radiobuttons het geval is. Ook nesting (bijvoorbeeld een label met daarachter een fieldset met 2 radiobuttons) neemt semantiek weg als je een <dl> gebruikt.

En daar komt nog eens bij dat het gebruik van divs poepsimpel is:

HTML:

<form action="">
  <fieldset>
    <div>
      <label for="input1">Ik ben label 1</label>
      <input type="text" id="input1"/>
    </div>
    <!-- ... -->
  </fieldset>
</form>

Hiermee ga ik er vanuit dat je zelf al zorgt voor een css-reset, zodat je alleen nog maar hoeft te zorgen dat je labels links floaten en een vaste breedte hebben.

日本！🎌

donderdag 23 oktober 2008 09:14

Acties:

Bosmonster

*zucht*

_Thanatos_ schreef op woensdag 22 oktober 2008 @ 22:41:
Een <ol> past niet, omdat als je CSS uitzet, je ziet dat er een echt lijstje staat. Je moet dan de nummers hardop voor de labels lezen (dan weet je van een visueel gehandicapte hoort uit z'n reader). Daarmee "forceer" je dus een volgorde van invoeren.

Dan verschillen we hier van mening, want dit is nu precies wat ik semantisch gezien WEL zou willen.

1. vul dit in
2. vul dit in
3. vul dit in
4. ....