HTML+CSS——制作一个调查表格

目标：构建一个功能类似于 https://survey-form.freecodecamp.rocks 的应用程序

需求：

你应该有一个 id 为 title 的 h1 元素
你应该有一个 id 为 description 的 p 元素
你应该有一个 id 为 survey-form 的 form 元素
在表单元素内，你需要在 input 字段中输入你的名字，该字段的 id 为 name，type 为 text
在表单元素内，你需要在 input 字段中输入你的邮箱，该字段的 id 为 email
如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息
在表单中，你可以在 input 字段中输入一个数字，该字段的 id 为 number
数字输入不应接受非数字，或是阻止你输入它们，或是显示一个 HTML5 验证错误（取决于你的浏览器）。
如果你输入的数字超出了范围（使用 min 和 max 属性定义），你将会看见 HTML5 验证错误信息
表单中的名字、邮箱和数字输入框需有对应的包含描述输入框用途的 label 元素，id 应分别为 id="name-label"、id="email-label" 和 id="number-label"
在表单中的名字、邮箱和数字输入框中，你能看到各自的描述文字作为占位符
在表单元素内，你应该有一个 select 下拉元素， id 为 dropdown，它至少有两个选项
在表单元素内，你可以从至少两个单选按钮的组中选择一个选项，该选项使用 name 属性
在表单元素内，你可以从一系列复选框中选择几个字段，每个复选框都必须具有 value 属性
在表单元素内，你会有一个 textarea 以获取额外的评论
在表单元素内，你将收到一个按钮，其 id 为 submit，提交所有输入
完成需求并通过下面的所有测试来完成这个项目。赋予它你自己的个人风格。编程愉快！

注意：请在你的 HTML 中添加 <link rel="stylesheet" href="styles.css"> 以链接你的样式表并应用你的 CSS

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <div class="container">
<!-- Header goes here -->
    <header class="header">
      <h1 id="title">Survey Form</h1>
      <p id="description">Let us know how we can improve freeCodeCamp</p>
    </header>
<!-- Start of the survey -->
    <form id="survey-form">
<!-- First question: the name -->
      <div class="name">
      <label for="name" id="name-label">Name:</label>
      <input type="text" id="name" placeholder="Your full name"  required>
    </div>
<!-- Second question: the e-mail -->
    <div class="email">
      <label for="email" id="email-label">E-mail:</label>
      <input type="email" id="email" placeholder="your e-mail" required>
    </div>
<!-- Third question: the age -->
    <div class="number">
      <label for="number" id="number-label">Age:</label>
      <input type="number" id="number" min="18" max="99" placeholder="Your age">
    </div>
<!-- Fourth question: the job -->
      <div class="dropdown">
        <label for="occupation" id="occupation">What is your current occupation?
          <select name="occupation" id="dropdown">
            <option disabled selected value="Your role">Your role</option>
            <option value="student">Student</option>
            <option value="part-time-job">Part time job</option>
            <option value="full-time-job">Full time job</option>
            <option value="full-time-learner">Full time learner</option>
            <option value="Prefer-not-to-say">Prefer not to say</option>
          </select>
      </div>
<!-- Fifth question: recommendation -->
    <div class="recommendation">
      <label for="recommendation" id="recommendation">How likely are you to recommend our website to a friend?</label>
      <label for="Very likely"> <input id="very-likely" type=radio name="likely-unlikely" class="likely-unlikely" value="very-likely">Very likely </label>
      <label for="likely"> <input id="likely" type=radio name="likely-unlikely" class="likely-unlikely" value="likely">Likely </label>
      <label for="unlikely"> <input id="unlikely" type=radio name="likely-unlikely" class="likely-unlikely" value="unlikely">Unlikely </label>
      <label for="unsure"> <input id="unsure" type=radio name="likely-unlikely" class="likely-unlikely" value="unsure">Not sure </label>
    </div>
<!-- Sixth question: improvements -->
    <div class="improvements">
      <label for="improvements" id="improvements">What would you like to see improved?</label>
      <label for="front-end-projects"> <input id="front-end-projects" type="checkbox" class="improv" value="front-end-projects">Front-end projects</label>
      <label for="back-end-projects"> <input id="back-end-projects" type="checkbox" class="improv" value="back-end-projects">back-end projects</label>
      <label for="challenges"> <input id="challenges" type="checkbox" class='improv' value= "challenges">Challenges</label>
      <label for="additional-courses"> <input id="additional-courses" type="checkbox" class="improv" value="additional-courses">Additional courses</label>
    </div>
<!--Final question: textarea -->
  <div class="comments">
    <label id="comments-label" for="comments">Feel free to leave any comment or suggestion:</label>
    <textarea id="comments" class="input-textarea" name="comment" placeholder="comment"></textarea>
  </div>
<!-- Submit button -->
  <button type="submit" id="submit" value="submit">Submit</button>
    </form>

Style.CSS

body {
  width: 100%
  height: 100vh;
  margin: 0;
  background-color: #344e41;
  color: #dad7cd;
  font-family: "Poppins", open-sans;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

.container {
  width: 50vw;
  max-width: 600px;
  min-width: 400px;
  margin: 0 auto;
  padding-bottom: 2em;
}

label {
  display: block;
  margin: 0.25rem 0;
}

input, textarea, select {
  background-color: #a3b18a;
  width: 100%;
  min-height: 2em;
  border: #3a5a40;
}

.likely-unlikely {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

.improv {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

.recommendation, .improvements, .comments {
  margin-top: 20px;
}

button {
  display: block;
  width: 20%;
  background-color: #dad7cd;
  border-radius: 5px;
  border-color: #3a5a40;
}

HTML+CSS——制作一个调查表格

波波鱼

引用和评论

计算机组成原理

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

原生electron起步-从零到一完成构建和打包