Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Challenge: Applying Form Inputs and Labels | Tables and Forms
HTML Essentials

book
Challenge: Applying Form Inputs and Labels

Task

Create an HTML form to collect user information using input fields and corresponding labels.

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>

Hint

  • Step 1: Provide the correct attributes for each input field by following these instructions:

    • Use the type="text" attribute for the name input;

    • Use the type="email" attribute for the email input;

    • Use the type="password" attribute for the password input;

    • Use the type="date" attribute for the birthday input.

  • Step 2: Ensure that each input field is correctly associated with its corresponding label by following these instructions:

    • For the input with the id="name-field", its corresponding label should have for="name-field";

    • For the input with the id="email-field", its corresponding label should have for="email-field";

    • For the input with the id="password-field", its corresponding label should have for="password-field";

    • For the input with the id="birthdate-field", its corresponding label should have for="birthdate-field".

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>

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

some-alt