技能测试：表单和按钮 - Web 开发学习

表单和按钮 1

这项任务会以一个温和的方式开始，要求您创建两个 <input> 元素，分别用于用户的 ID 和密码，并附带一个提交按钮。

完成任务

为用户 ID 和密码创建合适的输入框。
您还应该在语义上将它们与文本标签关联起来。
在剩余的列表项中创建一个提交按钮，按钮文本为“登录”。

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

html

<form>
  <ul>
    <li>User ID</li>
    <li>Password</li>
    <li></li>
  </ul>
</form>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<form>
  <ul>
    <li>
      <label for="uid">User ID</label>
      <input type="text" id="uid" name="uid" />
    </li>
    <li>
      <label for="pwd">Password</label>
      <input type="password" id="pwd" name="pwd" />
    </li>
    <li>
      <button>Log in</button>
    </li>
  </ul>
</form>

表单和按钮 2

下一个任务要求您根据提供的文本标签创建一组可用的复选框和单选按钮。

完成任务

将第一个 <fieldset> 的内容转换为一组单选按钮——您一次只能选择一个马的角色。
设置使第一个单选按钮在页面加载时即被选中。
将第二个 <fieldset> 的内容转换为一组复选框。
添加您自己制作的几个额外的热狗选项。

html

<form>
  <fieldset>
    <legend>Who is your favorite pony?</legend>
    <ul>
      <li>
        <label for="pinkie">Pinkie Pie</label>
      </li>
      <li>
        <label for="rainbow">Rainbow Dash</label>
      </li>
      <li>
        <label for="twilight">Twilight Sparkle</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Hotdog preferences</legend>
    <ul>
      <li>
        <label for="vegan">Vegan</label>
      </li>
      <li>
        <label for="onions">Onions</label>
      </li>
    </ul>
  </fieldset>
  <button>Submit</button>
</form>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<form>
  <fieldset>
    <legend>Who is your favorite pony?</legend>
    <ul>
      <li>
        <label for="pinkie">Pinkie Pie</label>
        <input type="radio" id="pinkie" name="pony" value="pinkie" checked />
      </li>
      <li>
        <label for="rainbow">Rainbow Dash</label>
        <input type="radio" id="rainbow" name="pony" value="rainbow" />
      </li>
      <li>
        <label for="twilight">Twilight Sparkle</label>
        <input type="radio" id="twilight" name="pony" value="twilight" />
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Hotdog preferences</legend>
    <ul>
      <li>
        <label for="vegan">Vegan</label>
        <input type="checkbox" id="vegan" name="hotdog" value="vegan" />
      </li>
      <li>
        <label for="onions">Onions</label>
        <input type="checkbox" id="onions" name="hotdog" value="onions" />
      </li>
      <li>
        <label for="mustard">Mustard</label>
        <input type="checkbox" id="mustard" name="hotdog" value="mustard" />
      </li>

      <li>
        <label for="ketchup">Ketchup</label>
        <input type="checkbox" id="ketchup" name="hotdog" value="ketchup" />
      </li>
    </ul>
  </fieldset>
  <button>Submit</button>
</form>

表单和按钮 3

在此任务中，您将探索一些更具体的输入类型。我们希望您为用户更新以下信息的详细信息创建合适的输入框：

电子邮件
网站
电话号码
喜欢的颜色

html

<form>
  <h2>Edit your preferences</h2>
  <ul>
    <li>
      <label for="email">Email</label>
    </li>
    <li>
      <label for="website">Website</label>
    </li>
    <li>
      <label for="phone">Phone number</label>
    </li>
    <li>
      <label for="fave-color">Favorite color</label>
    </li>
    <li>
      <button>Update preferences</button>
    </li>
  </ul>
</form>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<form>
  <h2>Edit your preferences</h2>
  <ul>
    <li>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" />
    </li>
    <li>
      <label for="website">Website</label>
      <input type="url" id="website" name="website" />
    </li>
    <li>
      <label for="phone">Phone number</label>
      <input type="tel" id="phone" name="phone" />
    </li>
    <li>
      <label for="fave-color">Favorite color</label>
      <input type="color" id="fave-color" name="fave-color" />
    </li>
    <li>
      <button>Update preferences</button>
    </li>
  </ul>
</form>

表单和按钮 4

现在是时候尝试实现一个下拉选择菜单了，让用户可以从提供的选项中选择他们喜欢的食物。

完成任务

创建基本的 select 框结构。
在语义上将其与提供的“食物”标签关联起来。
在列表中，将选项分为 2 个子组——“主菜”和“小吃”。

html

<form>
  <ul>
    <li>
      <label for="food">Pick your favorite food:</label>

      Salad Curry Pizza Fajitas Biscuits Crisps Fruit Breadsticks
    </li>
    <li>
      <button>Submit choice</button>
    </li>
  </ul>
</form>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<form>
  <ul>
    <li>
      <label for="food">Pick your favorite food:</label>
      <select name="food" id="food">
        <optgroup label="mains">
          <option>Salad</option>
          <option>Curry</option>
          <option>Pizza</option>
          <option>Fajitas</option>
        </optgroup>
        <optgroup label="snacks">
          <option>Biscuits</option>
          <option>Crisps</option>
          <option>Fruit</option>
          <option>Breadsticks</option>
        </optgroup>
      </select>
    </li>
    <li>
      <button>Submit choice</button>
    </li>
  </ul>
</form>

表单和按钮 5

在此任务中，我们希望您构建提供的表单功能。

完成任务

将前两个和后两个表单字段分成两个不同的容器，每个容器都有一个描述性的图例（前两个使用“个人详细信息”，后两个使用“评论信息”）。
使用适当的元素标记每个文本标签，使其在语义上与其各自的表单字段相关联。
在标签/字段对周围添加一组合适的结构元素以将它们分开。

html

<form>
  Name:
  <input type="text" id="name" name="name" />

  Age:
  <input type="number" id="age" name="age" />

  Comment:
  <input type="text" id="comment" name="comment" />

  Email:
  <input type="email" id="email" name="email" />
</form>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<form>
  <fieldset>
    <legend>Personal details</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
      </li>
      <li>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" />
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Comment information</legend>
    <ul>
      <li>
        <label for="comment">Comment:</label>
        <input type="text" id="comment" name="comment" />
      </li>
      <li>
        <label for="email">Email (include if you want a reply):</label>
        <input type="email" id="email" name="email" />
      </li>
    </ul>
  </fieldset>
</form>

表单和按钮 6

在此任务中，我们提供了一个简单的支持查询表单，并希望您为其添加一些验证功能。此任务需要一些我们未在“HTML 中的表单和按钮”文章中教授的知识，因此您可能需要在其他地方进行一些研究。

完成任务

在提交表单之前，所有输入字段都必须填写完整。
更改“电子邮件地址”和“电话号码”字段的类型，以便浏览器应用更适合所要求数据的更具体的验证。
为“用户名”字段设置长度要求，介于 5 到 20 个字符之间；为“电话号码”字段设置最大长度为 15 个字符；为“评论”字段设置最大长度为 200 个字符。

尝试提交您的表单——在满足上述约束条件之前，它应该拒绝提交，并显示适当的错误消息。

html

<form>
  <h2>Enter your support query</h2>
  <ul>
    <li>
      <label for="uname">User name:</label>
      <input type="text" name="uname" id="uname" />
    </li>
    <li>
      <label for="email">Email address:</label>
      <input type="text" name="email" id="email" />
    </li>
    <li>
      <label for="phone">Phone number:</label>
      <input type="text" name="phone" id="phone" />
    </li>
    <li>
      <label for="comment">Comment:</label>
      <textarea name="comment" id="comment"> </textarea>
    </li>
    <li>
      <button>Submit comment</button>
    </li>
  </ul>
</form>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<form>
  <h2>Enter your support query</h2>
  <ul>
    <li>
      <label for="uname">User name:</label>
      <input
        type="text"
        name="uname"
        id="uname"
        required
        minlength="5"
        maxlength="20" />
    </li>
    <li>
      <label for="email">Email address:</label>
      <input type="email" name="email" id="email" required />
    </li>
    <li>
      <label for="phone">Phone number:</label>
      <input type="tel" name="phone" id="phone" required maxlength="15" />
    </li>
    <li>
      <label for="comment">Comment:</label>
      <textarea name="comment" id="comment" required maxlength="200"></textarea>
    </li>
    <li>
      <button>Submit comment</button>
    </li>
  </ul>
</form>

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025 年 10 月 13 日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题