HTML/CSS :: Aufgabe #14
1 Lösung
Formular Adressfeld inkl. eMail
Anfänger - HTML/CSS
von Luigi
- 26.11.2020 um 15:13 Uhr
Zu erstellen ist ein Adressfeld mit der Auswahl der Anrede. Eingabe des Vornamens und des Nachnamens erfolgt genau wie die Strasse inkl. Hausnummer, PLZ und Ort in Textfeldern. Unten soll die Eingabe der eMail erfolgen inkl. einer Vorschau wie die Eingabe zu erfolgen hat. Die Felder Nachname, Postleitzahl und eMail sollen Pflichtfelder sein, wobei die Postleitzahl aus 5 Zeichen bestehen muss!
Optional könnt Ihr einen Rahmen um die Felder setzen, der z. B. mit Adressfeld beschrieben ist.
Zur besseren Erklärung ein Bild der möglichen Lösung!
Viel Spass!
Optional könnt Ihr einen Rahmen um die Felder setzen, der z. B. mit Adressfeld beschrieben ist.
Zur besseren Erklärung ein Bild der möglichen Lösung!
Viel Spass!
Lösungen:
HTML-Code
<!DOCTYPE html>
<!--
Beschreibung:
Zu erstellen ist ein Adressfeld mit der Auswahl der Anrede.
Eingabe des Vornamens und des Nachnamens erfolgt genau wie die Strasse inkl. Hausnummer, PLZ und Ort in Textfeldern.
Unten soll die Eingabe der eMail erfolgen inkl. einer Vorschau wie die Eingabe zu erfolgen hat.
Die Felder Nachname, Postleitzahl und eMail sollen Pflichtfelder sein, wobei die Postleitzahl aus 5 Zeichen bestehen muss!
Optional könnt Ihr einen Rahmen um die Felder setzen, der z. B. mit Adressfeld beschrieben ist.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="thet1983">
<title>Train HTML #14</title>
<!-- CSS STYLE START -->
<style>
html,body{
scroll-behavior: smooth;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input[type=text],input[type=email], select{
width: 100%;
padding: 12px;
border: 1px solid rgb(221, 221, 221);
border-radius: 7px;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 15px;
resize: vertical;
}
input[type=submit] {
background-color: #75ace1;
color: white;
padding: 12px 20px;
border: none;
border-radius: 7px;
cursor: pointer;
width: 100%;
transition: all 1s;
}
input[type=submit]:hover {
background-color: #5989b6;
transition: all 1s;
}
.wrapper {
position: relative;
width: 400px;
height: fit-content;
margin: 2% auto;
border-radius: 7px;
background-color: #f2f2f2;
padding: 20px;
}
.wrapper-adress {
padding: 3px 5px;
border: 1px solid rgb(221, 221, 221);
border-radius: 7px;
}
.text-red {
color:rgb(199, 17, 17);
font-weight: bold;
}
.bold {
font-weight: bold;
}
.mt-0 {
margin-top: 0px;
}
</style>
<!-- CSS STYLE END -->
</head>
<body>
<div class="wrapper">
<form action="#" >
<label for="anrede">Anrede</label>
<select name="anrede" id="anrede">
<option selected disabled>Auswahl</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
<option value="nichts dabei">Nichts dabei</option>
</select>
<label for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname" placeholder="Max">
<label for="nachname">Nachname <small class="text-red">Pflichtfeld</small></label>
<input type="text" id="nachname" name="nachname" placeholder="Mustermann" required>
<div class="wrapper-adress"><p class="mt-0 bold">Adressfeld</p>
<label for="strasse">Strasse</label>
<input type="text" id="strasse" name="strasse" placeholder="Musterweg">
<label for="hausnummer">Hausnummer</label>
<input type="text" id="hausnummer" name="hausnummer" placeholder="12 / 1">
<label for="postleitzahl">Postleitzahl <small class="text-red">Pflichtfeld</small></label>
<input type="text" id="postleitzahl" name="postleitzahl" minlength="5" placeholder="12345" required>
<label for="ort">Ort / Stadt</label>
<input type="text" id="ort" name="ort" placeholder="Musterhausen">
</div>
<label for="email">Email <small class="text-red">Pflichtfeld</small></label>
<input type="email" id="email" name="email" placeholder="max.mustermann@mail.com" required>
<input role="button" type="submit" value="Weiter">
</form>
</div>
</body>
</html>