Formular Adressfeld inkl. eMail

1 Lösung

#14

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!

Bitte melden Sie sich an um zur Aufgabenbeschreibung eine Frage zu stellen.

Frage stellen

Bitte melden Sie sich an um eine Lösung einzureichen.

Lösung einreichen

von thet1983 (800 Punkte) - 08.07.2021 um 11:10 Uhr

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>