I finished my Survey Form and need some feedback/help.
Im not able to move the textarea and the button in the middle under the two columns. I tried a lot, but nothing seems to work.
Is it correct to create the columns with
display:grid, or is there a better way to build this?
Actually i wanted to reduce the opacity of only the background image, but i couldnt figure how to do it properly. Instead i spent way too much time changing the color and style of the text to make it readable. I hope its ok.
br elements are not the best way to use, but when i try it with
block the description is always under the radio button.
Thanks for your help.
try to make your submit thing in a div and give it a margin 0 auto to move it to the center.
They are all children of survey form div with display: grid. If you want the foot div to be in the middle, you have to change that foot div span to cover 2 columns width, using the grid-column-start. After that there are several ways to center the elements. My approach is to set this foot div display to flex (thus it’s a flex-box nested in a sub-grid), with flex-direction: column, and align-items: center. If you’re using your browser’s dev console (click right > inspect > click on most top-left), it’d be easier to be aware of this problem.
Your advice worked perfectly. Thanks for the help.
I’m needing some help with the survey project in particular with the email not validating. Thanks in advance.
<h1 id="title">Ford Truck Survey</h1>
<p id="description">Choose your favorite Ford truck and color</p>
<label for="name" id="name-label">Name</label>
<input type="text" name="name" id="name"Placeholder="Enter full name here" required></input>
<label for="email" id="email-label">Email</label>
<input type="text" name="email" id="email" Placeholder="Enter valid email here" pattern=".+@globex\.com" required></input>
<label for="age" id="number-label">Age</label>
<input type="number" name="age" id="number-label" value="age" min="18" max="100" Placeholder="18" required></input>
<label for="dropdown" id="model"><b>Select your favorite model</b></labels>
<label for="colors" id="colors"> <b>Choose your favorite color</b></label>
<input type="radio" name="white" id="colors">
<input type="radio" name="red" id="colors">
<input type="radio" name="black" id="colors">
<label for="Upgrades" id="checkboxes"> <b>Upgrades</b></label>
<input type="checkbox" id="checkboxes" name="leather_seats" value="leather_seats">Leather seats</input>
<input type="checkbox" id="checkboxes" name="premium_sounds" value="premium_sound">Premium sound</input>
<input type="checkbox" id="checkboxes" name="security_system" value="security_system">Security system</input>
<textarea type="textarea" cols="45" rows="10>"></textarea>
<input type="submit" id="submit" value="Submit form">
@gooseman, please open your own topic for any issue you are having rather than detracting from the OP’s topic.
Your form looks good @jukusuna. Some things to revisit;
- Do not use the
<br> element to force line breaks or spacing. That’s what CSS is for.
- Reference MDN Docs
Instead of using
<br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.
- Keep all your styling external. Do not use in-line styling.
@Roma thank you for your feedback. I apologize for placing my question in the feed. Could you direct me on how to start a new topic. I’m new to the camp and also believe it or not I don’t have much experience with forums. Thank you
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.