HTML forms mit POST und Fieldset

2 Lösungen

Anfänger - HTML/CSS von syneex - 26.06.2018 um 10:44 Uhr

Hallo zusammen,

wie man schon im Anhang sehen kann, besteht die Aufgabe darin eine kleine "HTML Form" zu erschaffen. Diese soll GENAU denselben Rahmen haben, wie im beigefügten Bild(nur ein Beispiel zur Vorlage).

Die eigentliche Aufgabe besteht nun darin, eine HTML Form mit Name, Email und Passwort zu erstellen. Hierbei sind nur die Email und das Passwort Pflichtfelder. Das Passwort darf nur im typischen Passwortformat eingegeben werden (schwarze Kreise, statt Buchstaben). Am Schluss des Formulars soll sich ein Submit Button befinden mit der Aufschrift "Einloggen", der von der "index.html" auf die "home.html"(Auf dieser Seite muss sich nichts befinden, es geht lediglich um die Weiterleitung) weiterleitet.

Das Formular an sich soll mit "POST" laufen.

Grüße und viel Spaß,
Sammy

Fragen einsehen (2)

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 Luigi (990 Punkte) - 26.11.2020 um 17:25 Uhr

HTML-Code

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Forms</title>
    <meta charset="utf-8">
  </head>
  <style>
    #container{
      width: 600px;
      height: 400px;
      background-color: lightgrey;
      border: 2px solid black;
    }
    .links{
      position: absolute;
      left: 180px;
    }
    button{
      float: right;
      width: 100px;
      height: 40px;
      border-radius: 5px;
      border: 2px solid black;
      margin: 20px 20px 20px 20px;
    }
  </style>
  <body>
    <div id="container">
      <form action="home.html" method="post">
        <fieldset><legend>Login</legend>
          <fieldset><legend>Name</legend>
            Vor- und Nachname:<input class="links" type="text" name="name">
          </fieldset>
          <fieldset><legend>eMail</legend>
            eMail Adresse:<input class="links" type="text" name="email" required>
          </fieldset>
          <fieldset><legend>Passwort</legend>
            Passwort:<input class="links" type="password" name="password" required>
          </fieldset>
          <button  type="submit">Submit</button>
        </fieldset>
        
      </form>
    </div>
  </body>
</html>