CSS problem in my survey form

HTML-CSS
1

in my survey form, i have two

; am trying to style my CSS. my question is: how will i differeniate the two ps and give them different CSS styles. this my code so far:

<DOCTYPE html>
  <html>
    <link rel="stylesheet" href="styles.css">
    <h1 id="title">FreeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking time to help us improve the platform</p>
    <form id="survey-form">
      <div>
      <label id="name-label">Name</label> 
        <input id="name" type="text" placeholder="Enter your name" required></input>
      </div>
      <div>
       <label id="email-label">Email</label>
        <input id="email" type="text" placeholder="Enter your email" required></input>
        </div>
        <div>
          <label id="number-label">Age (optional)</label>
          <input id="number" type="number" placehoder="Age" min="1" max="70" required></input>
          </div>
          <select id="dropdown">
            <option type="radio" name="options" >Option One</option>
            <option type="radio" name="options">Option Two</option>
            </select>
            <div>
              <label>
                <input id="option one" type="checkbox" name="options" value="option one">Option One</label>
                </div>
                <div>
                  <label>
                    <input id="option two" type="checkbox" name="options" value="option one">Option two</label
                    </div>
                    <p>Additional Comments</p>
                    <textarea></textarea>
                    <button id="submit" value="submit">Submit</button>

my CSS code for now:

h1 {
  text-align: center;
}
p1 {
  text-align: left;
}
form {
  background-color: grey;
  width: 100px;
  height: 25px;
  margin: 10px 0;
}
p2 {
 text-align: center;
}

your help will be appreciated

2

One of the options:
In your HTML you can give your p elements different classes or id-s. Then use appropriate CSS selectors in CSS to style it.

This selector is incorrect. There is no such thing like p1 element in HTML.

3

Hello there! I see some problems.

First: <link> tag must be inside <head>...</head> element;

Second: Where is the <body>...</body> element?

Third: You only use two <p> elements. The first <p> has attribute id of value "description". You can use it in your CSS code like this:

#description {
    text-align: left;
}

p {
    text-align: center;
  }

So you will have one style for the first <p> and a second style for the second <p>.

Fourth: The <input> element has no closing tag.

<input id="name" type="text" placeholder="Enter your name" required>

Fifth: As far as I know either you use the <input> element nested within the <label> element or you put the “for” attribute as the same value as the “id” of the <label> you want to reference. This way:

<label id="name-label">Name
    <input id="name" type="text" placeholder="Enter your name" required>
</label>

OR

<label id="name-label" for="name">Name</label>
<input id="name" type="text" placeholder="Enter your name" required>

The “for” attribute of <label> must have the same value as the “id” attribute of <input>.

Sixth: The <option> tag can be used without any attributes, but you usually need the “value” attribute, which indicates what is sent to the server on form submission.

Seventh: You forgot the closing tag </form> .

I’ve noticed these problems.
In case you didn’t understand my explanation, English is not my native language. I used google translator to write you.
I hope I could help you and have a good study.

1 Like
4

@gustavo.afc , thank you so much for your observations. i have taken my time to see those problems but please i would highly appreciate it if take a look at it the second time. am sorry for the inconveniences.

<DOCTYPE html>
  <html>
    <head>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <h1 id="title">FreeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking time to help us improve the platform</p>
    <form id="survey-form">
      <div>
      <label id="name-label" for="name">Name</label> 
        <input id="name" type="text" placeholder="Enter your name" required></input>
      </div>
      <div>
       <label id="email-label" for='"email">Email</label>
        <input id="email" type="text" placeholder="Enter your email" required></input>
        </div>
        <div>
          <label id="number-label" for="number">Age (optional)</label>
          <input id="number" type="number" placehoder="Age" min="1" max="70" required></input>
          </div>
          <select id="dropdown">
            <option type="radio" name="options" value="opton one" >Option One</option>
            <option type="radio" name="options" value="option two">Option Two</option>
            </select>
            <div>
              <label>
                <input id="option one" type="checkbox" name="options" value="option one">Option One</input></label>
                </div>
                <div>
                  <label>
                    <input id="option two" type="checkbox" name="options" value="option one">Option two</input></label
                    </div>
                    <p>Additional Comments</p>
                    <textarea></textarea>
                    <button id="submit" value="submit">Submit</button>
      </body>
      </form>
1 Like
5

Hello again @blessedonyi ! I’m glad to help. No need to apologize this doubt is helping me to learn more. I would like to suggest that you use some source code editor software. It will help a lot in the error visualization. I use Visual Studio Code.

Print-screen
Print-screen903Ă—609 72.2 KB

I’ll list some problems I found:
First: The exclamation point is missing from DOCTYPE.

Second: The type="text/css" attribute inside the <link> tag is missing.

Third: The input element has no closing tag, you can remove all the </input> you put in your code. In the freeCodeCamp lessons the syntax adopted is this <input attribute="" />, but I discovered on the internet that you can write it another way as <input attribute="">. Both ways are correct.

Fourth: In this code snippet: <label id="email-label" for='"email">Email</label> remove the single quote (') after the equals symbol (=) in the for attribute.

Fifth: In step 6 of the Build a Survey Form lesson it says “If you enter an email that is not formatted correctly, you will see an HTML5 validation error”. You can satisfy this request by changing the value of the type attribute in the <input> tag. You put the value "text", there is another suitable value for email.

Sixth: In the “Age” label you inform the form that the age is optional, but in your <input> you have written the “required” attribute. This means that the user will be required to fill in this input. I suggest removing the word “(optional)” from the label.

Seventh: In the <input> of the “Option two” checkbox you forgot to put the symbol greater than “>” in the closing tag of </label>.

Eight: The <form> element is nested inside the <body> element, so the closing tag of </form> comes before the closing tag of </body>. You need to change this order.

Ninth: You forgot the closing </html> tag of the <html> element.

How is your css file developing?

6

@gustavo.afc , thank you very much. your support really helped me. sorry i didn’t get back to you as soon as possible. i wasn’t feeling well but am back in the game. i have finished the survey form project and i passed.
please how do i get the Visual Studio Code?

1 Like
7
1 Like
8

Congratulations! :confetti_ball: It’s ok I only respond when I’m available too. I started using Visual Studio Code after reading this article Getting Started with Visual Studio Code and Building HTML Websites.

9

@admit8490 , thanks.

10

@gustavo.afc , thanks dear.

11

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