制作一个调查表格
Willem Zhang Lv5

需求 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属性

1
2
3
4
5
6
7
8
<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:

1
2
3
4
5
6
7
8
9
10
11
<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:

1
2
3
4
5
6
7
8
9
10
11
<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

  • Post title:制作一个调查表格
  • Post author:Willem Zhang
  • Create time:2021-03-26 06:00:24
  • Post link:https://ataraxia.top/2021/03/25/制作一个调查表格/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments