html Dateien
Eine Html 5 Seite
Beginn einer Html 5 Seite
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Titel hierhin</title>
<meta name="dcterms.rights" content="locomputing">
<meta name="description" content="Beschreibung der Webseite">
<meta name="keywords" content="Schlüsselwörter">
<link rel="stylesheet" href="formular_style.css">
</head>
<body>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Titel hierhin</title>
<meta name="dcterms.rights" content="locomputing">
<meta name="description" content="Beschreibung der Webseite">
<meta name="keywords" content="Schlüsselwörter">
<link rel="stylesheet" href="formular_style.css">
</head>
<body>
Der Kopfbereich
<header> </header>
Der Navigationsbereich
<nav> </nav>
Der Inhaltsbereich
<main> </main>
Der Fußbereich
<footer> </footer>
Html Seite beenden
</body>
</html>
</html>
Ein Formular gehört in den Inhaltsbereich
Beginn eines Formulares
Wie soll das Formular wo hin
<form method="post" action="name der ziel.php">
Felder eines Formulares
Feld für Name (Formular)
<div class="form-face">
<label>Name:<span>*</span></label>
<span class="fehler"><?php echo $name_err;?></span>
<input pattern=".{5,40}" required="required" placeholder="Name 5 - 40 Zeichen" type="text" id="name" name="name" class="form-control">
</div>
<label>Name:<span>*</span></label>
<span class="fehler"><?php echo $name_err;?></span>
<input pattern=".{5,40}" required="required" placeholder="Name 5 - 40 Zeichen" type="text" id="name" name="name" class="form-control">
</div>
Feld für Username
<div class="form-face">
<label>Username:<span>*</span></label>
<span class="fehler"><?php echo $username_err;?></span>
<input pattern=".{5,40}" required="required" placeholder="5-40 Zeichen" type="text" id="username" name="username" maxlength="42" class="form-control">
</div>
<label>Username:<span>*</span></label>
<span class="fehler"><?php echo $username_err;?></span>
<input pattern=".{5,40}" required="required" placeholder="5-40 Zeichen" type="text" id="username" name="username" maxlength="42" class="form-control">
</div>
Feld für Username variante 2
<div class="form-face">
<label>Username:<span>*</span></label>
<span class="fehler"><?php echo $username_err;?></span>
<input required="required" placeholder="Username" type="text" id="username" name="username" maxlength="42" class="form-control">
</div>
<label>Username:<span>*</span></label>
<span class="fehler"><?php echo $username_err;?></span>
<input required="required" placeholder="Username" type="text" id="username" name="username" maxlength="42" class="form-control">
</div>
Feld für eMail
<input type="email"... prüft auf @ sowie . und filtert nicht erlaubte Zeichen raus,bei einer Bildschirm-Tastatur wird damit auch das @-Zeichen eingeblendet.
<div class="form-face">
<label>eMail:<span>*</span></label>
<span class="fehler"><?php echo $mail_err;?></span>
<input pattern=".{8,75}" required="required" placeholder="8-75 Zeichen" type="email" id="email" name="email" maxlength="77" class="form-control">
</div>
<label>eMail:<span>*</span></label>
<span class="fehler"><?php echo $mail_err;?></span>
<input pattern=".{8,75}" required="required" placeholder="8-75 Zeichen" type="email" id="email" name="email" maxlength="77" class="form-control">
</div>
Feld für eMail variante 2
<div class="form-face">
<label>eMail:<span>*</span></label>
<span class="fehler"><?php echo $mail_err;?></span>
<input pattern="^([a-z0-9._%+\-]{3,})+@([a-z0-9.\-]{2,})+\.[a-z]{2,3}$" required="required" placeholder="8-75 Zeichen" type="email" id="email" name="email" maxlength="77" class="form-control">
</div>
<label>eMail:<span>*</span></label>
<span class="fehler"><?php echo $mail_err;?></span>
<input pattern="^([a-z0-9._%+\-]{3,})+@([a-z0-9.\-]{2,})+\.[a-z]{2,3}$" required="required" placeholder="8-75 Zeichen" type="email" id="email" name="email" maxlength="77" class="form-control">
</div>
Feld für Betreff (Formular)
<div class="form-face">
<label>Betreff:<span>*</span></label>
<span class="fehler"><?php echo $betreff_err;?></span>
<input pattern=".{3,40}" required="required" placeholder="Betreff 3 - 40 Zeichen" type="text" id="betreff" name="betreff" class="form-control">
</div>
<label>Betreff:<span>*</span></label>
<span class="fehler"><?php echo $betreff_err;?></span>
<input pattern=".{3,40}" required="required" placeholder="Betreff 3 - 40 Zeichen" type="text" id="betreff" name="betreff" class="form-control">
</div>
Feld für Passwort variante 2
<div class="form-face">
<label>Passwort:<span>*</span></label>
<span class="fehler"><?php echo $password_err;?></span>
<input required="required" placeholder="Passwort" type="password" id="passwort" name="passwort" maxlength="62" class="form-control">
</div>
<label>Passwort:<span>*</span></label>
<span class="fehler"><?php echo $password_err;?></span>
<input required="required" placeholder="Passwort" type="password" id="passwort" name="passwort" maxlength="62" class="form-control">
</div>
Feld für Passwort
<div class="form-face">
<label>Passwort:<span>*</span></label>
<span class="fehler"><?php echo $password_err;?></span>
<input pattern=".{16,60}" required="required" placeholder="16-60 Zeichen" type="password" id="passwort" name="passwort" maxlength="62" class="form-control">
</div>
<label>Passwort:<span>*</span></label>
<span class="fehler"><?php echo $password_err;?></span>
<input pattern=".{16,60}" required="required" placeholder="16-60 Zeichen" type="password" id="passwort" name="passwort" maxlength="62" class="form-control">
</div>
Feld für Passwort wiederholen
<div class="form-face">
<label>Passwort wiederholen:<span>*</span></label>
<span class="fehler"><?php echo $confirm_password_err;?></span>
<input required="required" type="password" id="passwort2" name="passwort2" maxlength="62" class="form-control">
</div>
<label>Passwort wiederholen:<span>*</span></label>
<span class="fehler"><?php echo $confirm_password_err;?></span>
<input required="required" type="password" id="passwort2" name="passwort2" maxlength="62" class="form-control">
</div>
Feld für Benutzer-Passwort
<div class="form-face">
<label>Benutzer-Passwort:<span>*</span></label>
<span class="fehler"><?php echo $pass_err; ?></span>
<input required="required" placeholder="Benutzer-Passwort" type="password" id="passwort" name="pass" maxlength="62" class="form-control">
</div>
<label>Benutzer-Passwort:<span>*</span></label>
<span class="fehler"><?php echo $pass_err; ?></span>
<input required="required" placeholder="Benutzer-Passwort" type="password" id="passwort" name="pass" maxlength="62" class="form-control">
</div>
Feld für Neues-Passwort
<div class="form-face">
<label>Neues Passwort:</label>
<span class="fehler"> <?php echo $new_password_err;?></span>
<input pattern=".{16,60}" placeholder="Neues Passwort (16 - 60 Zeichen)" type="password" id="passwort" name="new_password" maxlength="62" class="form-control">
</div>
<label>Neues Passwort:</label>
<span class="fehler"> <?php echo $new_password_err;?></span>
<input pattern=".{16,60}" placeholder="Neues Passwort (16 - 60 Zeichen)" type="password" id="passwort" name="new_password" maxlength="62" class="form-control">
</div>
Feld für Neues-Passwort bestätigen
<div class="form-face">
<label>Neues Passwort bestätigen:</label>
<span class="fehler"> <?php echo $confirm_password_err;?></span>
<input placeholder="Neues Passwort Bestätigen" type="password" id="passwort" name="confirm_password" class="form-control">
</div>
<label>Neues Passwort bestätigen:</label>
<span class="fehler"> <?php echo $confirm_password_err;?></span>
<input placeholder="Neues Passwort Bestätigen" type="password" id="passwort" name="confirm_password" class="form-control">
</div>
Feld für Code
<div class="form-face">
<label>Code:<span>*</span></label>
<span class="fehler"><?php echo $code_err; ?></span>
<input pattern="[0-9]{11,13}" required="required" placeholder="Code aus eMail" type="text" id="code" name="code" maxlength="14" class="form-control">
</div>
<label>Code:<span>*</span></label>
<span class="fehler"><?php echo $code_err; ?></span>
<input pattern="[0-9]{11,13}" required="required" placeholder="Code aus eMail" type="text" id="code" name="code" maxlength="14" class="form-control">
</div>
Feld für Nachricht (Formular)
<div class="form-face">
<label>Nachricht:<span>*</span></label>
<span class="fehler"><?php echo $inhalt_err;?></span>
<textarea required="required" placeholder="Nachricht 5 - 350 Zeichen" id="inhalt" name="inhalt" class="form-control" minlength="5" maxlength="350"></textarea>
</div>
<label>Nachricht:<span>*</span></label>
<span class="fehler"><?php echo $inhalt_err;?></span>
<textarea required="required" placeholder="Nachricht 5 - 350 Zeichen" id="inhalt" name="inhalt" class="form-control" minlength="5" maxlength="350"></textarea>
</div>
Feld für Formular senden
<div class="form-face">
<label><span>*</span>Felder sind Pflicht!</label>
<input type="submit" class="butt button-blue" name="save" value="Senden">
<input class="butt button-red" type="reset" value="Reset">
</div>
<label><span>*</span>Felder sind Pflicht!</label>
<input type="submit" class="butt button-blue" name="save" value="Senden">
<input class="butt button-red" type="reset" value="Reset">
</div>
Ende eines Formulares
</form>
