nette form
ik heb een form gemaakt maar wil dat die invoerboxen allemaal netjes op de zelfde lijn komen zodat het er netjes uit ziet wie kan mij vertellen hoe dat met dit script doe
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
error_reporting(-1);
ini_set('display_errors', 1);
include '/verbinding.php';
include '/logincheck.php';
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
<html>
<form method="post" action="adresversturen.php">
<p>straatnaam: <input type="text" name="straat" /></p>
<p>huisnummer: <input type="text" name="huisnummer" /></p>
<p>postcode: <input type="text" name="postcode" /></p>
<p>plaats: <input type="text" name="plaats" /></p>
<p>land:
<select name="landid">
<?php
$sql = "execute spLandBox";
foreach ($db->query($sql) as $row) {
echo printf('<option value="%d">%s</option>', $row['id'], $row['naam']);
}
?>
</select>
</p>
<p>Contactpersoon voor adres
<select name="opdrachtid">
<?php
$sql = "{CALL spOpdrachtgeverBox (@Opdrachtgeverid=:opdrachtgever)}";
$stmt = $db->prepare($sql);
$opdrachtgeverid = $_SESSION['relatie'];
$stmt->bindParam(':opdrachtgever',$opdrachtgeverid, PDO::PARAM_STR);
$stmt->execute();
foreach ($stmt->fetchall(PDO::FETCH_ASSOC) as $row) {
echo printf('<option value="%d">%s</option>', $row['id'], $row['naam']);
}
?>
</select>
</p>
<p>opmerkingen:</p>
<TEXTAREA Name="opmerking" rows="6" cols="50"></TEXTAREA>
<p><input type="submit" value="verzenden" ></p>
</form>
</html>
error_reporting(-1);
ini_set('display_errors', 1);
include '/verbinding.php';
include '/logincheck.php';
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
<html>
<form method="post" action="adresversturen.php">
<p>straatnaam: <input type="text" name="straat" /></p>
<p>huisnummer: <input type="text" name="huisnummer" /></p>
<p>postcode: <input type="text" name="postcode" /></p>
<p>plaats: <input type="text" name="plaats" /></p>
<p>land:
<select name="landid">
<?php
$sql = "execute spLandBox";
foreach ($db->query($sql) as $row) {
echo printf('<option value="%d">%s</option>', $row['id'], $row['naam']);
}
?>
</select>
</p>
<p>Contactpersoon voor adres
<select name="opdrachtid">
<?php
$sql = "{CALL spOpdrachtgeverBox (@Opdrachtgeverid=:opdrachtgever)}";
$stmt = $db->prepare($sql);
$opdrachtgeverid = $_SESSION['relatie'];
$stmt->bindParam(':opdrachtgever',$opdrachtgeverid, PDO::PARAM_STR);
$stmt->execute();
foreach ($stmt->fetchall(PDO::FETCH_ASSOC) as $row) {
echo printf('<option value="%d">%s</option>', $row['id'], $row['naam']);
}
?>
</select>
</p>
<p>opmerkingen:</p>
<TEXTAREA Name="opmerking" rows="6" cols="50"></TEXTAREA>
<p><input type="submit" value="verzenden" ></p>
</form>
</html>
CSS en gebruik van <label> tags
Inderdaad gebruik maken van <label> tags en die dan float: left; meegeven. Alleen ik raad het niet aan, lees maar eens deze tutorial en dan voornamelijk hoofdstuk 3: Forms.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
error_reporting(-1);
ini_set('display_errors', 1);
include '/verbinding.php';
include '/logincheck.php';
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="adresversturen.php">
<table>
<tr>
<td>straatnaam: </td><td><input type="text" name="straat" /></td><td>land: </td><td><select name="landid"><?php $sql = "execute spLandBox"; foreach ($db->query($sql) as $row) { echo '<option value="%d">%s</option>', $row['id'], $row['naam']; } ?> </select></td>
</tr>
<tr>
<td>huisnummer: </td><td><input type="text" name="huisnummer" /></td><td>Contactpersoon voor adres: </td><td><select name="opdrachtid"><?php $sql = "{CALL spOpdrachtgeverBox (@Opdrachtgeverid=:opdrachtgever)}"; $stmt = $db->prepare($sql); $opdrachtgeverid = $_SESSION['relatie']; $stmt->bindParam(':opdrachtgever',$opdrachtgeverid, PDO::PARAM_STR); $stmt->execute(); foreach ($stmt->fetchall(PDO::FETCH_ASSOC) as $row) { echo '<option value="%d">%s</option>', $row['id'], $row['naam']; } ?></select></td>
</tr>
<tr>
<td>postcode: </td><td><input type="text" name="postcode" /></td><td>opmerkingen: </td><td rowspan="2"><TEXTAREA Name="opmerking" rows="3" cols="20"></TEXTAREA>
</tr>
<tr>
<td>plaats: </td><td><input type="text" name="plaats" /></td>
</tr>
<tr>
<td><input type="submit" value="verzenden" ></td>
</tr>
</table>
</form>
</body>
</html>
error_reporting(-1);
ini_set('display_errors', 1);
include '/verbinding.php';
include '/logincheck.php';
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="adresversturen.php">
<table>
<tr>
<td>straatnaam: </td><td><input type="text" name="straat" /></td><td>land: </td><td><select name="landid"><?php $sql = "execute spLandBox"; foreach ($db->query($sql) as $row) { echo '<option value="%d">%s</option>', $row['id'], $row['naam']; } ?> </select></td>
</tr>
<tr>
<td>huisnummer: </td><td><input type="text" name="huisnummer" /></td><td>Contactpersoon voor adres: </td><td><select name="opdrachtid"><?php $sql = "{CALL spOpdrachtgeverBox (@Opdrachtgeverid=:opdrachtgever)}"; $stmt = $db->prepare($sql); $opdrachtgeverid = $_SESSION['relatie']; $stmt->bindParam(':opdrachtgever',$opdrachtgeverid, PDO::PARAM_STR); $stmt->execute(); foreach ($stmt->fetchall(PDO::FETCH_ASSOC) as $row) { echo '<option value="%d">%s</option>', $row['id'], $row['naam']; } ?></select></td>
</tr>
<tr>
<td>postcode: </td><td><input type="text" name="postcode" /></td><td>opmerkingen: </td><td rowspan="2"><TEXTAREA Name="opmerking" rows="3" cols="20"></TEXTAREA>
</tr>
<tr>
<td>plaats: </td><td><input type="text" name="plaats" /></td>
</tr>
<tr>
<td><input type="submit" value="verzenden" ></td>
</tr>
</table>
</form>
</body>
</html>
met een table zoals de code hierboven.
en je hoeft geen printf achter een echo te zetten.
Gewijzigd op 16/04/2012 20:00:40 door lex van der poel
Ik zou persoonlijk geen <table> gebruiken om een form op te maken.
Eerder deed ik het ook altijd, maar zins het beter leren omgaan met CSS is het beter om dit te doen dus via CSS.
Ik zou een form opmaken met <ul><li> en <label> en dat opmaken met CCS.
Je komt wel eens tegen dat je 2 input velden naast elkaar hebt.
Iets als:
+-------------------+
| Contact Formulier |
+-------------------+
| V naam | A naam |
+---------+---------+
| Straat | Huis nr |
+---------+---------+
Dit zou je dan door middel van een <table> kunnen doen.
Maar het liefst natuurlijk met een <div>.
Eerder deed ik het ook altijd, maar zins het beter leren omgaan met CSS is het beter om dit te doen dus via CSS.
Ik zou een form opmaken met <ul><li> en <label> en dat opmaken met CCS.
Je komt wel eens tegen dat je 2 input velden naast elkaar hebt.
Iets als:
+-------------------+
| Contact Formulier |
+-------------------+
| V naam | A naam |
+---------+---------+
| Straat | Huis nr |
+---------+---------+
Dit zou je dan door middel van een <table> kunnen doen.
Maar het liefst natuurlijk met een <div>.
tabel is voor het weergeven van gegevens, niet voor de opmaak van een site.
Met label/css is het prima op te lossen.
Met label/css is het prima op te lossen.
En als je de tutorial die wouter al gaf doorneemt, weet je dat het vaak beter is om alles onder elkaar te zetten, en kun je de opmaak af met br tags
@Frank, ik zou geen lijst gebruiken. Een formulier is geen opsomming van input velden, het is meer een verzameling van input velden met hun labels.
@Gehard, ik hoop niet dat dit het totale HTML script is? Want:
- mis <!doctype html> op regel 1 van de HTML
- mis verplichte <title> en <meta charset=utf-8> elementen
- mis head + body (al is dit niet verplicht)
- HTML tags met kleine letters
- voor elke input een nieuwe alinea maken lijkt me ook niet heel goed...
Juist andersom, je moet geen echo voor printf zetten.
@Gehard, ik hoop niet dat dit het totale HTML script is? Want:
- mis <!doctype html> op regel 1 van de HTML
- mis verplichte <title> en <meta charset=utf-8> elementen
- mis head + body (al is dit niet verplicht)
- HTML tags met kleine letters
- voor elke input een nieuwe alinea maken lijkt me ook niet heel goed...
lex van der poel:
en je hoeft geen printf achter een echo te zetten.
Juist andersom, je moet geen echo voor printf zetten.
Gewijzigd op 16/04/2012 22:33:56 door Wouter J
ik zet eigenlijk nooit iets tussen doctype html. en head body ook niet zo vaak het werkt ook altijd zonder
Dan kan ik je aanraden om het wel te doen.
Dit zorgt er voor dat je html veel beter klopt.
Dit zorgt er voor dat je html veel beter klopt.
Het doctype is verplicht, anders gaat hij in IE in quircksmode. De rest is inderdaad niet verplicht, maar wel een title + charset element. Die zijn ook verplicht.
Dus om concreet een voorbeeld te geven (zoals ook Wouter aangaf)
En dan idd met display:inline-block of float:left & width aan de slag om de twee naast elkaar te positioneren.
Code (php)
1
2
3
4
2
3
4
<div class="inputWrapper">
<label for="firstname">Firstname</label>
<input name="firstname" value="" id="firstname"/>
</div>
<label for="firstname">Firstname</label>
<input name="firstname" value="" id="firstname"/>
</div>
En dan idd met display:inline-block of float:left & width aan de slag om de twee naast elkaar te positioneren.
Gewijzigd op 17/04/2012 10:47:47 door Maikel Doeze
@Maikel, ik zou niet alles in een aparte div stoppen. Nergens voor nodig: voorbeeld
Overigens is label al display: inline; en input display: inline-block; dus zullen ze altijd naast elkaar komen.
Overigens is label al display: inline; en input display: inline-block; dus zullen ze altijd naast elkaar komen.
Gewijzigd op 17/04/2012 11:01:31 door Wouter J
wouter, je form ziet er een beetje raar uit de email label en input field zijn raar uitgelijnd..
Quote:
Dit scheelt ook een heleboel ellende met voornamelijk td, tr, tables, etc...
Code (php)
1
2
3
4
5
6
2
3
4
5
6
html, body, div, span, a, br, table, form, a, li, textarea, input, tr, td, img, hr
{
margin: 0px;
padding: 0px;
border: 0px;
}
{
margin: 0px;
padding: 0px;
border: 0px;
}
Gewijzigd op 19/04/2012 16:43:04 door raymond van Os




