Hey everyone,
I’m new to my coding journey.
I’m currently doing the “Build a Survey Form” project and have run into an issue with the submit button. No matter what I do, the submit is longer than all the the other elements in the form. I’ve made sure the box-model is border-box as well as checking if there’s any default styling for Submit buttons.
Any help would greatly be appreciated 
Here is my Codepen link - https://codepen.io/sinarad/pen/BamzNLo
Thank you
You set the width to 100% which is responsible for the problem. Check the ID #submit and change it to the width you prefer
Hi ErrorCode,
Thanks for the reply!
The thing is, I set the width for all the other Input elements to 100% too.
That’s why I’m confused… if Input and Submit both have a width of 100%, why is the Submit button showing up as wider? 
#submit {
display: block;
width: 100%;
min-height: 50px;
border: none;
font-family: Poppins;
font-weight: 700;
cursor: pointer;
padding: 0;
margin: 0 auto;
}
if you want to change the size of the button you can work with the width and min-height which you set. This will adjust it to the size you want
Ok great, thanks!
I think I’m good with changing the size of elements with the Width/Height settings. It’s just I was confused how come there’s a width discrepancy between the Input and Submit button even though I’ve put the same width for both - 100%.
Here’s a pic of what I’m referring to… There shouldn’t be a gap between the red and green lines should there? Because they’re both set to Width: 100% yet the Submit button is longer.
I will explain why. Hold on a bit let get my laptop
Now this will help you understand your code and anyother code in the future better. I want you to always think that each html tags are block element. Except the ones that were specified as inline elements like span, img, and so on.
Know that your body tag is nested inside your html and think of the html as a container to the body tag and the body tag as the child. Then everything in the body tag will also be the child of the body tag and the body tag is their container and parent. eg header, main, footer, div, e.t.c. These are all block elements also and they can also act as container.
Now going back to your code. You defined a html tag which acts as a container to the body tag, your also defined a body tag which acts as a container to your header, form, and footer tag if there is any. For all these tags you also defined a unique size or box by defining a style for them.
If your go back to look at your code The header is a container for whatever is inside it. The form is also a container for whatever is inside it. The form is our focus so read carefully and you will understand why the submit button is the way it is.
<form id="survey-form">
<!-- User Info -->
<fieldset id="user-info">
<label id="name-label">Name
<input id="name" name="name" type="text" placeholder="Please type your full name" required />
</label>
<label id="email-label">Email
<input id="email" name="email" type="email" placeholder="Please type your email" required />
</label>
<label id="number-label">Age (optional)
<input id="number" name="number" type="number" min="13" max="99" placeholder="Please select your age" />
</label>
</fieldset>
<!-- Coding Experience -->
<fieldset id="coding-experience">
<label>What level of experience do you have?
<select id="dropdown" name="exeperience">
<option selected disabled>(select one)</option>
<option value="Online">Minimal</option>
<option value="Friend">Moderate</option>
<option value="Social Media">Adanced</option>
</select>
</label>
<p> How has your experience with freeCodeCamp been so far?</p>
<label>
<input type="radio" name="opinion" value="Terrible" checked="checked"/> Terrible
</label>
<label>
<input type="radio" name="opinion" value="Ok"/> Ok
</label>
<label>
<input type="radio" name="opinion" value="Great"/> Great
</label>
</fieldset>
<!-- Final Thoughts -->
<fieldset id="final-thoughts">
<p>Which languages are you interested in?</p>
<label>
<input type="checkbox" name="interests" value="HTML"/>
HTML
</label>
<label>
<input type="checkbox" name="interests" value="CSS"/>
CSS
</label>
<label>
<input type="checkbox" name="interests" value="Javascript"/>
Javascript
</label>
<label>
<input type="checkbox" name="interests" value="React"/>
React
</label>
<label>
<input type="checkbox" name="interests" value="Python"/>
Python
</label>
<label>
<input type="checkbox" name="interests" value="PHP"/>
PHP
</label>
<label>
Any comments you'd like to share?
<textarea id="comments" name="comments" placeholder="Please enter your comments here..."></textarea>
</label>
</fieldset>
<input type="submit" id="submit" value="Submit"/>
</form>
Indide the form tag which acts as a container you created threeo fieldset container which houses three parts of your form
Fieldset1
<!-- User Info -->
<fieldset id="user-info">
<label id="name-label">Name
<input id="name" name="name" type="text" placeholder="Please type your full name" required />
</label>
<label id="email-label">Email
<input id="email" name="email" type="email" placeholder="Please type your email" required />
</label>
<label id="number-label">Age (optional)
<input id="number" name="number" type="number" min="13" max="99" placeholder="Please select your age" />
</label>
</fieldset>
Fieldset2
<!-- Coding Experience -->
<fieldset id="coding-experience">
<label>What level of experience do you have?
<select id="dropdown" name="exeperience">
<option selected disabled>(select one)</option>
<option value="Online">Minimal</option>
<option value="Friend">Moderate</option>
<option value="Social Media">Adanced</option>
</select>
</label>
<p> How has your experience with freeCodeCamp been so far?</p>
<label>
<input type="radio" name="opinion" value="Terrible" checked="checked"/> Terrible
</label>
<label>
<input type="radio" name="opinion" value="Ok"/> Ok
</label>
<label>
<input type="radio" name="opinion" value="Great"/> Great
</label>
</fieldset>
Fieldset3
<!-- Final Thoughts -->
<fieldset id="final-thoughts">
<p>Which languages are you interested in?</p>
<label>
<input type="checkbox" name="interests" value="HTML"/>
HTML
</label>
<label>
<input type="checkbox" name="interests" value="CSS"/>
CSS
</label>
<label>
<input type="checkbox" name="interests" value="Javascript"/>
Javascript
</label>
<label>
<input type="checkbox" name="interests" value="React"/>
React
</label>
<label>
<input type="checkbox" name="interests" value="Python"/>
Python
</label>
<label>
<input type="checkbox" name="interests" value="PHP"/>
PHP
</label>
<label>
Any comments you'd like to share?
<textarea id="comments" name="comments" placeholder="Please enter your comments here..."></textarea>
</label>
</fieldset>
According to my knowledge and experience when you declare a fieldset it is also a container in the form and everything inside it will be smaller that everythin outside the fieldset container.
Now let’s take a look at your code again from the form tag:
<!-- Form -->
<form id="survey-form">
<!-- User Info -->
<fieldset id="user-info">
<label id="name-label">Name
<input id="name" name="name" type="text" placeholder="Please type your full name" required />
</label>
<label id="email-label">Email
<input id="email" name="email" type="email" placeholder="Please type your email" required />
</label>
<label id="number-label">Age (optional)
<input id="number" name="number" type="number" min="13" max="99" placeholder="Please select your age" />
</label>
</fieldset>
<!-- Coding Experience -->
<fieldset id="coding-experience">
<label>What level of experience do you have?
<select id="dropdown" name="exeperience">
<option selected disabled>(select one)</option>
<option value="Online">Minimal</option>
<option value="Friend">Moderate</option>
<option value="Social Media">Adanced</option>
</select>
</label>
<p> How has your experience with freeCodeCamp been so far?</p>
<label>
<input type="radio" name="opinion" value="Terrible" checked="checked"/> Terrible
</label>
<label>
<input type="radio" name="opinion" value="Ok"/> Ok
</label>
<label>
<input type="radio" name="opinion" value="Great"/> Great
</label>
</fieldset>
<!-- Final Thoughts -->
<fieldset id="final-thoughts">
<p>Which languages are you interested in?</p>
<label>
<input type="checkbox" name="interests" value="HTML"/>
HTML
</label>
<label>
<input type="checkbox" name="interests" value="CSS"/>
CSS
</label>
<label>
<input type="checkbox" name="interests" value="Javascript"/>
Javascript
</label>
<label>
<input type="checkbox" name="interests" value="React"/>
React
</label>
<label>
<input type="checkbox" name="interests" value="Python"/>
Python
</label>
<label>
<input type="checkbox" name="interests" value="PHP"/>
PHP
</label>
<label>
Any comments you'd like to share?
<textarea id="comments" name="comments" placeholder="Please enter your comments here..."></textarea>
</label>
</fieldset>
<input type="submit" id="submit" value="Submit"/>
</form>
If you look closely the submit button is not wrapped around a fieldset tag and it’s contained inside the form tag which is why it’s flow is different from all your other elements inside your fieldset tag. If we put it inside inside the last fieldset tag without changing the width or height you will notice it won’t be bigger than the rest input tags vice versa if we remove the fieldset tags from all your form tag you will notice that they are the same width with the button tag. I will want you to try it out and see how it works then you will be able to understand it fully.
Sorry for the long explanation but I wanted you to fully understand it and also I will advise for next time that you only wrap fieldset with the legend tag. In your code the fieldset there is not doing anything. You can wrap it in a div element instead, thanks.
Comment: it’s a nice code anyways keep it up.
Hey,
Thanks so much for the detailed reply.
That makes so much sense now!
The submit-button was outside the fieldset-tag, so its flow would be different. As soon as I put it in the fieldset-tag, it became the same size as the inputs.
I really appreciate you taking the time to explain it to me 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.