Anmeldeformular in HTML-HTML-Tutorial-php.cn

Inhaltsverzeichnis

Wie erstelle ich ein HTML-Formular?

Beispiel für ein Registrierungsformular in HTML

Beispiel 1: Einfaches Registrierungsformular

Anmeldeformular: Validierungen

Beispiel 2: Registrierungsformular für eine Stellenbewerbung

Beispiel 3: Hotelregistrierungsformular

Heim

Web-Frontend

HTML-Tutorial

Anmeldeformular in HTML

PHPz

Sep 04, 2024 pm 04:44 PM

html html5 HTML Tutorial HTML Properties HTML tags

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Wie kann ich KB5055612 in Windows 10 nicht installieren?

4 Wochen vor By DDD

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

3 Wochen vor By DDD

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusionssystem, erklärt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Flüstern des Hexenbaum

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1670

CakePHP-Tutorial

1428

Laravel-Tutorial

1329

PHP-Tutorial

1274

C#-Tutorial

1256

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles