Hi everyone, this is my first work on HTML, there are some problems such as: the button that when pressed does not require you to enter the requested data, etc etc. this post is to ask you who can criticize me and give me a little inspiration to make these changes or if anyone wants to suggest other features that I can apply to enrich this first test of mine, please if anyone thinks that I should do it again, please explain the reasons I’m here to learn.
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Survey Form - Build a Survey Form
1 Like
Could you share your full code please? Thanks!
1 Like
ILM
June 27, 2024, 12:25pm
3
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, 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 (').
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">++++++ survey form </h1>
<p id="description"> thanks for your time </p>
<form method="post" action='https://register-demo.freecodecamp.org'>
<div class="survey">
<fieldset>
<label id="name">Name</label>
<input required id="name" name="name"placeholder="Give your name" type="text"/>
<label id="email">Email</label><input required id="email" name="email" placeholder="Give your email" type="email"/>
<label id="Age">Age (optional)</label> <input required id="age" name="age" placeholder="Give your age" type="number" min="13" max="120"/>
</fieldset>
<fieldset>
<label id="role">Which option best describes your current role?</label>
<select id="role" name="role" class="frog">
<option value=" ">Select role</option>
<option value="full time">Full time</option>
<option value="full time learner">Full time learner</option>
<option value="student">Student</option>
<option value="prefr not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset>
<legend>Account type (required)</legend>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
</fieldset>
<fieldset>
<label id="feauters likes">What is your favorite feature of freeCodeCamp? </label>
<select id="feauters likes" name="feauters likes" class="frog">
<option id=" "> Select an option</option>
<option id="challenges">Challenges</option>
<option id="projects">Projects</option>
<option id="community">Community</option>
<option id="open source">Open source</option>
<option id="other">Other</option>
</select>
</fieldset>
<fieldset>
<legend>What would you like to see improved? (Check all that apply)</legend>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Back-end Projects</label>
<label for="data Visualization" ><input type="checkbox" name="data Visualization" id="data Visualization" class="inline"/>Data Visualization</label>
<label for="challenges" ><input type="checkbox" name="challenges" id="challenges" class="inline"/>Challenges</label>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="gitter help rooms" ><input type="checkbox" name="gitter help rooms" id="gitter help rooms" class="inline"/>Gitter help rooms</label>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="city Meetups" ><input type="checkbox" name="city Meetups" id="city Meetups" class="inline"/>City Meetups</label>
<label for="wiki" ><input type="checkbox" name="wiki" id="wiki" class="inline"/>Wiki</label>
<label for="forum" ><input type="checkbox" name="forum" id="forum" class="inline"/>Forum</label>
<label for="front-end projects" ><input type="checkbox" name="additional courses" id="additional courses" class="inline"/>Additional Courses</label>
</fieldset>
<fieldset>
<label id="comments"> Any comments or suggestions?</label>
<textarea name="comments" id="comments" rows="9" cols="58" placeholder="write here if you have any comments"/></textarea>
</fieldset>
<fieldet>
<button type="button">SUBMIT</button>
</fieldset>
</form>
</div>
</body>
</html>
h1, p{
text-align: center;
color: white
}body{
background-image: url("https://images.spiceworks.com/wp-content/uploads/2023/05/17141122/Shutterstock_2079263023-768x384.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 19px;
}
label{
text-align: left;
display: block;
color: white;
padding: 10px;
width: 100%;
margin: 0 0 0 -10px;
}
input,select{
margin: 0px;
width: 100%;
min-height: 2em;
padding: 15px;
height: 3em;
}
form{
width: 80%;
margin: auto;
}
.inline{
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
display: inline;
}
fieldset{
border-left: 0;
border-right: 0;
border-bottom: 0;
border-top: 0.2rem solid;
border-color: #1E90FF;
}
legend{
color: white;
}
.survey{
width: 80%;
background-color: rgba(0, 0, 0, 0.7);
margin: 50px auto;
padding: 30px;
max-width: 500px;
display: block;
}
.frog{
margin: 0;
width: 100%;
min-height: 2em;
padding: 10px;
}
select{
margin: 0px;
width: 100%;
min-height: 2em;
padding: 15px;
height: 3em;
}
button{
margin-top: 70px;
padding: 10px 215px;
text-align: center;
font-size: 16px;
background: #1E90FF;
font-style: italic;
cursor: pointer;
}
Hi, I tried again, so is it ok?
ILM
June 27, 2024, 1:04pm
7
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 (').
1 Like
<p>hi everyone</p>
hi everyone
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">++++++ survey form </h1>
<p id="description"> thanks for your time </p>
<form method="post" action='https://register-demo.freecodecamp.org'>
<div class="survey">
<fieldset>
<label id="name">Name</label>
<input required id="name" name="name"placeholder="Give your name" type="text"/>
<label id="email">Email</label><input required id="email" name="email" placeholder="Give your email" type="email"/>
<label id="Age">Age (optional)</label> <input required id="age" name="age" placeholder="Give your age" type="number" min="13" max="120"/>
</fieldset>
<fieldset>
<label id="role">Which option best describes your current role?</label>
<select id="role" name="role" class="frog">
<option value=" ">Select role</option>
<option value="full time">Full time</option>
<option value="full time learner">Full time learner</option>
<option value="student">Student</option>
<option value="prefr not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset>
<legend>Account type (required)</legend>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
</fieldset>
<fieldset>
<label id="feauters likes">What is your favorite feature of freeCodeCamp? </label>
<select id="feauters likes" name="feauters likes" class="frog">
<option id=" "> Select an option</option>
<option id="challenges">Challenges</option>
<option id="projects">Projects</option>
<option id="community">Community</option>
<option id="open source">Open source</option>
<option id="other">Other</option>
</select>
</fieldset>
<fieldset>
<legend>What would you like to see improved? (Check all that apply)</legend>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Back-end Projects</label>
<label for="data Visualization" ><input type="checkbox" name="data Visualization" id="data Visualization" class="inline"/>Data Visualization</label>
<label for="challenges" ><input type="checkbox" name="challenges" id="challenges" class="inline"/>Challenges</label>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="gitter help rooms" ><input type="checkbox" name="gitter help rooms" id="gitter help rooms" class="inline"/>Gitter help rooms</label>
<label for="front-end projects" ><input type="checkbox" name="front-end projects" id="front-end projects" class="inline"/>Front-end Projects</label>
<label for="city Meetups" ><input type="checkbox" name="city Meetups" id="city Meetups" class="inline"/>City Meetups</label>
<label for="wiki" ><input type="checkbox" name="wiki" id="wiki" class="inline"/>Wiki</label>
<label for="forum" ><input type="checkbox" name="forum" id="forum" class="inline"/>Forum</label>
<label for="additional courses" ><input type="checkbox" name="additional courses" id="additional courses" class="inline"/>Additional Courses</label>
</fieldset>
<fieldset>
<label id="comments"> Any comments or suggestions?</label>
<textarea name="comments" id="comments" rows="9" cols="58" placeholder="write here if you have any comments"/></textarea>
</fieldset>
<fieldet>
<button type="button">SUBMIT</button>
</fieldset>
</form>
</div>
</body>
</html>
h1, p{
text-align: center;
color: white
}body{
background-image: url("https://images.spiceworks.com/wp-content/uploads/2023/05/17141122/Shutterstock_2079263023-768x384.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 19px;
}
label{
text-align: left;
display: block;
color: white;
padding: 10px;
width: 100%;
margin: 0 0 0 -10px;
}
input,select{
margin: 0px;
width: 100%;
min-height: 2em;
padding: 15px;
height: 3em;
}
form{
width: 80%;
margin: auto;
}
.inline{
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
display: inline;
}
fieldset{
border-left: 0;
border-right: 0;
border-bottom: 0;
border-top: 0.2rem solid;
border-color: #1E90FF;
}
legend{
color: white;
}
.survey{
width: 80%;
background-color: rgba(0, 0, 0, 0.7);
margin: 50px auto;
padding: 30px;
max-width: 500px;
display: block;
}
.frog{
margin: 0;
width: 100%;
min-height: 2em;
padding: 10px;
}
select{
margin: 0px;
width: 100%;
min-height: 2em;
padding: 15px;
height: 3em;
}
button{
margin-top: 70px;
padding: 10px 215px;
text-align: center;
font-size: 16px;
background: #1E90FF;
font-style: italic;
cursor: pointer;
}
1 Like
I’ve tested your code and there are a lot of user stories which you haven’t addressed yet.
You need to go through each of the required user stories one-by-one and ensure that you have fulfilled the requirements correctly. I’d start by adding an id attribute to the form element.
system
December 27, 2024, 10:39pm
10
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
