Tell us what’s happening:
i am having error messages like "
do i need a javascript code? i haven’t learnt anything on that yet
Your code so far
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
<h1 id="title">Survey Form</h1>
<div id="outer-form">
<p id="description">
Oops! We need to know how to improve freecodecamp
</p>
<form action="" method="post" id="survey-form">
<div id="name-container">
<label for="name" id="name" pattern="[A-Za-z]{10}">* Name:</label>
<input type="text" name="name" value="" placeholder="please enter your name">
</div>
<div id="email-container">
<label for="email" id="email-label" pattern="[A-Za-z]{10}">* Email:</label>
<input type="email" name="email" value="" placeholder="please enter your email">
</div>
<div id="nmuber-container">
<label for="number" id="number-label" pattern= "[0-9]">* Number:</label>
<input type="number" id="number" name="amount" value="" min="1" max="10" placeholder="enter your phone number" style="width: 150px;">
</div>
<div id="dropdown-container">
<label for="dropdown" id="label-dropdown"></label>
<label>Select list :</label>
<select id = "dropdown">
<option value = "1">one</option>
<option value = "2">two</option>
<option value = "3">three</option>
<option value = "4">four</option>
</select>
</div>
<div id="radio">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>
<div id="checkbox">
<label class="checkbox-inline">Things that should be improved :
<input type="checkbox" value="">Front end
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Back End
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">challenges
</label>
<input type="checkbox" value="">Open source community
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Video
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Wiki
</label>
</div>
<div id="form-textarea">
<label for="form-textarea">Please leave your comment behind <br>
<textarea rows="2" cols="30" id="form-textarea"></textarea>
</label>
</div>
<input type="submit" value="Submit" class="submit">
</form>
</div>
</body>
css code below**
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,600,800,900');
body{
font-family: 'Work Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
background: #ebebef;
display: block;
width: 100%;
background-color: grey;
}
html{
text-align: center;
}
.submit{
font-size: 18px;
margin-top: 15px;
background-color: dodgerblue;
font-weight: bold;
border-radius: 7px;
}
#survey-form{
background-color:rgb(250, 250, 250);
margin: 0 auto;
border-radius:4px;
width: 75%;
max-width: 900px;
padding: 10px;
padding-top: 20px;
}
div{
position: static;
display: block;
}
label{
cursor: default;
text-align: left;
padding: 20px;
margin:20px;
}
select{
/* padding: 10px; */
margin: 20px;
}
#checkbox{
}
.checkbox-inline{
position:relative;
left: -48px;
margin-left: 400px;
display: block;
/* padding-bottom: 1px; */
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/