制作一个调查表格

需求 1： 此 app 中应存在一个 id=”title” 的大小为 H1 的标题。

需求 2： 此 app 中应存在一段 id=”description” 的大小为 P 的短小的描述。

需求 3： 此 app 中应存在一个 id=”survey-form” 的 form 元素。

需求 4： 在表单元素内，应存在 id=”name” 的输入框（必填项），以便用户输入姓名。

需求 5： 在表单元素内，应存在 id=”email” 的输入框（必填项），以便用户输入邮箱。

需求 6： 如果用户输入了格式不正确的邮箱，则应出现来自 HTML5 表单数据校验的错误信息。

需求 7： 在表单内，用户应可以在 id=”number” 的输入框中输入数字。

需求 8： 如果用户在数字输入框内输入非数字内容，则应出现来自 HTML5 表单数据校验的错误信息。

需求 9： 如果用户输入的数字超出了使用 min 和 max 属性定义的范围，则应出现来自 HTML5 表单数据校验的错误信息。

需求 10： 表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的标签。这些标签的 id 应分别为 id=”name-label”、id=”email-label” 和 id=”number-label”。

需求 11： 表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符。

需求 12： 在表单元素内，应存在一个 id=”dropdown” 的下拉列表，用户可以从中选取一个选项。

需求 13： 在表单元素内，应至少存在一组单选按钮，用户可以从中选取一个选项。 每组应使用 name 属性进行分组。

需求 14： 在表单元素内，应存在几个复选框，且每个复选框都应有 value 属性。

需求 15： 在表单元素的最后，应存在一个 textarea 元素，以便用户输入额外的批注。

需求 16： 在表单元素内，应存在一个 id=”submit” 的按钮，以便用户提交表单。

解决

需求 4、5：

使用required属性 在标签内加入required

需求 6：

html5验证邮箱格式

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/email

type=”email”

需求 8：

type=”number”

需求 9：

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number

min=”10” max=”100

需求 11：

占位符：placeholder属性

需求 12：

select属性

<select id="dropdown" name="role" class="form-control" required="">
        <option disabled="" selected="" value="">Select current role</option>
        <option value="student">Student</option>
        <option value="job">Full Time Job</option>
        <option value="learner">Full Time Learner</option>
        <option value="preferNo">Prefer not to say</option>
        <option value="other">Other</option>
</select>

需求 13：

<div>
  <p>Would you recommend freeCodeCamp to a friend?</p>
  <label>
    <input name = "user-recommend" type="radio" value="definitely">
      Definitely
  </label>
  <label>
    <input name = "user-recommend" type="radio" value="of-course">
      Of course
  </label>
</div>

通过给两个input命名，可以在选中一个radio按钮时，取消选中另一个按钮。

需求 14：

<div>
  <p>What would you like to see improved?</p>
  <label>
    <input type="checkbox" value="Front-end Projects">
     Front-end Projects
  </label>
  <label>
    <input type="checkbox" value="end Projects">
     end Projects
  </label>
</div>

1.多个checkbox

2.每个checkbox都要有数值

链接

codepen