Build a survey form

Hello,
I’ve just finished an html-file, it passed the test. Then began to put it in order within CSS file. But no reaction on preview of the page for any changes there. Sure, I had added a link with css file to html before. It seems like some technical issue…

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    
    <h1 id="title">Kazakhstan Airlines Survey Form</h1>
    <p id="description">Dear Traveller, thank you for choosing Kazakhstan Airlines! How was your flight? Please, tell us about it. </p>
    
    <form id="survey-form">
      <fieldset>
        <label id="name-label" for="name">Name <input id="name" type="text" required placeholder="Enter your name">
        <label id="email-label" for="email">Email <input id="email" type="email" required placeholder="Enter your e-mail">
        <label id="number-label" for="number">Age (optional) <input id="number" type="number" min="18" max="110" placeholder="Age" >
        <label for="loyality-number">Frequent Flyer Number (optional) <input id="loyality-number" type="text" pattern="[0-9]{9}" placeholder="KA Club Number (9 digits)" >
        </label>
      </fieldset>
        <label>
          <select id="dropdown" name="dropdown">
            <option value="">Select your departure point </option>
            <option value="1">Astana </option>
            <option value="2">Almaty </option>
            <option value="3">Shymkent </option>
            <option value="4">Dubai </option>
            <option value="5">Istanbul </option>
            <option value="6">London </option>
          </select>
        </label>
        <label>
          <select id="dropdown-2" name="dropdown-2">
            <option value="">Select your arrival point </option>
            <option value="1">Astana </option>
            <option value="2">Almaty </option>
            <option value="3">Shymkent </option>
            <option value="4">Dubai </option>
            <option value="5">Istanbul </option>
            <option value="6">London </option>
          </select>
        </label>
      <fieldset>
        <p>How was your overall experience with us today? </p>
        <label for="very-dissatisfied">
          <input
            id="very-dissatisfied"
            type="radio"
            name="satisfaction"
            value="very-dissatisfied"
            class="inline"
          > Very Dissatisfied          
        </label>
        <label for="dissatisfied">
          <input
            id="dissatisfied"
            type="radio"
            name="satisfaction"
            value="dissatisfied"
            class="inline"
          > Dissatisfied          
        </label>
        <label for="Satisfied">
          <input
            id="Satisfied"
            type="radio"
            name="satisfaction"
            value="Satisfied"
            class="inline"
          > Satisfied    
          <label for="very-satisfied">
          <input
            id="very-satisfied"
            type="radio"
            name="satisfaction"
            value="very-satisfied"
            class="inline"
            checked
          > Very Satisfied         
        </label>
      </fieldset>      
      <fieldset>
        <p>Would you recommend Kazakhstan Airlines to your friends and relatives? </p>
        <label for="definitely">
          <input
            id="definitely"
            type="radio"
            name="recommendation"
            value="definitely"
            checked          
          > Definitely
        </label>
        <label for="may-be">
          <input
            id="may-be"
            type="radio"              name="recommendation"
            value="may-be"          
          > May be
        </label>
        <label for="not-sure">
          <input
            id="not-sure"
            type="radio"
            name="recommendation"
            value="not-sure"     
          > Not sure
        </label>
      </fieldset>
      <fieldset>
        <p>Why have you chosen Kazakhstan Airlines?</p>
        <label for="schedule">
          <input
            id="schedule"
            type="checkbox"
            name="choice-reason"
            value="schedule"
          > Convenient Schedule
        </label>
        <label for="safety">
          <input
            id="safety"
            type="checkbox"
            name="choice-reason"
            value="safety"
          > Flight safety and well-being
        </label>
        <label for="experience">
          <input
            id="experience"
            type="checkbox"
            name="choice-reason"
            value="experience"
          > Previous Experience
        </label>
        <label for="reputation">
          <input
            id="reputation"
            type="checkbox"
            name="choice-reason"
            value="reputation"
          > Reputation
        </label>
        <label for="rout-network">
          <input
            id="rout-network"
            type="checkbox"
            name="choice-reason"
            value="rout-network"
          > Wide Route Network
        </label>
        <label for="comfort">
          <input
            id="comfort"
            type="checkbox"
            name="choice-reason"
            value="comfort"
          > Aircraft cabin comfort
        </label>
        <label for="frequent-flyer">
          <input
            id="frequent-flyer"
            type="checkbox"
            name="choice-reason"
            value="frequent-flyer"
          > Frequent Flyer Programme
        </label>
        <label for="quality">
          <input
            id="quality"
            type="checkbox"
            name="choice-reason"
            value="quality"
          > Quality of product and service
        </label>
        <label for="other-reason">
          <input
            id="other-reason"
            type="checkbox"
            name="choice-reason"
            value="other-reason"
          > Other
        </label>
        <label for="none-reason">
          <input
            id="none-reason"
            type="checkbox"
            name="choice-reason"
            value="none-reason"
          > None of the above
        </label>
      </fieldset>
      <fieldset>
        <label for="comments">We welcome any further comments you may have regarding the services:
          <textarea
            id="comments"
            name="comments"
            rows="3"
            cols="30"
            placeholder="I would like to have more points for the flight..." 
          >
          </textarea> 
        </label>
      </fieldset>
      <input
        id="submit"
        type="submit"
        value="Submit"
      >
    </form>
  </body>
</html>

CSS (just began to work)

h1 {
  text-align: center;
}
body {
  background-image: url(https://st2.depositphotos.com/2931363/5597/i/950/depositphotos_55976993-stock-photo-pilot-showing-his-thumb-up.jpg)
}

I don’t think it’s technical issue, but rather typo issue.

You forgot the opening " and closing ".

Also, the closing meta tag is also missing here too.

it looks like you forgot to close your last meta tag. therefore, your link to your css stylesheet isn’t working.

1 Like

That’s right! Thanks for your help!

Sure! Appreciate for your help!

1 Like