API tools faq
paste
sylviaapr

HTML Survey Form

sylviaapr
Jul 18th, 2022
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Savage Dance Camp Survey Form</title>
  5.     <link rel="stylesheet" href="Survey Form.css">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   </head>
  8.   <body>
  9.     <header>
  10.       <h1 id="title"><em>Savage Dance Camp</em> Survey Form</h1>
  11.       <p id="description">Your feedback is important to us.</p>
  12.     </header>
  13.     <main>
  14.       <form id="survey-form">
  15.         <div class="form-group">
  16.           <label id="name-label" for="name">Name</label>
  17.           <input
  18.            type="text"
  19.            name="name"
  20.            id="name"
  21.            class="form-control"
  22.            placeholder="Enter your name"
  23.            required
  24.          />
  25.         </div>
  26.         <div class="form-group">
  27.           <label id="email-label" for="email">Email</label>
  28.           <input
  29.            type="email"
  30.            name="email"
  31.            id="email"
  32.            class="form-control"
  33.            placeholder="Enter your email"
  34.            required
  35.          />
  36.         </div>
  37.         <div class="form-group">
  38.           <label id="number-label" for="number">Number</label>
  39.           <input
  40.            type="number"
  41.            name="number"
  42.            id="number"        
  43.            min="4"
  44.            max="60"
  45.            class="form-control"
  46.            placeholder="Age"
  47.          />
  48.         </div>
  49.         <div>
  50.           <p>Role</p>
  51.           <select id="dropdown" name="role" required>
  52.             <option disabled selected value>Select Current Role</option>
  53.             <option value="student">Student</option>
  54.             <option value="employed">Employed for wages</option>
  55.             <option value="selfEmployed">Self-employed</option>
  56.             <option value="lookingWork">Out of work and looking for work</option>
  57.             <option value="notLooking">Out of work but not looking for work</option>
  58.             <option value="retired">Retired</option>
  59.             <option value="unableWork">Unable to work</option>
  60.             <option value="preferNo">Prefer not to say</option>
  61.           </select>
  62.         </div>
  63.         <div>
  64.           <P>How competent are you in dancing?</P>
  65.           <label>
  66.             <input
  67.              name="user-competent"
  68.              value="basic"
  69.              type="radio"
  70.              checked
  71.            />Basic
  72.           </label>
  73.           <label>
  74.             <input
  75.              name="user-competent"
  76.              value="intermediate"
  77.              type="radio"
  78.              checked
  79.              />Intermediate
  80.           </label>
  81.           <label>
  82.             <input
  83.              name="user-competent"
  84.              value="advanced"
  85.              type="radio"
  86.              checked
  87.            />Advanced
  88.           </label>  
  89.           <label>
  90.             <input
  91.              name="user-competent"
  92.              value="expert"
  93.              type="radio"
  94.              checked
  95.            />Expert
  96.           </label>
  97.         </div>
  98.         <div>
  99.           <p>How long have you been dancing?</p>
  100.           <select id="yoe" name="yoe" required>
  101.             <option disabled selected value>Select an Option</option>
  102.             <option value="lessaYear"><1year</option>
  103.             <option value="3years">1-3 years</option>
  104.             <option value="5years">4-5 years</option>
  105.             <option value="10years">6-10 years</option>
  106.             <option value="more10Years">10+ years</option>
  107.           </select>
  108.         </div>
  109.         <div>
  110.           <p>Which type of class do you prefer?</p>
  111.           <label>
  112.             <input
  113.              name="prefer"
  114.              value="ballet"
  115.              type="checkbox"
  116.            />Ballet
  117.           </label>
  118.           <label>
  119.             <input
  120.            name="prefer"
  121.            value="contemporary"
  122.            type="checkbox"
  123.            />Contemporary
  124.           </label>
  125.           <label>
  126.             <input
  127.            name="prefer"
  128.            value="hipHop"
  129.            type="checkbox"  
  130.            />Hip hop
  131.           </label>
  132.           <label>
  133.             <input
  134.            name="prefer"
  135.            value="urban"
  136.            type="checkbox"
  137.            />Urban
  138.           </label>
  139.           <label>
  140.             <input
  141.              name="prefer"
  142.              value="Modern"
  143.              type="checkbox"
  144.            />Modern
  145.           </label>
  146.         </div>
  147.         <div>
  148.           <p>Tell us what you love about <em>Savage Dance Camp</em> and what we could do to be better.</p>
  149.           <textarea
  150.            id="suggestions"
  151.            name="suggestions"
  152.            placeholder="Enter your suggestion here">
  153.           </textarea>
  154.         </div>
  155.         <div>
  156.           <button id="submit" type="submit">Submit</button>
  157.         </div>
  158.       </form>
  159.     </main>
  160.   </body>
  161. </html>
  162.  
  163.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!