Menu
CoddyTech

回顾:表单 #2

本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 47 课,共 60 课。

challenge icon

挑战

简单

我们来制作一个简单的注册表单,就像下面图片中的表单一样!

需要包含以下内容:

  1. 用 <form> 标签将所有内容包在一起。
  2. 一个用户名字段,包含标签和文本输入框。标签应显示 "Username:",并使用 for="username"。输入框应包含 id="username"、name="username"、type="text",占位文本为 "Enter your username"。
  3. 一个电子邮件字段,包含标签和电子邮件输入框。标签应显示 "Email:",并使用 for="email"。输入框应包含 id="email"、name="email"、type="email",占位文本为 "Enter your email"。
  4. 一个密码字段,包含标签和密码输入框。标签应显示 "Password:",并使用 for="userpassword"。输入框应包含 id="userpassword"、name="userpassword"、type="password",占位文本为 "Enter your password"。
  5. 一组单选按钮,让用户选择类型:"Student" 或 "Teacher"。在单选按钮上方添加一个段落或标题,显示 "User Type:"。"Student" 单选按钮应包含 id="student"、name="usertype"、value="student",并使用显示 "Student" 的标签。"Teacher" 单选按钮应包含 id="teacher"、name="usertype"、value="teacher",并使用显示 "Teacher" 的标签。请记住:两个单选按钮必须使用相同的 name 属性("usertype"),这样一次只能选中一个。
  6. 一组复选框,让用户选择感兴趣的内容:"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"),因为它们属于同一组。
  7. 在表单末尾添加一个 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 在线编辑器