回顾:表单 #2
本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 47 课,共 60 课。
挑战
简单我们来制作一个简单的注册表单,就像下面图片中的表单一样!

需要包含以下内容:
- 用
<form>标签将所有内容包在一起。 - 一个用户名字段,包含标签和文本输入框。标签应显示
"Username:",并使用 for="username"。输入框应包含id="username"、name="username"、type="text",占位文本为"Enter your username"。 - 一个电子邮件字段,包含标签和电子邮件输入框。标签应显示
"Email:",并使用for="email"。输入框应包含id="email"、name="email"、type="email",占位文本为"Enter your email"。 - 一个密码字段,包含标签和密码输入框。标签应显示
"Password:",并使用for="userpassword"。输入框应包含id="userpassword"、name="userpassword"、type="password",占位文本为"Enter your password"。 - 一组单选按钮,让用户选择类型:
"Student"或"Teacher"。在单选按钮上方添加一个段落或标题,显示"User Type:"。"Student"单选按钮应包含id="student"、name="usertype"、value="student",并使用显示"Student"的标签。"Teacher"单选按钮应包含id="teacher"、name="usertype"、value="teacher",并使用显示"Teacher"的标签。请记住:两个单选按钮必须使用相同的 name 属性("usertype"),这样一次只能选中一个。 - 一组复选框,让用户选择感兴趣的内容:
"Sports"、"Music"和"Technology"。在复选框上方添加一个段落或标题,显示"Interests:"。"Sports"复选框应包含id="sports"、name="interests"、value="sports",并使用显示"Sports"的标签。"Music"复选框应包含id="music"、name="interests"、value="music",并使用显示"Music"的标签。"Technology"复选框应包含id="technology"、name="interests"、value="technology",并使用显示"Technology"的标签。请记住:所有复选框都应使用相同的 name 属性("interests"),因为它们属于同一组。 - 在表单末尾添加一个 Sign Up 按钮和一个 Clear 按钮。Sign Up 按钮应包含
type="submit",Clear 按钮应包含type="reset"。Sign Up 按钮应显示文本 "Sign Up",Clear 按钮应显示文本 “Clear”。
请确保添加恰当的标签和标题,让用户更方便地使用!
请记住,输入框应包含以下重要属性:
type、id、name和value。
亲手试试
<!DOCTYPE html>
<html>
<body>
<!-- 在这里编写代码 -->
</body>
</html>基础知识中的所有课
自己练习: Web 在线编辑器