<input required> werkt niet (helemaal goed>
Op mijn site http://www.vanbaasbank.nl zit ik met de volgende uitdaging:
Ik krijg <input required> niet goed werkend.
In Google Chrome werkt alles met onderstaande script goed maar in andere browsers werkt het required niet volledig en/of de melding vanuit de browser dat het veld een verplicht veld is, komt niet.
Wie heeft een suggestie?
De HTML5-code:
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<?php
/**
* @author George van Baasbank
* @package vanbaasbank
* @subpackage reactie
* @copyright Ermelo Software
* @since 16-7-2012
* bestandsnaam reactie.inc
* beschrijving Contactformulier
* aangeroepen door -
* roept aan -
* opmerking Geoptimaliserd voor HTML5 en CSS3
* taalmodule -
* functies functiebieb
* e-mail [email protected]
* project Nieuwe website Van Baasbank
*
*/
session_start();
error_reporting(0);
if(isset($_SERVER['REMOTE_ADDR'])) {
$cIpadres = $_SERVER['REMOTE_ADDR'];
} else {
$cIpadres = "Onbekend";
}
if(isset($_SERVER['HTTP_USER_AGENT'])) {
$cBrowser = $_SERVER['HTTP_USER_AGENT'];
} else {
$cBrowser = "Onbekend";
}
// Declaratie variabelen
$cPaginanaam = "reactie";
$nAantalFouten = 0;
// Laden functiebibliotheek
include "functies/functiebieb.inc";
// Geïndexeerde array met maanden
$aMaanden = array (
1 => 'januari',
'februari',
'maart',
'april',
'mei',
'juni',
'juli',
'augustus',
'september',
'oktober',
'november',
'december'
);
if(isset($_POST['submit'])) {
$cNaam = $_POST['naam'];
$cEmailbezoeker = $_POST['emailadres'];
$cOnderwerp = $_POST['onderwerp'];
$cBericht = $_POST['bericht'];
$cNaam = htmlentities(trim(strip_tags($cNaam)));
$cEmailbezoeker = htmlentities(trim(strip_tags($cEmailbezoeker)));
$cOnderwerp = htmlentities(trim(strip_tags($cOnderwerp)));
$cBericht = htmlentities(trim(strip_tags($cBericht)));
// Converteer emailadres naar ondercast
$cEmailbezoeker = TekstinOndercast($cEmailbezoeker);
if($cOnderwerp != "" AND $cBericht != "" AND $cEmailbezoeker != "" AND $cNaam != "" ) { // Alle velden correct ingevuld
// Constanten voor mysql_connect() insluiten:
require_once('mysql_connect.inc.php');
// Databaseverbinding openen:
$verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error());
// Database selecteren:
mysql_select_db("xxxxxxxxxxxx") or die("Kon de database niet openen: " . mysql_error());
// Query samenstellen
$sql = "INSERT INTO aanvullingen (ipadres, email, naam, bericht, persoon, datum)";
$sql .= "VALUES ('$cIpadres','$cEmailbezoeker','$cNaam','$cBericht','$cOnderwerp',NOW())";
$cResultMail = mysql_query($sql);
// Sluiten database
mysql_close($verbinding);
header("Location: bevestiging.php");
exit();
}
}
// Databases scannen voor opmaak pagina
include "opmaak.inc";
include "jarig.inc";
// Database sluiten
mysql_close($verbinding);
?>
<!doctype html>
<html lang = "nl">
<head>
<!-- Begin metatags en titel -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="3 days" />
<meta name="keywords" content="<?php echo $cMetaKeywords ; ?>" />
<meta name="author" content="<?php echo $cMetaAuteur ; ?>" />
<meta name="web_author" content="<?php echo $cMetaWebAuteur ; ?>" />
<meta name="description" content="<?php echo $cMetaDescription ; ?>" />
<meta name="copyright" content="Ermelo Software 2012" />
<title><?php echo $cMetaTitel ; ?></title>
<!-- Einde metatags en titel -->
<!-- Begin stylesheets en scripts -->
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
<meta charset="utf-8" />
<title>VanBaasbank.nl | Contactformulier</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/formulier.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="js/simpletabs.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
<!-- Einde stylesheets en scripts -->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<header><!-- header -->
<h1><a href="#"><?php echo $cWebsitenaam ; ?></a></h1>
<h2><?php echo $cHeader1 ; ?>'</h2>
<img src="<?php echo $cHeaderafbeelding ; ?>" width="940" height="200" alt="" /><!-- header image -->
</header><!-- end of header -->
<!-- Invoegen hoofdmenu -->
<?php include "menu.inc" ; ?>
<!-- Einde invoegen hoofdmenu -->
<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
<!-- Contactformulier -->
<article class="featured">
<div class="autokader">
<h3>Contactformulier</h3>
<form action="reactie.php" method="POST">
<label for="naam">Uw naam <sup>*</sup></label>
<input name="naam" placeholder="Uw volledige naam" required />
<label for="email">Uw e-mailadres <sup>*</sup></label>
<input type="email" name="emailadres" placeholder="[email protected]" required />
<label for="onderwerp">Onderwerp <sup>*</sup></label>
<input type="text" name="onderwerp" placeholder="Het onderwerp van uw reactie" required />
<label for="bericht">Uw bericht <sup>*</sup></label>
<textarea rows="6" id="bericht" name="bericht" placeholder="Uw bericht" required="required" ></textarea>
<div class="regelhoogte50"></div>
<label for="submit" class="centerit" title="KLik hier om uw bericht te verzenden">
<input type="submit" name="submit" value="Verzenden bericht" /></label>
</form>
</div>
</article>
<!-- Einde contactformulier -->
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<div class="tabwidget">
<ul class="tabs">
<li><a href="#tab1">Nieuws</a></li>
<li><a href="#tab2">Genealogie</a></li>
<li><a href="#tab3">Over mij</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h3>Recente Artikelen</h3>
<ul>
<?php
while($row = mysql_fetch_array($cResultTicker)) {
?>
<li><a href="artikel.php?id=<?php echo $row['id'] ; ?>">* <?php echo $row['kop'] ; ?><br /></a></li>
<?php } ?>
</ul>
</div>
<!-- Invoegen hyperlinken Genealogie -->
<?php include "genealogielinken.inc"; ?>
<!-- Einde invoegen genealogielinken -->
<div id="tab3" class="tab_content">
<h3>Wie ben ik</h3>
<img src="<?php echo $cMijnFoto ; ?>" alt="" /><p><?php echo $cMijnInfo ; ?></p>
</div>
</div>
</div>
<div class="standard">
<!-- De jarige van de dag -->
<?php
$cDag = date('d');
$cMaand = date('n');
?>
<h3>Geboren <?php echo $cDag . " ". $aMaanden[$cMaand] ; ?></h3>
<?php
$cTest = "";
while($row = mysql_fetch_array($cResultJarige)) {
$cX = "(". substr($row['g_sortdatum'],2,4) . ") " . $row['eerste'] ." " . $row['tussenvoeg'] . " " . $row['achternaam'];
$cIdnummer = $row['id'];
$cHyperlink = "kleinekaart.php?id=".$cIdnummer;
if($cIdnummer != $cTest){
$cTest = $cIdnummer;
?>
<p class="kleineletter"><a href="<?php echo $cHyperlink ; ?>"><?php echo $cX ; ?></p></a>
<?php
} }
?>
<!-- Einde jarige van de dag -->
<!-- Advertentie met hyperlink -->
<h3></h3>
<a href="<?php echo $cAdvHyperlink ; ?>" target="_blank"><img src="<?php echo $cSponsor ; ?>" alt="Sponsor" /></a><br /><br />
<!-- Einde advertentie -->
<!-- Sociale media -->
<h3>Connect With Us</h3>
<ul>
<li><a href="http://www.twitter.com/opzondag" target="_blank"><img src="images/twitter-banner.jpg" alt="twitter" /></a></li>
<li><a href="#">Facebook</a></li>
</ul>
<!-- Einde sociale media -->
</div>
</aside><!-- end of sidebar -->
</section><!-- end of #main content and sidebar-->
<!-- Invoegen kruimelpad footer -->
<?php include "footer.inc" ; ?>
<!-- Einde invoegen kruimelpad -->
</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>
/**
* @author George van Baasbank
* @package vanbaasbank
* @subpackage reactie
* @copyright Ermelo Software
* @since 16-7-2012
* bestandsnaam reactie.inc
* beschrijving Contactformulier
* aangeroepen door -
* roept aan -
* opmerking Geoptimaliserd voor HTML5 en CSS3
* taalmodule -
* functies functiebieb
* e-mail [email protected]
* project Nieuwe website Van Baasbank
*
*/
session_start();
error_reporting(0);
if(isset($_SERVER['REMOTE_ADDR'])) {
$cIpadres = $_SERVER['REMOTE_ADDR'];
} else {
$cIpadres = "Onbekend";
}
if(isset($_SERVER['HTTP_USER_AGENT'])) {
$cBrowser = $_SERVER['HTTP_USER_AGENT'];
} else {
$cBrowser = "Onbekend";
}
// Declaratie variabelen
$cPaginanaam = "reactie";
$nAantalFouten = 0;
// Laden functiebibliotheek
include "functies/functiebieb.inc";
// Geïndexeerde array met maanden
$aMaanden = array (
1 => 'januari',
'februari',
'maart',
'april',
'mei',
'juni',
'juli',
'augustus',
'september',
'oktober',
'november',
'december'
);
if(isset($_POST['submit'])) {
$cNaam = $_POST['naam'];
$cEmailbezoeker = $_POST['emailadres'];
$cOnderwerp = $_POST['onderwerp'];
$cBericht = $_POST['bericht'];
$cNaam = htmlentities(trim(strip_tags($cNaam)));
$cEmailbezoeker = htmlentities(trim(strip_tags($cEmailbezoeker)));
$cOnderwerp = htmlentities(trim(strip_tags($cOnderwerp)));
$cBericht = htmlentities(trim(strip_tags($cBericht)));
// Converteer emailadres naar ondercast
$cEmailbezoeker = TekstinOndercast($cEmailbezoeker);
if($cOnderwerp != "" AND $cBericht != "" AND $cEmailbezoeker != "" AND $cNaam != "" ) { // Alle velden correct ingevuld
// Constanten voor mysql_connect() insluiten:
require_once('mysql_connect.inc.php');
// Databaseverbinding openen:
$verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error());
// Database selecteren:
mysql_select_db("xxxxxxxxxxxx") or die("Kon de database niet openen: " . mysql_error());
// Query samenstellen
$sql = "INSERT INTO aanvullingen (ipadres, email, naam, bericht, persoon, datum)";
$sql .= "VALUES ('$cIpadres','$cEmailbezoeker','$cNaam','$cBericht','$cOnderwerp',NOW())";
$cResultMail = mysql_query($sql);
// Sluiten database
mysql_close($verbinding);
header("Location: bevestiging.php");
exit();
}
}
// Databases scannen voor opmaak pagina
include "opmaak.inc";
include "jarig.inc";
// Database sluiten
mysql_close($verbinding);
?>
<!doctype html>
<html lang = "nl">
<head>
<!-- Begin metatags en titel -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="3 days" />
<meta name="keywords" content="<?php echo $cMetaKeywords ; ?>" />
<meta name="author" content="<?php echo $cMetaAuteur ; ?>" />
<meta name="web_author" content="<?php echo $cMetaWebAuteur ; ?>" />
<meta name="description" content="<?php echo $cMetaDescription ; ?>" />
<meta name="copyright" content="Ermelo Software 2012" />
<title><?php echo $cMetaTitel ; ?></title>
<!-- Einde metatags en titel -->
<!-- Begin stylesheets en scripts -->
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
<meta charset="utf-8" />
<title>VanBaasbank.nl | Contactformulier</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/formulier.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="js/simpletabs.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
<!-- Einde stylesheets en scripts -->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<header><!-- header -->
<h1><a href="#"><?php echo $cWebsitenaam ; ?></a></h1>
<h2><?php echo $cHeader1 ; ?>'</h2>
<img src="<?php echo $cHeaderafbeelding ; ?>" width="940" height="200" alt="" /><!-- header image -->
</header><!-- end of header -->
<!-- Invoegen hoofdmenu -->
<?php include "menu.inc" ; ?>
<!-- Einde invoegen hoofdmenu -->
<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
<!-- Contactformulier -->
<article class="featured">
<div class="autokader">
<h3>Contactformulier</h3>
<form action="reactie.php" method="POST">
<label for="naam">Uw naam <sup>*</sup></label>
<input name="naam" placeholder="Uw volledige naam" required />
<label for="email">Uw e-mailadres <sup>*</sup></label>
<input type="email" name="emailadres" placeholder="[email protected]" required />
<label for="onderwerp">Onderwerp <sup>*</sup></label>
<input type="text" name="onderwerp" placeholder="Het onderwerp van uw reactie" required />
<label for="bericht">Uw bericht <sup>*</sup></label>
<textarea rows="6" id="bericht" name="bericht" placeholder="Uw bericht" required="required" ></textarea>
<div class="regelhoogte50"></div>
<label for="submit" class="centerit" title="KLik hier om uw bericht te verzenden">
<input type="submit" name="submit" value="Verzenden bericht" /></label>
</form>
</div>
</article>
<!-- Einde contactformulier -->
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<div class="tabwidget">
<ul class="tabs">
<li><a href="#tab1">Nieuws</a></li>
<li><a href="#tab2">Genealogie</a></li>
<li><a href="#tab3">Over mij</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h3>Recente Artikelen</h3>
<ul>
<?php
while($row = mysql_fetch_array($cResultTicker)) {
?>
<li><a href="artikel.php?id=<?php echo $row['id'] ; ?>">* <?php echo $row['kop'] ; ?><br /></a></li>
<?php } ?>
</ul>
</div>
<!-- Invoegen hyperlinken Genealogie -->
<?php include "genealogielinken.inc"; ?>
<!-- Einde invoegen genealogielinken -->
<div id="tab3" class="tab_content">
<h3>Wie ben ik</h3>
<img src="<?php echo $cMijnFoto ; ?>" alt="" /><p><?php echo $cMijnInfo ; ?></p>
</div>
</div>
</div>
<div class="standard">
<!-- De jarige van de dag -->
<?php
$cDag = date('d');
$cMaand = date('n');
?>
<h3>Geboren <?php echo $cDag . " ". $aMaanden[$cMaand] ; ?></h3>
<?php
$cTest = "";
while($row = mysql_fetch_array($cResultJarige)) {
$cX = "(". substr($row['g_sortdatum'],2,4) . ") " . $row['eerste'] ." " . $row['tussenvoeg'] . " " . $row['achternaam'];
$cIdnummer = $row['id'];
$cHyperlink = "kleinekaart.php?id=".$cIdnummer;
if($cIdnummer != $cTest){
$cTest = $cIdnummer;
?>
<p class="kleineletter"><a href="<?php echo $cHyperlink ; ?>"><?php echo $cX ; ?></p></a>
<?php
} }
?>
<!-- Einde jarige van de dag -->
<!-- Advertentie met hyperlink -->
<h3></h3>
<a href="<?php echo $cAdvHyperlink ; ?>" target="_blank"><img src="<?php echo $cSponsor ; ?>" alt="Sponsor" /></a><br /><br />
<!-- Einde advertentie -->
<!-- Sociale media -->
<h3>Connect With Us</h3>
<ul>
<li><a href="http://www.twitter.com/opzondag" target="_blank"><img src="images/twitter-banner.jpg" alt="twitter" /></a></li>
<li><a href="#">Facebook</a></li>
</ul>
<!-- Einde sociale media -->
</div>
</aside><!-- end of sidebar -->
</section><!-- end of #main content and sidebar-->
<!-- Invoegen kruimelpad footer -->
<?php include "footer.inc" ; ?>
<!-- Einde invoegen kruimelpad -->
</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>
De bijbehorende CSS3-code:
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
Deze css is bestemd voor het valideren van het invuldocument
*/
.clear { clear: both; }
form {
width: 410px;
padding: 20px 30px;
margin: 0 auto;
color: #fff;
overflow: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0px 0px 10px #690011;
-webkit-box-shadow: 0px 0px 10px #690011;
-ms-box-shadow: 0px 0px 10px #690011;
box-shadow: 0px 0px 10px #690011;
}
label {
position: relative;
clear: both;
display: block;
text-shadow: 0px -1px 0px #000;
text-shadow: 0 -1px rgba(0,0,0,0.5);
font-family: Arial,sans-serif;
}
sup { color: red; }
input {
font-size: 14px;
margin-bottom: 25px;
border: 2px solid #690011;
padding: 8px;
background: #fff;
color: #696969;
width: 385px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-ms-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
}
input:focus {
border: 2px solid #33c400;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type=date],
input[type=number],
input[type=submit] {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
width: auto;
}
input[type=checkbox] {
display: inline;
font-size: 14px;
border: none;
width: auto;
padding: 10px;
margin: 0px;
margin-bottom: -7px;
}
textarea {
width: 400px;
height: 150px;
color: #696969;
font-family: Arial;
font-size: 14px;
}
input:invalid { background: #efdee0 url(images/invalid.png) no-repeat center right; }
input:valid { background: #f3f8ed url(images/valid.png) no-repeat center right; }
textarea:invalid { background: #efdee0 url(images/invalid.png) no-repeat top right;}
textarea:valid { background: #f3f8ed url(images/valid.png) no-repeat top right; }
input[type=submit] {
background: #F2D99C;
display: inline-block;
padding: 5px 10px 6px;
color: #690011;
text-decoration: none;
font-weight: bold;
border: none;
position: relative;
cursor: pointer;
font-size: 16px;
margin-top: 30px;
font-family: Helvetica, Arial;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
-ms-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #fff;
-webkit-transition: all 0.2s linear
}
input[type=submit]:hover {
background-color: #E5B96F;
-webkit-transform: scale(1.1);
-moz-box-shadow: 0 1px 6px #000;
-webkit-box-shadow: 0 1px 6px #000;
box-shadow: 0 1px 6px #000;
}
.legal {
clear: both;
font-size: 10px;
margin: 15px 0;
color: #fff;
text-shadow: 0px -1px 0px #000;
text-shadow: 0 -1px rgba(0,0,0,0.5);
}
.centerit {
text-align: center;
}
Deze css is bestemd voor het valideren van het invuldocument
*/
.clear { clear: both; }
form {
width: 410px;
padding: 20px 30px;
margin: 0 auto;
color: #fff;
overflow: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0px 0px 10px #690011;
-webkit-box-shadow: 0px 0px 10px #690011;
-ms-box-shadow: 0px 0px 10px #690011;
box-shadow: 0px 0px 10px #690011;
}
label {
position: relative;
clear: both;
display: block;
text-shadow: 0px -1px 0px #000;
text-shadow: 0 -1px rgba(0,0,0,0.5);
font-family: Arial,sans-serif;
}
sup { color: red; }
input {
font-size: 14px;
margin-bottom: 25px;
border: 2px solid #690011;
padding: 8px;
background: #fff;
color: #696969;
width: 385px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-ms-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
}
input:focus {
border: 2px solid #33c400;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type=date],
input[type=number],
input[type=submit] {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
width: auto;
}
input[type=checkbox] {
display: inline;
font-size: 14px;
border: none;
width: auto;
padding: 10px;
margin: 0px;
margin-bottom: -7px;
}
textarea {
width: 400px;
height: 150px;
color: #696969;
font-family: Arial;
font-size: 14px;
}
input:invalid { background: #efdee0 url(images/invalid.png) no-repeat center right; }
input:valid { background: #f3f8ed url(images/valid.png) no-repeat center right; }
textarea:invalid { background: #efdee0 url(images/invalid.png) no-repeat top right;}
textarea:valid { background: #f3f8ed url(images/valid.png) no-repeat top right; }
input[type=submit] {
background: #F2D99C;
display: inline-block;
padding: 5px 10px 6px;
color: #690011;
text-decoration: none;
font-weight: bold;
border: none;
position: relative;
cursor: pointer;
font-size: 16px;
margin-top: 30px;
font-family: Helvetica, Arial;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
-ms-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #fff;
-webkit-transition: all 0.2s linear
}
input[type=submit]:hover {
background-color: #E5B96F;
-webkit-transform: scale(1.1);
-moz-box-shadow: 0 1px 6px #000;
-webkit-box-shadow: 0 1px 6px #000;
box-shadow: 0 1px 6px #000;
}
.legal {
clear: both;
font-size: 10px;
margin: 15px 0;
color: #fff;
text-shadow: 0px -1px 0px #000;
text-shadow: 0 -1px rgba(0,0,0,0.5);
}
.centerit {
text-align: center;
}
Bezoek de site eens en probeer het contactformulier te verzenden zonder de velden in te vullen.
George van Baasbank
George van Baasbank op 08/08/2012 12:09:48:
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
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
<?php
if(isset($_POST['submit'])) {
$cNaam = $_POST['naam'];
$cEmailbezoeker = $_POST['emailadres'];
$cOnderwerp = $_POST['onderwerp'];
$cBericht = $_POST['bericht'];
$cNaam = htmlentities(trim(strip_tags($cNaam)));
$cEmailbezoeker = htmlentities(trim(strip_tags($cEmailbezoeker)));
$cOnderwerp = htmlentities(trim(strip_tags($cOnderwerp)));
$cBericht = htmlentities(trim(strip_tags($cBericht)));
// Converteer emailadres naar ondercast
$cEmailbezoeker = TekstinOndercast($cEmailbezoeker);
if($cOnderwerp != "" AND $cBericht != "" AND $cEmailbezoeker != "" AND $cNaam != "" ) { // Alle velden correct ingevuld
// Constanten voor mysql_connect() insluiten:
require_once('mysql_connect.inc.php');
// Databaseverbinding openen:
$verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error());
// Database selecteren:
mysql_select_db("xxxxxxxxxxxx") or die("Kon de database niet openen: " . mysql_error());
// Query samenstellen
$sql = "INSERT INTO aanvullingen (ipadres, email, naam, bericht, persoon, datum)";
$sql .= "VALUES ('$cIpadres','$cEmailbezoeker','$cNaam','$cBericht','$cOnderwerp',NOW())";
$cResultMail = mysql_query($sql);
?>
if(isset($_POST['submit'])) {
$cNaam = $_POST['naam'];
$cEmailbezoeker = $_POST['emailadres'];
$cOnderwerp = $_POST['onderwerp'];
$cBericht = $_POST['bericht'];
$cNaam = htmlentities(trim(strip_tags($cNaam)));
$cEmailbezoeker = htmlentities(trim(strip_tags($cEmailbezoeker)));
$cOnderwerp = htmlentities(trim(strip_tags($cOnderwerp)));
$cBericht = htmlentities(trim(strip_tags($cBericht)));
// Converteer emailadres naar ondercast
$cEmailbezoeker = TekstinOndercast($cEmailbezoeker);
if($cOnderwerp != "" AND $cBericht != "" AND $cEmailbezoeker != "" AND $cNaam != "" ) { // Alle velden correct ingevuld
// Constanten voor mysql_connect() insluiten:
require_once('mysql_connect.inc.php');
// Databaseverbinding openen:
$verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error());
// Database selecteren:
mysql_select_db("xxxxxxxxxxxx") or die("Kon de database niet openen: " . mysql_error());
// Query samenstellen
$sql = "INSERT INTO aanvullingen (ipadres, email, naam, bericht, persoon, datum)";
$sql .= "VALUES ('$cIpadres','$cEmailbezoeker','$cNaam','$cBericht','$cOnderwerp',NOW())";
$cResultMail = mysql_query($sql);
?>
Volgens mij is onderstaande al vaker tegen je gezegd, maar kennelijk is alleen belangrijk dat het (ogenschijnlijk) werkt :(
Controle of een formulier is verzonden niet met if(isset($_POST['submit']))
Waarom variabelen (onnodig) kopiëren. Tot 2x toe.
Geen 'or die' in een script, maar nette foutafhandeling (db-verbinding)
Variabelen buiten quotes in je query.
Mis volledige foutafhandeling bij je query.
Maar ach. Het werkt.....
Ten aanzien van je vraag:
Welke browser(versies) heb je het over? HTML5 schijnt nog niet door alle browsers te worden ondersteunt.
Gewijzigd op 08/08/2012 13:02:39 door Obelix Idefix
Leermoment: Iets eenmaal aangeleerd is moeilijk af te leren. Wat is de correcte vervanger voor if(isset($_POST['submit']))???
Wat is de nette foutafhandeling in de db-verbinding? (Vervanger voor "or die"???
Vervang je door
if($_SERVER['REQUEST_METHOD'] === 'POST')
In plaats van te vragen "Heeft iemand op de knop gedrukt", vraag je: "Gaat het hier om een POST, in plaats van een GET request"
Gewijzigd op 08/08/2012 13:19:32 door Kris Peeters
Ik heb e.e.a. aangepast
zie ook
Required
HTML is een taal die geschreven is om om te kunnen gaan met evolutie.
Ofwel begrijpt de browser het, ofwel wordt het genegeerd.
Neem als voorbeeld de <input>. Een input heeft standaard type="text".
Als je dit zou schrijven:
<input type="komkommer"> , wordt dat type genegeerd en wordt het gewoon een type="text".
Dit maakt dat je die types naar harte lust kan uitbreiden.
Nieuwe browsers weten dat <input type="email"> een e-mail moet bevatten. Oudere browsers negeren dit en behandelen het als type="text"
SOWIESO moet je in php alles nog eens dubbel checken.
In php moet je controleren of de de required velden ingevuld zijn, of de e-mailadressen geldig zijn, of numerieke waarden echt numeriek zijn, ... en dit ongeacht of dit al eens gecontroleerd is op client side.
Schrijf dus je code alsof je die required niet ter beschikking hebt, maar dat het een gebruiksvriendelijk extra'tje is voor de mensen met moderne browser.
in jou geval word Required nu nog alleen ondersteund door: Firefox, Chrome en Opera.
En ja sommige mensen zeggen wel dat IE alles al heeft alleen onder een andere benaming
maar ik zie niet in hoe je iets onder een andere benaming kan zetten of hebben als het een vaste Attribuut is... dus ze lopen gewoon achter in deze :P
Maar zoals hierboven ook al gezegd is moet je nu nog (en eigenlijk altijd) alles dubbel (3 dubbel: php, javascript/jquery/mootools/enze, html5) opvangen en controleren in PHP want niet alles en iedereen ondersteund het nog. of hebben een instelling waardoor ze andere dingen niet ondersteunen of accepteren.