How do I use personal-account and business-account as ‘id’ in this code?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<!-- User Editable Region -->
<fieldset>
<legend>Account type (required)</legend>
<label><input type="radio" name="account-type" checked /> Personal</label><input type="personal" id="personal - account" />
<label><input type="radio" name="account-type" /> Business</label><input type="business" id="business-account" />
</fieldset>
<!-- User Editable Region -->
<fieldset>
<label for="personal-account"><input id="personal-account"></label>
<label for="business-account"><input id="business-account"></label>
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Learn HTML Forms by Building a Registration Form - Step 29
personal-account and business-account are the values of the attributes as appropriate. They should match in the attributes for your label and your corresponding input elements. You do this by having a “for” attribute in the label with that value, and an “id” attribute with that value in the input element .
With this code what is the issue?
How do I code the first ‘input’ element with ‘personal-account?’
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<!-- User Editable Region -->
<fieldset>
<legend>Account type (required)</legend>
<label><input type="radio" name="account-type" checked /> Personal</label><input type="personal" id="personal - account" />
<label><input type="radio" name="account-type" /> Business</label><input type="business" id="business-account" />
</fieldset>
<!-- User Editable Region -->
<fieldset>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Learn HTML Forms by Building a Registration Form - Step 29
it looks like you deleted the legend element?
Hello?
Where could I have done wrong with this code?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<!-- User Editable Region -->
<fieldset>
<legend>Account type (required)</legend>
<label><input type="radio" name="account-type" checked /> Personal</label><input type="personal" id="personal - account" />
<label><input type="radio" name="account-type" /> Business</label><input type="business" id="business-account" />
</fieldset>
<!-- User Editable Region -->
<fieldset>
<legend>Account Type</legend>
<label for="personal-account">Personal Acccount</label>
<input type="radio" id="personal-account" name="account-type" value="personal-account">
<label for="business-account">Business Account</label>
<input type="radio" id="business-account" name="account-type" value="business-account"
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Learn HTML Forms by Building a Registration Form - Step 29
hbar1st
September 7, 2024, 2:30pm
6
please click the Reset button to restore the original code because it looks like you were trying to add elements instead of attributes.
This step wants you to add some attributes to the existing code in order to link the input and the label element.
labels are input elements can be linked with the addition of a for attribute and an id attribute respectively.
I have tried the code is not coming up correctly
hbar1st
September 7, 2024, 2:39pm
8
have you tried clicking the Reset button to restore the legend element?
I have tried it is not coming, guide please.
<fieldset>
<legend>Account Type (required) </legend>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</label>
</fieldset>
<input type="submit" value="Submit" />
ilenia
September 7, 2024, 3:15pm
10
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
hi there!
the above code is working for me. you have deleted the last empty fieldset element from the challenge editor. reset the challange try again.
ilenia
September 7, 2024, 3:24pm
12
I have merged your three topics on this step. Please use only one topic for one step, do not open multiple topics.
