[html] form positionering lukt maar niet

[Damocles.NL]

Goedenmiddag,

Ik heb onderstaande code voor een contact formuliertje. Er hangt nog wat php code achter, maar dat is niet van belang. Op onderstaande manier wordt het goed weergegeven.

HTML:

<form name="contact" method="POST" action="index.php?page=contact&action">
<table>
<tr><td>Uw Naam</td><td><input type="text" name="naam"></td></tr>
<tr><td>Uw Email adres</td><td><input type="text" name="email"></td></tr>
<tr><td>Uw Bericht</td><td><textarea name="bericht" cols=25 rows=6></textarea></td></tr>
<tr><td align=center colspan=2><input type="submit" value="Verstuur"></td></tr>
</table>
</form>

Maar zodra ik de width nar 480 zet komt er opeens ruimte tussen Naam en het invul vak etc. Hoe krijg ik nou die ruimte weg? Die tabel moet 480 breed zijn overigens omdat wanneer ik een onderdeel weglaat de layout anders niet juist meer is en zo hou ik de layout in bedwang.

HTML:

<form name="contact" method="POST" action="index.php?page=contact&action">
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr><td>Uw Naam</td><td align="left"><input type="text" name="naam"></td></tr>
<tr><td>Uw Email adres</td><td align="left"><input type="text" name="email"></td></tr>
<tr><td>Uw Bericht</td><td align="left"><textarea name="bericht" cols=25 rows=6></textarea></td></tr>
<tr><td align=center colspan=2><input type="submit" value="Verstuur"></td></tr>
</table>

Bedankt alvast! Ik kom er niet uit

[ Voor 30% gewijzigd door André op 28-05-2006 11:34 . Reden: code blok gefixed ]

[Cartman!]

Je kan imo beter gebruik maken van de 'label' tag.

HTML:

<label>Uw Naam</label>
<input type="text" name="naam" />
<br />

met deze css :

Cascading Stylesheet:

label 
{
float:left;
width:480px;
}

input
{
foat:left;
width:200px;
}
br
{
clear:both;
}

Met die basis maak ik forms en dat werkt rete snel, en het is erg overzichtelijk ook.

[Fuzzillogic]

Eent tabel zal zichzelf zo evenwichtig mogelijk proberen te verdelen. Je kunt <colgroup> en <col> gebruiken om de breedte van de kolommen vast te leggen.

Maareh, waarom gebruik je niet gewoon CSS i.p.v. deze ouderwetse table-based oplossing? Bovendien is de code die je hierboven gebruikt zelfs geen geldige HTML 4.

[ Voor 17% gewijzigd door Fuzzillogic op 27-05-2006 12:00 ]

[RAJH]

Geen tables gebruiken om je forms te positioneren en te stylen.

HTML:

        <form name="contact" method="POST" action="index.php?page=contact&action">
        
        <label for="naam">Uw Naam:</label>
        <input id="naam" type="text" name="naam">
        
        <label for="email">Uw Email adres:</label>
        <input id="email" type="text" name="email">
        
        <label for="bericht">Uw Bericht:</label>
        <textarea id="bericht" name="bericht" cols=25 rows=6></textarea>
        
        <input type="submit" value="Verstuur">

Zie ook: http://www.quirksmode.org/css/forms.html

edit:

Zie ook g00fy

[ Voor 28% gewijzigd door RAJH op 27-05-2006 12:03 ]

[Damocles.NL]

zo ziet het er nu uit: klik

En zo was het eerst met de tabellen nog, zo moet het eigenlijk ook weer worden dan.

Hoe los ik nou die positionering op, nbsp spatie code lijkt me niet handig omdat dat natuurlijk alleen maar tijd kost om te lezen.

Dit heb ik in me css staan:

Cascading Stylesheet:

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

label {
    text-align: right;
    width: 480px;
    padding-right: 20px;
}

br {
    clear: left;
}

en dit in me php

HTML:

<div class="contact">
<form name="contact" method="POST" action="index.php?page=contact&action">

        <label for="naam">Uw Naam:</label>
        <input id="naam" type="text" name="naam"> <br/>

        <label for="email">Uw Email adres:</label>
        <input id="email" type="text" name="email">    <br/>

        <label for="bericht">Uw Bericht:</label>
        <textarea id="bericht" name="bericht" cols=25 rows=6></textarea> <br/>

        <input type="submit" value="Verstuur">

[ Voor 98% gewijzigd door André op 28-05-2006 11:34 ]

[RAJH]

Cascading Stylesheet:

div#contact input,textarea {
display: block;
float: left;
margin-bottom: 10px;
}
div#contact label {
display: block;
width: 115px;
float: left;
}
div#contact br {
clear: left;
}

HTML:

<div id="contact">
    <form name="contact" method="POST" action="index.php?page=contact&action">
    
        <label for="naam">Uw Naam:</label>
        <input id="naam" type="text" name="naam"><br/>
        
        <label for="email">Uw Email adres:</label>
        <input id="email" type="text" name="email"><br/>
        
        <label for="bericht">Uw Bericht:</label>
        <textarea id="bericht" name="bericht" cols=25 rows=6></textarea><br/>
        
        <input type="submit" value="Verstuur"><br />
    </form>
</div>

[ Voor 90% gewijzigd door RAJH op 27-05-2006 13:34 ]

[Damocles.NL]

t

[ Voor 255% gewijzigd door Damocles.NL op 14-05-2016 11:18 ]

[Fuzzillogic]

Tabellen zijn bedoelt voor tabulaire gegevens. Een website is dat beslist niet. De laatste jaren gebruiken we CSS voor het layouten van websites. Daarmee kun je de semantiek van de HTML bewaren, hetgeen tot kleinere HTML leidt, die beter indexeerbaar is en ook door mensen zonder visuele browser (denk aan slechtzienden/blinden) nog goed bruikbaar is.

Maar even los van je HTML-problemen: je moet wat meer opletten op de afscherming van je data!

code:

$from                = "From:" . $_POST["email"];

Met deze regel kan een bezoeker een willekeurig aantal headers toevoegen aan jouw e-mailtje!

offtopic:
En het is "Contactformulier" en niet "Contact Formulier"

[Damocles.NL]

t

[ Voor 97% gewijzigd door Damocles.NL op 14-05-2016 11:18 ]

[Fuzzillogic]

Uhm.. Wie? En waarom?

[Damocles.NL]

Jij, aangezien je net een fout er schijnbaar uithaald, misschien wil je wat php doornemen om te kijken of er nog meer fouten inzitten. Maar ja, het is hier geen werving en selectie forum.

Eventueel wil je tegen een vergoeding even snel wat code doorlopen.

[Fuzzillogic]

Sorry, daar heb ik helaas geen tijd voor naast studie en werk, bovendien ben ik geen beveiligingsexpert. Het standaard dogma is echter: "vertrouw nooit de invoer van de gebruiker". Controleer de data die je binnenkrijgt altijd server-side. Verwacht je 1 e-mailadres? Controleer daar dan op met regular expressions. Verwacht je een getal? Controleer dat. Dat kan soms al door de boel naar een integer te casten, of gewoon met intval().

Voor het opbouwen van de DB-connectie gebruik je netjes OO. Maar vervolgens ga je weer lekker ad-hoc met mysql_query() aan de slag. Waarom doe je dat ook niet OO? Er zijn ook genoeg kant-en-klare DB-classes beschikbaar die dat al voor je doen. Kijk eens bij PEAR. Daar zijn vast ook classes te vinden die een form check voor je kunnen doen

Aan je code zie ik dat je geen template engine voor je HTML gebruikt. Doe jezelf een ontzettend grote lol en begin daar meteen mee. Dat kan al met een zeer simpel dingetje als XTemplate. En, zoals gezegd, gebruik CSS. Sowieso gebruik je nu al zaken in je HTML die niet in de HTML-standaard zitten. Controleer je site ook in andere browsers. In Opera staat de hele site iets te ver naar rechts, waarschijnlijk een padding of margin op de body.