HTML/CSS :: Aufgabe #2
2 Lösungen
HTML forms mit POST und Fieldset
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
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
Lösungen:
HTML-Code
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML-Forms</title>
<style>
legend {
margin: 20px;
}
fieldset {
margin-bottom: 20px;
}
</style>
</head>
<body>
<form action="home.htm" method="post">
<fieldset>
<legend>
Login
</legend>
<fieldset>
<legend>
Name
</legend>
<label for="name">Name</label>
<input type="text" id="name">
</fieldset>
<fieldset>
<legend>
E-Mail
</legend>
<label for="email">Email</label>
<input type="email" id="email" required>
</fieldset>
<fieldset>
<legend>
Passwort
</legend>
<label for="password">Passwort</label>
<input type="password" id="password" required>
</fieldset>
</fieldset>
<button type="submit">Einloggen</button>
</form>
</body>
</html>
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>