Survey Form - Build a Survey Form

HTML-CSS
1

Hello,

I got a couple of questions:

  1. How do I keep all input boxes on 1 side/column and lined up, even the radio and checkbox?
  2. What’s the meaning of each character in the email pattern attribute?
  3. Why doesn’t my submit button have a black background?

Please have a look at my code:

<!-- file: index.html -->
<! DOCTYPE html>
<html lang="en">
  <header>
    <link rel="stylesheet" href="styles.css">
    <title>      
    </title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  </header>
  <body>
    <h1 id="title">SOUTHERN LABOR MARKET SURVEY</h1>
    <p id="description"> By Florida Statistic Bureau </p>
    <form id="survey-form">                            
      <legend class ="legend">Personal Information</legend>
        
      <label for="name" id="name-label">What's your name?</label>
      <input required id="name" type="text" placeholder="Pamela Anderson" pattern="[._%+\-]">
       
        
      <label for="email" id="email-label">What's your email?</label>
      <input required id="email" type="email" placeholder="user@domain.TLD" pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">

      <label for="number" id="number-label">What's your birthyear? </label>
      <input  type="number" id="number" min="1957" max="2004" placeholder="1958">
        
      <label for="dropdown">Where are you living?</label>
      <select id="dropdown">
        <option>State</option>
        <option>Florida</option>
        <option>Lousiana</option>
        <option>Texas</option>
      </select>      
    
      <legend class ="legend" name="employed">Question</legend>

      <section>
      Are you employed?
        <input id="yes" type="radio" name="employed" value="Yes">
        <label for="yes">Yes</label>

        <input id="no" type="radio" name="employed" value="No">
        <label for="no">No</label>
      </section>

      <section>
        How do you look for work?
        <input id="fair" type="checkbox" name="search" value="fair">
        <label for="fair">Job fair</label>

        <input id="Online" type="checkbox" name="search" value="Online">
        <label for="Online">Online</label>
      </section>
        
         
      <label for="reason">If unemployed, why? </label>
      <textarea id="reason"></textarea>
      
      <input id="submit" type="submit">
    </form> 
  </body>
</html>

/* file: styles.css */
#title {
   font-size:30px;
   text-align: center
}

#description {
  text-align:center;
}

.legend {
  text-transform:uppercase;
}

label {
 //width:50%;
}

input, select {
  //width:50%;
  margin: 0 80% 0 35%; 
  //text-align:left; 
  //display: inline;  
}

select {
  padding: 1px 2px;
}

input[type="radio"],input[type="checkbox"] {
  vertical-align: middle; 
  margin: 0 0 0 7%; 
}

input[type="submit"] {
  margin-top:450px;   
  blackground-color:black;
  color:white;  
  margin: 0 auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Survey Form - Build a Survey Form

2

There’s a typo.

As for the alignment issue I’m confused by some of your choices, but that’s probably due to my inexperience.

Regarding the email pattern that’s a simple google search. Maybe try that and see if it makes sense to you. Is this affecting your project in any way?

Hope this helps a little.

3

Hey!

Give the input type radio and checkbox a class inline, the make inline selector in the css rule

width:unset; vertical-align: middle; margin: 0 0.5rem 0 ;

And background-color have a typo .

@bekle

4

Thanks for the advice. I took the code from Google, and it didn’t provide much explanation. If you have a systematic learning source of this, I would greatly appreciate.

5

Thanks for the typo pointing out.= D About the columns, I could align the second one but the corresponding box doesn’t stay on the same line with the question. What’s the proper way to do it?

6

Mention that portion of code here , you want to align in same line.
@bekle

7

I aligned it with margin:
input, select {
margin: 0 80% 0 35%;
}

I guess because of the 80% left margin (Personal Information), the second “column” lines up, but it can’t stay in 1 row. Then in the Question part, the checkboxes just happen to line up with those in the previous rows:
input[type=“radio”],input[type=“checkbox”] {
vertical-align: middle;
margin: 0 0 0 7%;
}

How would you do this?

8

You can achieve the row visual of elements, using flex box. Nest required elements in a div give that div a class inline , and make the inline class selector display flex justify content row. Put some padding and margin as you want.
@bekle

9

This is great, I’ll try that.