And I used margin-right:-9rem; in input element. But it didn't sound its good approach to me, idk why. But is there a better option how do do it? I was just trying my radio button and checkboxes near the boxes. I have been trying to do survey form to practice my html and css knowledge. Please help me.
body {
background-color: rgb(25, 230, 161);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-weight: bold;
color: white;
margin-top: 2rem;
}
#description, #welcome {
font-style: italic;
font-size: 1.1rem;
}
main {
width: 60%;
border: 2px solid red;
margin: 0 auto;
text-align: left;
padding: 1rem 2rem; /*margin moves the border, padding changes the inside elements, not position of border.*/
}
label {
display: block; /*make labels one under the other */
padding-bottom: .3rem;
padding-top: 1rem;
}
input {
width:20rem;
margin-right: -9rem;
}
[for="dropdown"] {
margin-top: 1rem;
}
p {
margin-bottom: 0;
}<body>
<h1 id="title">LearningHtmlCss Course Survey Form</h1>
<p id="description">This survey page is built for gathering information about people taking this course. So that we can improve our site.</p>
<p id="welcome">Thank you for taking time to help us improve the platform</p>
<main>
<form id="survey-form">
<label for="name" id="name-label">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email" id="email-label">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]" pattern="[email protected]" title="Please provide only gmail address" placeholder="Enter your email" required> <!--email validation-->
<label for="age" id="number-label">Age</label>
<input type="number" id="age" min="7" max="99" placeholder="between 7, and 99" required>
<label for="dropdown">Which option best describes your current role?</label>
<select name="current role" id="dropdown">
<option>Select current role</option>
<option value="student">Student</option>
<option value="job">Full time job</option>
<option value="learner">Full time learner</option>
<option value="not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
<p>Would you recommend LearningHtmlCss course to a friend?</p>
<label>
<input type="radio" name="option" value="Definitely" checked>Definitely
</label>
<label>
<input type="radio" name="option" value="Maybe">Maybe
</label>
<label>
<input type="radio" name="option" value="Not sure">Not sure
</label>
<p>What would you like to see improved?</p>
<label>
<input type="checkbox" name="front-end" value="front-end">Front-end projects
</label>
<label>
<input type="checkbox" name="back-end" value="back-end">Back-end projects
</label>
<label>
<input type="checkbox" name="forum" value="forum">Forum
</label>
<label>
<input type="checkbox" name="videos" value="videos">Videos
</label>
<label>
<input type="checkbox" name="city-meetups" value="city-meetups">City Meetups
</label>
<label>
<input type="checkbox" name="additional" value="additional">Additional courses
</label>
<label for="comments">Any comments or suggestions?</label>
<input type="textarea" name="comment" id="comments" placeholder="Enter your comment here...">
<button type="submit">Submit</button>
</form>
</main>
</body>In order to correct the position of the radio and the checkbox of the buttons, you need to replace the css rules of this input:
input {
width: 20rem;
margin-right: -9rem;
}
Replace with this one:
input {
width: auto;
margin: 0 5px 0 0;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments