<html>
  <body>
  <header >
    <h1 id="title">Sock Survey Form</h1>
    <p id="description">How do you buy socks?<p/>
  </header>
  
  <main>
    
    <form id="survey-form">
   <div>   
     <label for="name" id="name-label">Name</label>
      <input
type="text" 
name="name"    
id="name"
placeholder="Enter your name" required >
      </div>
      
       <div>   
     <label for="email" id="email-label">Email</label>
      <input
name="email"    
id="email"
placeholder="Enter your email" required >
      </div>
      
        <div>   
     <label for="age" id="number-label">Age(optional)</label>
      <input
type="number" 
name="age"    
id="number"
             min="5";
             max="100";
placeholder="Enter your age" >
      </div>
      
        <div>   
      <label for="place" id="dropdown">Where do you buy socks:</label>
<select id="place">
  <option disabled selected>Select a value</option>
  <option value="Online">Online</option>
    <option value="Physical stores">Physical stores</option>
    <option value="Both">Both</option>
    </select>
      </div>
   
      <div>
        <p>What do you care most why buying stocks</p>
        <label for="re">
        <input type="radio" name="re" value="price" /> Price</label>
        <label for="re"><input type="radio" name="re">
          Brand</label>
      <label for="re"><input type="radio" name="re">
          Material</label>
      <label for="re"><input type="radio" name="re">
          Pattern</label>
     <label for="re"><input type="radio" name="re">
          Quanliy</label>
      </div>
      
      <div>
        <p>What type of material do you like?<span> thanks</span></p>
        <label>
          <input type="checkbox" value="cotton">Cotton</label>
       
          <label><input type="checkbox" value="poly">Poly</label>
        <label><input type="checkbox" value="bamboo">Bamboo</label>
         <label> <input type="checkbox" value="wollen">Wollen</label>
      </div>
          
      
      <div>
        <p>Pls. leave your suggestion for socks here. We will send a 40% coupon of socks to those with good idea.</p>
        <textarea
         class="textarea"
         name="comments"></textarea>
      
        </div> 
    
      <div >
      <button type="button" id="submit">
        Submit
      </button>
    </div>
     
      
    </form>
    
      
  </main>
  
  </body>
  
  
</html>

  :root{
     --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
  }

body{
  background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
  
}
  #title{
    margin:10px;
    text-align:center;
    color:gray;
  }
#description{
  font-style: italic;
  text-align:center;
  color:gray;
 }  

  #survey-form{
     background: var(--color-darkblue-alpha);
 width:60%;
  margin:auto;
  padding-top:20px;
  padding-left: 15%;
  border-radius: 0.25rem;
  border-size:10px;
  border-color:grey;
  border-style:dotted;
  
  }

div{
  
  margin:20px;
  color:white;
  width:70%
 
}  

  #name,#email,#number{
    font-color:white;
    text-align:left;
    padding: 0.375rem 0.75rem;
    width: 70%;
    
  }
 
label {
  text-align:left;
  font-size: 1.125rem;
  color:white;
  display:flex;
  margin:10px;

}

 
 
  
  #name-label{
    
  }
  #email-label{
    
  }
  #numbr-label{
    
  }
  #place{
   width:70%;
   text-align:left;
   padding: 0.375rem 0.75rem;
  }

  .textarea{
  min-height: 120px;
  width: 70%;
  }
  #submit{
   
  display: block;
  width: 70%;
  padding: 0.75rem;
  background: var(--color-green);
  color: white;
  border-radius: 2px;
  cursor: pointer;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.