HTML-Formulare Übungen
HTML und CSS überprüfen mit: [HTML: https://validator.w3.org] [CSS: https://jigsaw.w3.org/css-validator/]
Ein PHP-Script, dass die Eingaben anzeigt, einfach in form action=“https://mezdata.de/webpublish/070_formulare/antwort.php“ eintragen.
HTML-Prüfungsaufgaben [../fi-pruefungen/fi-24so-fia-1p-a3/] [../fi-pruefungen/fi-24wi-fia-2e/].
Klassenarbeitsinfo
In der ersten schriftlichen Klassenarbeit wird im ersten Teil HTML- und CSS-Code vorgegeben, der erklärt und ggfs. ergänzt, modifiziert werden soll. Ein grundlegendes Verständnis vom Aufbau einer HTML-Seite, dem Einbinden von CSS und der Funktion von CSS-Selektoren [https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren] sollten vorhanden sein.
Im zweiten Teil soll HTML-Code nach Bildvorgabe erstellt werden [https://mezdata.de/webpublish/]. PHP-Auswertungen von Formulardaten ist noch nicht gefordert.
Kleine Tag-Auflistung (kein Anspruch auf Vollständigkeit)
HTML-Tags: html, head, meta, title, body, h1..h6, p, b,i,u, strong, em, hr, br, img, ul,ol,li, table, th, td, a, div, header, nav, main, footer
Form-Tags: form, input (type= checkbox, file, hidden, password, radio, reset, submit, text, date, email), select, button, label, fieldset, textarea
CSS: style, Selektoren: tag, #name, .name
Passwortabfrage
Ein Formular zum Anmelden soll erstellt werden.
- Zur Formatierung wird eine Tabelle verwendet
- Die Eingaben user und passwort des Formulars werden an anmelden.php mit POST geschickt
- Vorgabe mit CSS erklären.
- HTML-Code für Formular erstellen.
Vorgabe mit CSS:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Passwortabfrage</title>
<style media="screen">
body {
font-family: Helvetica, Geneva, Arial, sans-serif;
background-color: #ff9;
}
table,
th,
td {
border: thin solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>Lösung CSS
| Code | Erklärung |
|---|---|
| <!DOCTYPE html> | HTML5 Code |
| <html lang=“de“> | Die Sprache im Dokument ist Deutsch, wichtig für SceenReader |
| <head> | Nicht sichtbare Meta-Information beginnt |
| <meta charset=“utf-8″> | Der Zeichensatz ist utf-8 |
| <meta name=“viewport“ content=“width=device-width, initial-scale=1″> | Einstellung für Responsive Design |
| <title>Passwortabfrage</title> | Titel der Webseite, wird im Tab und in Bookmark verwendet, Pflichtangabe! |
| <style media=“screen“> | CSS Angaben gelten für Anzeige auf Bildschirm (nicht für Ausdrucken) |
| body { | CSS Einstellungen für den Body-Tag, also den sichtbaren Bereich |
| font-family: Helvetica, Geneva, Arial, sans-serif; | Versuche eine passende Schrift in der Reihenfolge zu finden |
| background-color: #ff9; | Hintergrundfarbe RGB 0xFF Rot, 0xFF Grün, 0x99 Blau |
| table, th, td { | CSS Angaben für table oder th oder td |
| border: thin solid black; | Rand ist dünne durchgezogene schwarze Linie |
| border-collapse: collapse; | Nur eine Linie zwischen den Zellen |
| padding: 6px; | Innenabstand (in den Tabellenzellen) sind 6 Pixel |
Lösung HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Passwortabfrage</title>
<style media="screen">
body {
font-family: Helvetica, Geneva, Arial, sans-serif;
background-color: #ff9;
}
table,
th,
td {
border: thin solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<h2>Passwortabfrage</h2>
<form action="anmelden.php" method="post">
<table>
<tr>
<th><label for="name">Name</label></th>
<td><input type="text" name="user" id="name" size="24" required></td>
<td rowspan="2"><input type="submit" value="Anmelden"></td>
</tr>
<tr>
<th><label for="password">Passwort</label></th>
<td><input type="password" id="password" name="passwort" size="24" required></td>
</tr>
</table>
</form>
</body>
</html>Turnschuh Bestellseite
Ein Bestellformular für einen Turnschuhhändler soll erstellt werden.
- Für das Layout wird eine Tabelle verwendet
- Das Formular wird mit Get an bestellung.php gesendet
- Diese Schuhgrößen stehen zur Auswahl: 38,39,40,41,42,43
- Die AGB-Checkbox muss geklickt sein
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style media="screen">
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #ffef44;
}
table,
th,
td {
border: thin solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>Zwei Zeilen fehlen in der Vorgabe, bitte ergänzen!
Lösung
<html lang="de">
<title>Turnschuhhändler</title>Lösung HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Turnschuhhändler</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #ffef44;
}
table,
th,
td {
border: thin solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<h2>Turnschuhhandlung</h2>
<form action="bestellung.php" method="get">
<table>
<tr>
<th>Anzahl</th>
<th>Artikel</th>
<th>Preis</th>
<th>Grösse</th>
</tr>
<tr>
<td><input type="text" id="windhund" name="windhund" value="0" size="4"></td>
<td><label for="windhund">Windhund</label></td>
<td>150€</td>
<td><select name="wgroesse" size="1">
<option selected="selected" value="0">auswählen</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
</select></td>
</tr>
<tr>
<td><input type="text" id="schleichkatze" name="schleichkatze" value="0" size="4"></td>
<td><label for="schleichkatze">Schleichkatze</label></td>
<td>200€</td>
<td><select name="sgroesse" size="1">
<option selected="selected" value="0">auswählen</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
</select></td>
</tr>
<tr>
<td colspan="3"><input type="checkbox" id="agb" name="agb" value="true" required><label for="agb"> Ich bin mit der AGB
einverstanden.</label></td>
<td><input type="submit" value="Bestellen"></td>
</tr>
</table>
</form>
</body>
</html>Formular für Noteneingabe erstellen
Ein Formular zum Eingeben von Noten soll erstellt werden.
- Zur tabellenartigen Formatierung von den Eingaben ohne Tabelle werden die Eingabe-Felder Fach..Note mit einem <div class=“tabelle“> umschlossen und mit CSS formatiert.
- Formular wird mit Get an noteneingabe.php gesendet
- Auswahlliste der Fächer ist SAE,ITS,BWL und Deutsch
- Datum und Note sind notwendige Eingaben
- Die Notenart Schriftlich ist vor ausgewählt
CSS-Fragen
Erklären Sie die einzelnen CSS-Einstellungen.
Codevorgabe noteneingabe.css [Validieren mit https://jigsaw.w3.org/css-validator/]
body {
font-family: Arial, Helvetica, sans-serif;
}
.tabelle {
display: grid;
grid-template-columns: 6em 10em;
padding: 1em;
}
.tabelle label {
grid-column: 1/2;
text-align: right;
line-height: 1.5;
}
.tabelle label::after {
content: ": ";
}
.tabelle input, .tabelle select {
margin: 0 0 1em .5em;
padding: .2em .5em;
background-color: #fffbf0;
border: thin solid #e7c157;
}
fieldset {
margin-left: 4em;
width: fit-content;
}
button {
margin-top: 1.5em;
margin-left: 7em;
width: fit-content;
}Lösung CSS
| Code | Erklärung |
|---|---|
body {font-family: Arial, Helvetica, sans-serif;} | Für den Body-Bereich wird eine Schriftart vorgegeben, falls weder Arial noch Helvetica im Zielsystem vorhanden sind wird eine Serifenlose Schrift verwendet |
.tabelle { display: grid; grid-template-columns: 6em 10em; padding: 1em; } | ID-Selektor tabelle: Der damit ausgezeichnete Bereich soll mit Grid-Layout formatiert werden (noch nicht behandelt) |
.tabelle label { grid-column: 1/2; text-align: right; line-height: 1.5; } | Für Label-Tags im ID-Bereich tabelle gilt: Labels belegen die erste Spalte, sind rechtsbündig und haben 150% der Grundschrifthöhe |
.tabelle label::after { content: ": "; } | Für Label-Tags im ID-Bereich tabelle gilt: Nach ihrem Inhalt wird noch ein „: “ ausgegeben. |
.tabelle input, .tabelle select { margin: 0 0 1em .5em; padding: .2em .5em; background-color: #fffbf0; border: thin solid #e7c157; } | Für Input- oder Select-Tags im ID-Bereich tabelle gilt: Aussenabstände oben 0, rechts 0, unten 1em, links 0.5em. Innenabstände oben und unten 0.2em rechts und links 0.5em. Hintergrundfarbe #fffbf0. Rand: Dünne durchgezogene Linie mit Farbe #e7c157 |
fieldset { margin-left: 4em; width: fit-content; } | Für Fieldset-Tags gilt: Linker Aussenabstand 4em. Breite passend zum Inhalt |
button { margin-top: 1.5em; margin-left: 7em; width: fit-content; } | Für Button-Tags gilt: Aussenabstand oben 1.5em links 7em. Breite passend zum Inhalt |
Lösung HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Noteneingabe</title>
<link rel="stylesheet" href="noteneingabe.css">
</head>
<body>
<h2>Note eingeben </h2>
<form method="get" action="noteneingabe.php">
<div class="tabelle">
<label for="fach">Fach</label>
<select id="fach" name="fach">
<option>SAE</option>
<option>ITS</option>
<option>BWL</option>
<option>Deutsch</option>
</select>
<label for="datum">Datum</label>
<input id="datum" name="datum" type="date" required>
<label for="note">Note</label>
<input id="note" name="note" type="text" size="3" maxlength="3" required>
</div>
<fieldset>
<legend>Notenart</legend>
<input type="radio" id="schriftlich" name="art" value="k" checked>
<label for="schriftlich">Schriftlich</label>
<input type="radio" id="muendl" name="art" value="m">
<label for="muendl">Mündlich</label>
</fieldset>
<button type="submit">Absenden</button>
</form>
</body>
</html>