Need help with radio and checkbox buttons!

HTML-CSS
1

Hey everyone! Working on the second project for HTML-CSS.

My radio and checkbox buttons are out of alignment, and I’ve spent yesterday and today researching to find out how to align them in the middle and format them so they match the rest of my survey.

Here’s my HTML Code for the radio buttons:

 <p>Choose a Day:</p>
    <label for="radio">Choose a Day:</label>
      <input id="Monday"
             type="radio" 
             name ="Monday-Friday"
             value="Monday">Monday</input>
    
        <input id="Friday"
               type="radio" 
               name ="Monday-Friday"
             value="Friday">Friday</input>

Here’s my HTML Code for the Checkboxes:

 <label for="times">
          Choose a Time:</label>
  
        <label for="Times">
          <input id="3pm" 
                 type="checkbox"
                 value="time">3:00pm-4:00pm</label>
  
        <label for="Times">
          <input id="12pm" 
                 type="checkbox"
                 value="time">12:00pm-1:00pm</label>

As you can see, the text is out of alignment with the rest of the form, and the checkboxes don’t show up on the form at all :frowning:

Here’s my Codepen for you to check out the CSS and rest of the code: Survey Form Codepen

What can I do?

2

@rikainocalla, start by running your HTML code through the W3C validator.

  • There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.

You may also want to revisit the lesson about creating a set of radio button and the next couple of lessons that follow.

In the future, posting the link to your pen is sufficient. Posting the code is not necessary.

3

There are a couple of html errors, however the biggest culprit is that you are missing a closing ‘’ tag in your select menu.

    solution redacted by mod

Hope this helps!

4

@morgansegura, we try and provide hints and guide users to a solution rather than giving direct answers.
That was why my post had the OP run their code through the W3C validator.

5

Additionally, update this HTML:

solution redacted by mod
  • Wrap the inputs in a label to match your other code
  • Close the inputs as you did in your other code.
6

Thank you both!! I figured out my multiple mistakes: forgot to close my

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.