Anmeldeformular in HTML-HTML-Tutorial-php.cn

HTML-Formulare sind heute ein wesentlicher Bestandteil zahlreicher Websites und dienen verschiedenen Zwecken wie Benutzerauthentifizierung, Registrierungen, Feedback-Sammlung und mehr. Diese Formulare erleichtern die Erfassung wertvoller Daten und Informationen von Besuchern Ihrer Website.

HTML-Formulare werden mithilfe spezieller Elemente erstellt, die als „Steuerelemente“ bekannt sind. Diese Steuerelemente umfassen eine Reihe von Optionen wie Textbereiche, Optionsfelder, Kontrollkästchen und Senden-Schaltflächen, sodass Benutzer ihre Daten effektiv eingeben können. Benutzer können die bereitgestellten Informationen ändern, indem sie Texte eingeben, bestimmte Elemente auswählen und andere relevante Aktionen ausführen, indem sie mit diesen Steuerelementen interagieren. Sobald das Formular ausgefüllt ist, kann es übermittelt werden, was zu unterschiedlichen Ergebnissen führt, wie z. B. dem Hinzufügen von Daten, der Übertragung, der Weiterleitung auf eine andere Seite oder sogar der Speicherung der Details in einer Datenbank.

HTML-Formulare sind ein interaktives und benutzerfreundliches Mittel, um Website-Besucher anzusprechen. Sie erleichtern die nahtlose Kommunikation und den Datenaustausch zwischen Benutzern und Website-Eigentümern und ermöglichen es Unternehmen, wichtige Erkenntnisse zu gewinnen und die Benutzererfahrung zu verbessern.

Wie erstelle ich ein HTML-Formular?

Das Erstellen von HTML-Formularen erfordert die Verwendung des

Element, das als Container für den Formularinhalt dient. Zusammen mit anderen HTML-Elementen wie

, und können Sie ein voll funktionsfähiges Formular entwerfen. Darüber hinaus kann CSS verwendet werden, um das Erscheinungsbild und die Benutzererfahrung zu verbessern.

Hinweis: Wenn Sie neu in der Webentwicklung sind und lernen möchten, wie man einfachen HTML-Code schreibt, haben wir einen Artikel zum Entwerfen einer Webseite in HTML. Es bietet eine Schritt-für-Schritt-Anleitung zum Schreiben von HTML-Code.

Die wichtigsten Punkte, die in diesem Artikel zum Entwerfen einer Webseite in HTML besprochen werden, sind:

Wie richte ich mein Projekt ein?
Wie fange ich mit der HTML-Struktur an?
Wie fügt man dem Text Inhalt hinzu?
Wie strukturieren Sie Ihre Inhalte?
Wie speichere ich meine HTML-Datei?
Wie kann ich Ihre Webseite anzeigen?

Im Folgenden finden Sie eine grundlegende Syntax für ein HTML-Formular.

Syntax:

<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.
</form>

Nach dem Login kopieren

Beispiel für ein Registrierungsformular in HTML

Sehen wir uns einige Beispiele für Registrierungsformulare mit HTML an:

Beispiel 1: Einfaches Registrierungsformular

Hier ist ein Beispiel für die Erstellung eines einfachen HTML-Registrierungsformulars.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
p {
text-align: center;
color: #777;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #ccc;
}
a {
color: #337ab7;
text-decoration: none;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.container.signin {
text-align: center;
color: #777;
}
</style>
</head>
<body>
<form>
<div class="container">
<h1>Register Here</h1>
<p>Please fill in the details to create an account with us.</p>
<hr>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>

Nach dem Login kopieren

Ausgabe:

Anmeldeformular in HTML

Anmeldeformular: Validierungen

Um sicherzustellen, dass Benutzer ihre E-Mail-Adresse eingeben, fügen wir einen Validierungscode ein, der ein Popup auslöst, wenn sie versuchen, das Formular abzusenden, ohne das E-Mail-Feld auszufüllen, unabhängig vom Passwort und der Bestätigungseingabe.

Das Schlüsselwort „erforderlich“ mit einem Element gibt an, dass das Element gefüllt werden muss. Wir fügen dieses Schlüsselwort zu unserem Textfeld „E-Mail“ hinzu und sehen das Ergebnis unten;

<input type="text" placeholder="Enter Email" name="email" required>

Nach dem Login kopieren

Dasselbe gilt für die Felder „Passwort“ und „Passwort bestätigen“.

<input type="password" placeholder="Enter Password" name="pwd" required>
<input type="password" placeholder="Confirm Password" name="confirm" required>

Nach dem Login kopieren

Ausgabe:
Anmeldeformular in HTML

Beispiel 2: Registrierungsformular für eine Stellenbewerbung

Hier ist ein Beispiel für die Erstellung eines Bewerbungsregistrierungsformulars in HTML.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Job Application Registration Form</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #72b7f4;
}
h2 {
color: #232729;
text-align: center; /* Center align the title */
}
form {
background-color: #bfddf7;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #333333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
background-color: #ffffff; /* Set background color to white */
}
select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
input[type="submit"] {
background-color: #1a73e8;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0059b3;
}
</style>
</head>
<body>
<h2>Job Application Registration</h2>
<form action="/apply" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="resume">Resume (PDF or Word):</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
<label for="position">Position Applied:</label>
<select id="position" name="position" required>
<option value="">Select Position</option>
<option value="frontend-developer">Frontend Developer</option>
<option value="backend-developer">Backend Developer</option>
<option value="graphic-designer">Graphic Designer</option>
</select>
<input type="submit" value="Submit Application">
</form>
</body>
</html>

Nach dem Login kopieren

Ausgabe:
Anmeldeformular in HTML

Beispiel 3: Hotelregistrierungsformular

Hier ist ein Beispiel für die Erstellung eines Hotelregistrierungsformulars in HTML.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Hotel Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0bd9d;
padding: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
background: linear-gradient(to bottom right, #fff, #f1f1f1);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
margin-bottom: 5px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to bottom right, #db4340, #ff6f00);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Hotel Image" style="display: block; margin: 0 auto 20px; width: 500px;">
<form>
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="form-row">
<label for="email">Email ID</label>
<input type="email" id="email" name="email">
</div>
<div class="form-row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-row">
<label for="guests">Number of Guests</label>
<input type="number" id="guests" name="guests">
</div>
<div class="form-row">
<label for="check-in">Check-in Date</label>
<input type="date" id="check-in" name="check-in">
</div>
<div class="form-row">
<label for="check-out">Check-out Date</label>
<input type="date" id="check-out" name="check-out">
</div>
<div class="form-row">
<label for="room-type">Room Type</label>
<select id="room-type" name="room-type">
<option value="">Select Room Type</option>
<option value="single">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>

Nach dem Login kopieren

Ausgabe:

Anmeldeformular in HTML

Das obige ist der detaillierte Inhalt vonAnmeldeformular in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!