响应式网页设计——制作一个调查表格

用户9152506121091
354 阅读5分钟

制作一个调查表格

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

需求：

  1. 你应该有一个 id 为 title 的 h1 元素
  2. 你应该有一个 id 为 description 的 p 元素
  3. 你应该有一个 id 为 survey-form 的 form 元素
  4. 在表单元素内，你需要在 input 字段中输入你的名字，该字段的 id 为 name，type 为 text
  5. 在表单元素内，你需要在 input 字段中输入你的邮箱，该字段的 id 为 email
  6. 如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息
  7. 在表单中，你可以在 input 字段中输入一个数字，该字段的 id 为 number
  8. 数字输入不应接受非数字，或是阻止你输入它们，或是显示一个 HTML5 验证错误（取决于你的浏览器）。
  9. 如果你输入的数字超出了范围（使用 min 和 max 属性定义），你将会看见 HTML5 验证错误信息
  10. 表单中的名字、邮箱和数字输入框需有对应的包含描述输入框用途的 label 元素，id 应分别为 id="name-label"、id="email-label" 和 id="number-label"
  11. 在表单中的名字、邮箱和数字输入框中，你能看到各自的描述文字作为占位符
  12. 在表单元素内， 你应该有一个 select 下拉元素， id 为 dropdown，它至少有两个选项
  13. 在表单元素内， 你可以从至少两个单选按钮的组中选择一个选项，该选项使用 name 属性
  14. 在表单元素内，你可以从一系列复选框中选择几个字段，每个复选框都必须具有 value 属性
  15. 在表单元素内，你会有一个 textarea 以获取额外的评论
  16. 在表单元素内，你将收到一个按钮，其 id 为 submit，提交所有输入

完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！

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

测试

  • 等待中:你应该有一个 id 为 title 的 h1 元素。
  • 等待中:你的 #title 元素不应为空。
  • 等待中:你应该有一个 id 为 description 的 p 元素。
  • 等待中:你的 #description 不应为空。
  • 等待中:你应该有一个 id 为 survey-form 的 form 元素。
  • 等待中:你应该有一个 id 为 name 的 input 元素。
  • 等待中:你的 #name 元素应该具有 type 为 text。
  • 等待中:你的 #name 元素应该需要输入。
  • 等待中:你的 #name 元素应该是 #survey-form 元素的子元素。
  • 等待中:你应该有一个 id 为 email 的 input 元素。
  • 等待中:你的 #email 元素应该具有 type 为 email。
  • 等待中:你的 #email 元素应该需要输入。
  • 等待中:你的 #email 元素应该是 #survey-form 元素的子元素。
  • 等待中:你应该有一个 id 为 number 的 input 元素。
  • 等待中:你的 #number 元素应该是 #survey-form 元素的子元素。
  • 等待中:你的 #number 元素应该具有 type 为 number。
  • 等待中:你的 #number 应该有一个值为数字的 min 属性。
  • 等待中:你的 #number 应该有一个值为数字的 max 属性。
  • 等待中:你应该有一个 id 为 name-label 的 label 元素。
  • 等待中:你应该有一个 id 为 email-label 的 label 元素。
  • 等待中:你应该有一个 id 为 number-label 的 label 元素。
  • 等待中:你的 #name-label 应包含描述输入的文本。
  • 等待中:你的 #email-label 应包含描述输入的文本。
  • 等待中:你的 #number-label 应该包含描述输入的文本。
  • 等待中:你的 #name-label 元素应该是 #survey-form 元素的子元素。
  • 等待中:你的 #email-label 元素应该是 #survey-form 元素的子元素。
  • 等待中:你的 #number-label 元素应该是 #survey-form 元素的子元素。
  • 等待中:你的 #name 元素应该有 placeholder 属性与占位符文本。
  • 等待中:你的 #email 元素应该有 placeholder 属性与占位符文本。
  • 等待中:你的 #number 元素应该有 placeholder 属性与占位符文本。
  • 等待中:你应该有一个 id 为 dropdown 的 select 元素。
  • 等待中:你的 #dropdown 应该至少有两个可选择（未禁用）option 元素。
  • 等待中:你的 #dropdown 元素应该是 #survey-form 元素的子元素。
  • 等待中:你应该有至少两个 input 元素，type 为 radio（单选按钮）。
  • 等待中:你至少应该有两个单选按钮，是 #survey-form 的子元素。
  • 等待中:你所有的单选按钮都应该有一个 value 属性和值。
  • 等待中:你所有的单选按钮都应该有一个 name 属性和值。
  • 等待中:每个单选按钮组应至少有 2 个单选按钮。
  • 等待中:你应该至少有两个 input 元素，type 为 checkbox（复选框），它们是 #survey-form 的子元素。
  • 等待中:你在 #survey-form 中的所有复选框都应该有 value 属性和值。
  • 等待中:你至少应该有一个 textarea 元素，它是 #survey-form 的子元素。
  • 等待中:你应该有一个 id 为 submit 的 input 或 button 元素。
  • 等待中:你的 #submit 元素应该具有 type 为 submit。
  • 等待中:你的 #submit 元素应该是 #survey-form 元素的子元素。
<!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>
      <!--<input type="checkbox">是多选框，嵌入到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>
    ```

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;
}
avatar
文章
阅读
粉丝