[HTML/CSS] Layout invulvakjes - Softwareontwikkeling

dinsdag 9 augustus 2005 11:58

Acties:

Verwijderd

Topicstarter

Hallo,

Ik krijg de layout niet goed van een registratie form.
Het inlog form is mij gelukt met tabellen http://www.lingeriepro.be/login.php?action=login

Kan mij iemand daarmee helpen of een hint geven.

http://www.lingeriepro.be/register.php

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl-BE" xml:lang="nl-BE">
<head>
<title>
LingeriePro.be</title>
<style type="text/css">
<!--
-->
</style>
<link href="/_css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="">
<center><h1 id="logo">LingeriePro</h1></center>
<div id='menu'>
<span id="menutext">
<!-- start menu.php -->
| <a href="/">Home</a> | <a href="/nieuws.php">Nieuws</a> | <a href="/verdelers.php">Verdelers</a> | <a href="/shops.php">Winkels</a> | <a href="/merken.php">Merken</a> | <a href="/register.php">Registreer</a> |&nbsp;
    <a href="/login.php?action=login">Login</a>&nbsp;|
    </span>
<!-- end menu.php -->
</div>
<div id="content">
    
    <div id="main"><div class="block">
        <div class="blockrepeat">
        <div id="register" class="container">   
        <span class="blockrepeattitle"><!--p class="subtitle"-->Registreer (enkel voor professionals)<!--/p--></span>
        <span class="blockrepeatshortdescription">Vul uw gegevens in. Na manuele goedkeuring zal u toegang verkrijgen tot het klant-gedeelte van de website.</span>
        <span class="blockrepeatdetaillink">
        <form name='registerform' method='post' action='?'>
        <div class='registerform'>
                <div id='COMPANY'>
                    <label for='COMPANY'>Bedrijfsnaam: (*)</label><td><input name='COMPANY' type='text' id='COMPANY' value='' size='20'></td>
                </div>
                <div id='LAST_NAME'>
                    <label for='LAST_NAME'>Naam: (*)</label><input name='LAST_NAME' type='text' id='LAST_NAME' value='' size='20'>
                </div>
            <div id='firstname'>
                    <label for='FIRST_NAME'>Voornaam: (*)</label>
            <input name='FIRST_NAME' type='text' id='FIRST_NAME' value='' size='20'>
        </div>
        <div id='street'>
                    <label for='ADDRESS'>Straat: (*)</label>
            <input name='ADDRESS' type='text' id='ADDRESS' value='' size='20'>
        </div>
        <div id='number'>
                    <label for='NUMBER'>Nummer: (*)</label>
            <input name='NUMBER' type='text' id='NUMBER' value='' size='7'>
        </div>
        <div id='box'>
            <label for='BOX'>Bus:</label>
            <input name='BOX' type='text' id='BOX' value='' size='5'>
        </div>
        <div id='zip'>
            <label for='ZIP'>Postcode: (*)</label>
            <input name='ZIP' type='text' id='ZIP' value='' size='10'>
        </div>
        <div id='city'>
            <label for='CITY'>Gemeente: (*)</label>
            <input name='CITY' type='text' id='CITY' value='' size='20'>
        </div>
        <div id='COUNTRY'>
            <label for='COUNTRY'>Land: (*)</label>
            <input name='COUNTRY' type='text' id='COUNTRY' value='' size='20'>
        </div>
        <div id='EMAIL'>
            <label for='EMAIL'>email:</label>
            <input name='EMAIL' type='text' id='EMAIL' value='' size='35'>
        </div>
                <div id='TELEPHONE'>
            <label for='TELEPHONE'>Telefoon:</label>
            <input name='TELEPHONE' type='text' id='TELEPHONE' value='' size='20'>
        </div> 
        <div id='FAX'>
            <label for='FAX'>Fax:</label>
            <input name='FAX' type='text' id='FAX' value='' size='20'>
        </div> 
        <div id='MOBILE'>
            <label for='MOBILE'>GSM:</label>
            <input name='MOBILE' type='text' id='MOBILE' value='' size='20'>
        </div> 
        
        <div id='HOMEPAGE'>
            <label for='HOMEPAGE'>Homepage:</label>
            <input name='HOMEPAGE' type='text' id='HOMEPAGE' value='' size='20'>
        </div> 
        </div> 
                
                
        <div id='submit'>      
                    <input type='submit' name='Submit' value='Verstuur'>
                </div>
                <p>De velden met een (*) zijn verplicht.</p>
        <input type='hidden' name='Contact' value='form1'>
        </form>     </div>
    </div>
</div>
</div>

dinsdag 9 augustus 2005 12:03

Acties:

cemtex

Version 1.1.1

En wat lukt er nu dan niet precies ?

dinsdag 9 augustus 2005 12:05

Acties:

Tys

cemtex schreef op dinsdag 09 augustus 2005 @ 12:03:
En wat lukt er nu dan niet precies ?

Waarschijnlijk bedoelt de Ts dat zijn vakjes direct na de tekst komen.
Althans, dat lijkt teminste redelijk als ik naar zijn pagina en topic titel kijk ...

My flight statistics: (449.638km in 124 flights) Next trips: Estonia, Latvia, Lithuania

dinsdag 9 augustus 2005 12:07

Acties:

cemtex

Version 1.1.1

Thiaz schreef op dinsdag 09 augustus 2005 @ 12:05:
[...]

Waarschijnlijk bedoelt de Ts dat zijn vakjes direct na de tekst komen.
Althans, dat lijkt teminste redelijk als ik naar zijn pagina en topic titel kijk ...

Zie het nu ook, had alleen niet verwacht dat je daarover op got een vraag zou stellen ?!

Tabellen => http://www.htmlcodetutorial.com/tables/

dinsdag 9 augustus 2005 12:09

Acties:

whitehouse

even een gokje :

jij wil:

alle input velden netjes onder elkaar ?
alle input velden een style geven ?

de oplossing:

gebruik in je form een tabel, omschrijving in de linker TD, input veld in de rechter TD
gebruik een stylesheet (CSS) voor de input velden

shoot .. te laat $_/-\o_$

[ Voor 5% gewijzigd door whitehouse op 09-08-2005 12:09 ]

| www.everythingisspiritual.com | www.mosaic.org |

dinsdag 9 augustus 2005 12:09

Acties:

Jerry

Who?

Wat werkte voor mij was dit (dan kan je verder alle div's voor de vakjes weglaten):

Cascading Stylesheet:

label, input
{
    display: inline;
    width: 200px;
    float: left;
    margin-bottom: 10px;
}

label
{
    font-size: .8em;
    text-align: right;
    width: 75px;
}

Link naar de pagina: http://www.quirksmode.org/css/forms.html

[ Voor 9% gewijzigd door Jerry op 09-08-2005 12:10 ]

dinsdag 9 augustus 2005 12:10

Acties:

mor0n

In firefox ziet het er wel oke uit, maar de achtergrond van de tabellen zijn blauw, dus kan er allemaal niks van lezen.

dinsdag 9 augustus 2005 12:14

Acties:

Verwijderd

Topicstarter

probleem is dat ik niet goed weet waar ik de tabellen moet plaatsen
ik probeer het in het eerste deel van de code

bv

code:

1
2
3

<div id='COMPANY'>
                    <label for='COMPANY'>Bedrijfsnaam: (*)</label><td><input name='COMPANY' type='text' id='COMPANY' value='' size='20'></td>
                </div>

Moet ik dit in een tabel plaatsen?
als ik diet doe dan werkt de php niet meer krijg ik errors enzo.

Al vast bedankt voor de reacties

dinsdag 9 augustus 2005 12:56

Acties:

Michali

Hoe kun je nou een php error krijgen als je de HTML aanpast? Je zit toch steeds in HTML modus?

Ik zou gewoon een form maken in de vorm van:

HTML:

<form id="form" method="post" action="pagina.php">
    <table>
        <tr>
            <th><label for="element1">Element 1:</label></th>
            <td><input type="text" id="element1" name="element1"/></td>
        </tr>
        <tr>
            <th><label for="element2">Element 2:</label></th>
            <td><input type="text" id="element2" name="element2"/></td>
        </tr>
        <tr>
            <th><label for="element3">Element 3:</label></th>
            <td><input type="text" id="element3" name="element3"/></td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" id="submit-button" name="submit-button" value="Verzend"/></td>
        </tr>
    </table>
</div>

Beetje css eroverheen en klaar.

[ Voor 33% gewijzigd door Michali op 09-08-2005 12:56 ]

Noushka's Magnificent Dream | Unity

dinsdag 9 augustus 2005 13:08

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

een reden om CSS en HTML gewoon in forum /13 (Webdesign & Graphics te posten)
is dat daar meer mensen zitten die een betere HTML en CSS kennis hebben ...

een tabel gebruiken voor layout en positionering is onwenselijk, dat zorgt voor veel extra en snel onoverzichtelijke code ...
de beste optie zou ik vinden om gewoon de LABEL met CSS te stylen en dan een vaste breedte te geven:

Cascading Stylesheet:

LABEL {
   display: block;
   float: left;
   width: 150px;
}

in plaats van alle elementen in DIV's te plaatsen, zou ik dan ook daarvan een UL (Unordered List) maken:

HTML:

<ul>
   <li> <label for="input">input</label>
          <input type="text" name="input" /> </li>
   <li> <label for="input2">meer input</label>
          <input type="text" name="input2" /> </li>
   <li> <button type="submit">submit</button>
</ul>

[ Voor 29% gewijzigd door RM-rf op 09-08-2005 13:11 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 9 augustus 2005 13:46

Acties:

NMe

Quia Ego Sic Dico.

Dit heeft niks met programmeren an sich te maken, alleen met markup. HTML en CSS hoort in Webdesign & Graphics, zoals je ook in onze lokale FAQ en stickies had kunnen lezen.

PW>>WG

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 10 augustus 2005 03:14

Acties:

DJ Buzzz

Een goed artikel over hoe je netjes semantisch correcte forms maakt die je met css kunt stylen:

http://www.aplus.co.yu/css/styling-form-fields/

zondag 14 augustus 2005 12:20

Acties:

Michali

RM-rf schreef op dinsdag 09 augustus 2005 @ 13:08:
een reden om CSS en HTML gewoon in forum /13 (Webdesign & Graphics te posten)
is dat daar meer mensen zitten die een betere HTML en CSS kennis hebben ...

een tabel gebruiken voor layout en positionering is onwenselijk, dat zorgt voor veel extra en snel onoverzichtelijke code ...
de beste optie zou ik vinden om gewoon de LABEL met CSS te stylen en dan een vaste breedte te geven:

Maar als je met dynamische formulieren te maken hebt (waarvan de breedte van de label dus ook verschillende en groter dan 150 pixels kan zijn), dan is het imo toch beter om een tabelletje te gebruiken. Overigens zie ik dit niet als een echte layout voor een formulier. De label staat in een th element, als header dus, en de input velden staan in td elementen, als (nog in te vullen) data. Persoonlijk vind ik dat geen misbruik maken van een tabel.

Noushka's Magnificent Dream | Unity

zondag 14 augustus 2005 12:28

Acties:

Verwijderd

Toch is een tabel bij formulieren nog wel te verdedigen. Je hebt te maken met kolommen labels en invoervelden, en elke rij bevat er een label en een invoerveld (of meerdere).
Idealer zou zijn een soort propertylist element, maar dat bestaat (nog) niet. Formulieren bestaan dus vaak uit niet-zo-perfecte markup, helaas.

zondag 14 augustus 2005 19:33

Acties:

ZeilDude

RM-rf schreef op dinsdag 09 augustus 2005 @ 13:08:
een reden om CSS en HTML gewoon in forum /13 (Webdesign & Graphics te posten)
is dat daar meer mensen zitten die een betere HTML en CSS kennis hebben ...

een tabel gebruiken voor layout en positionering is onwenselijk, dat zorgt voor veel extra en snel onoverzichtelijke code ...
de beste optie zou ik vinden om gewoon de LABEL met CSS te stylen en dan een vaste breedte te geven:
Cascading Stylesheet:
1
2
3
4
5
LABEL {
   display: block;
   float: left;
   width: 150px;
}
in plaats van alle elementen in DIV's te plaatsen, zou ik dan ook daarvan een UL (Unordered List) maken:
HTML:
1
2
3
4
5
6
7
<ul>
   <li> <label for="input">input</label>
          <input type="text" name="input" /> </li>
   <li> <label for="input2">meer input</label>
          <input type="text" name="input2" /> </li>
   <li> <button type="submit">submit</button>
</ul>

Dat lijkt me niet erg handig, om daar voor lijsten te gebruiken. De pagina ziet er dan in browsers zonder css niet uit. Het is verwarrend als je een bullet hebt met daarachter een keuzevakje. Ok, in CSS-browsers kun je dit wegwerken, maar het is niet zo fraai.
Nodig is het ook niet. Gebruik wat formulieren te bieden hebben: forms, fieldsets, labels enz!
Alleen <legend> is erg lastig te stylen, maar daar kun je <div> voor gebruiken.

Overigens verwijs je met een <label> naar een id van een input, niet naar een name!
Dus niet:

HTML:

1 2	<label for="input">input</label> <input type="text" [b]name[/b]="input" />

maar:

HTML:

1 2	<label for="input">input</label> <input type="text" [b]id[/b]="input" />