Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Formulareingabe- und Bezeichnungselemente | Tabellen und Formulare
Html-Grundlagen

book
Herausforderung: Formulareingabe- und Bezeichnungselemente

Aufgabe

Erstellen Sie ein HTML-Formular, um Benutzerinformationen mithilfe von Eingabefeldern und entsprechenden Beschriftungen zu sammeln.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html>
<head>
<title>Personal Information Form</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>User Information Form</h2>

<!-- Step 1: Provide correct `input` types for each case. -->

<!--
Step 2: Ensure that each input field has a unique `id` attribute
and each `<label>` element has a `for` attribute
that matches the `id` of its associated input field.
-->
<form onsubmit="return false">
<label for="name-field">Name:</label>
<!-- Add a text input -->
<input type="_____" id="name-field" required name="name" /><br />

<label for="email-field">Email:</label>
<!-- Add an email input -->
<input type="_____" id="_____" required name="email" /><br />

<label for="_____">_____:</label>
<!-- Add a password input -->
<input type="_____" id="password-field" required name="password" /><br />

<label for="birthdate-field">Birth date:</label>
<!-- Add a date input -->
<input type="_____" id="birthdate-field" required name="birthdate" /><br />

<button type="submit">Send form</button>
</form>

Hinweis

  • Schritt 1: Geben Sie die korrekten Attribute für jedes Eingabefeld an, indem Sie diese Anweisungen befolgen:

    • Verwenden Sie das Attribut type="text" für die Namenseingabe;

    • Verwenden Sie das Attribut type="email" für die E-Mail-Eingabe;

    • Verwenden Sie das Attribut type="password" für die Passworteingabe;

    • Verwenden Sie das Attribut type="date" für die Geburtstagseingabe.

  • Schritt 2: Stellen Sie sicher, dass jedes Eingabefeld korrekt mit seinem entsprechenden Label verknüpft ist, indem Sie diese Anweisungen befolgen:

    • Für das Eingabefeld mit der id="name-field" sollte das entsprechende Label for="name-field" haben;

    • Für das Eingabefeld mit der id="email-field" sollte das entsprechende Label for="email-field" haben;

    • Für das Eingabefeld mit der id="password-field" sollte das entsprechende Label for="password-field" haben;

    • Für das Eingabefeld mit der id="birthdate-field" sollte das entsprechende Label for="birthdate-field" haben.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html>
<head>
<title>Personal Information Form</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>User Information Form</h2>

<!-- Step 1: Provide correct `input` types for each case. -->

<!--
Step 2: Ensure that each input field has a unique `id` attribute
and each `<label>` element has a `for` attribute
that matches the `id` of its associated input field.
-->
<form onsubmit="return false">
<label for="name-field">Name:</label>
<!-- Add a text input -->
<input type="text" id="name-field" required name="name" /><br />

<label for="email-field">Email:</label>
<!-- Add an email input -->
<input type="email" id="email-field" required name="email" /><br />

<label for="password-field">Password:</label>
<!-- Add a password input -->
<input type="password" id="password-field" required name="password" /><br />

<label for="birthdate-field">Birth date:</label>
<!-- Add a date input -->
<input type="date" id="birthdate-field" required name="birthdate" /><br />

<button type="submit">Send form</button>
</form>

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

some-alt