Survey Form - Build a Survey Form


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">
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <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">
      <legend class ="legend" name="employed">Question</legend>

      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>

        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>
      <label for="reason">If unemployed, why? </label>
      <textarea id="reason"></textarea>
      <input id="submit" type="submit">
/* file: styles.css */
#title {
   text-align: center

#description {

.legend {

label {

input, select {
  margin: 0 80% 0 35%; 
  //display: inline;  

select {
  padding: 1px 2px;

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

input[type="submit"] {
  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/ Safari/537.36 Edg/

Challenge Information:

Survey Form - Build a Survey Form

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.

1 Like


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 .



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.

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?

1 Like

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

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?

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.


This is great, I’ll try that.

1 Like