Anmeldeformular in HTML

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:

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

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

Syntax:

form elements like submit or reset buttons, input, text area etc.

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:

<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>

Register Here

Please fill in the details to create an account with us.

---

Enter Email Password Confirm Password

---

By creating an account you agree to our Terms & Privacy.

Register

Already have an account? Sign in.

Ausgabe:

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>

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>

Ausgabe:

Beispiel 2: Registrierungsformular für eine Stellenbewerbung

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

Code:

<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>


<h2 id="Job-Application-Registration">Job Application Registration</h2>

Full Name: Email Address: Phone Number: Resume (PDF or Word): Position Applied: Select Position Frontend Developer Backend Developer Graphic Designer

Ausgabe:

Beispiel 3: Hotelregistrierungsformular

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

Code:

<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>


<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Hotel Image"   style="max-width:90%">

Name

Email ID

Phone Number

Number of Guests

Check-in Date

Check-out Date

Room Type Select Room Type Single Double Suite

Ausgabe:

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