Question

我收到此错误：

成功标准1.3.1信息和关系（A）

检查168：窗体缺少字段集和图例，以将多个电台分组   纽扣。

修复：向表单添加字段集和图例元素   每组单选按钮。

如何进行调整以清除此错误？

我应该在哪里添加字段集和图例？

<div id="content" class="container content">

<div class="headline">
  <h2>Transaction Type</h2>
</div>

<p><strong>Types Of Mail Packets:</strong> There are four types of mail packets that are based on the type of transaction.</p>

<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">

<div>
  <!---Label is here for placement of error message--->
  <label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
      <label for="Motor-Vehicle-Or-Travel-Trailer-Title">
            <input id="Motor-Vehicle-Or-Travel-Trailer-Title" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
            Motor Vehicle / Travel Trailer Title</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
      <label for="Mobile-Home">
            <input id="Mobile-Home" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
            Mobile Home</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
      <label for="Vessel">
            <input id="Vessel" type="radio" name="rgroup" value="BOAT/boat.cfm" />
            Vessel</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
      <label for="Duplicate-Or-Replacement-Title">
            <input id="Duplicate-Or-Replacement-Title" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
            Duplicate / Replacement Title</label>
        </div>
    </div>
</div>

<div>
    <button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>

Answer 1

看来OP布局正在使用Bootstrap，所以更改为<fieldset>的最佳标签是.form-group，<legend>始终是<fieldset>的第一个孩子。以下演示将所有<input type="radios">和<button>包装成一个<fieldset>。

对标记，类，位置等进行了一些其他更改，以使布局更具语义性，并且Bootstrap custom classes也增强了单选按钮的外观。注意：在更改中，第一个单选按钮具有required attribute，该Text适用于所有带有[name="rgroup"]的标签。如果用户尝试提交表单而不选择单选按钮，则会发生错误并中断发送数据。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>DMV Titles</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <main id="content" class="container content">

    <header class="headline">
      <h1>Transaction Type</h1>
    </header>

    <p class='lead'><small><strong>Types Of Mail Packets:</strong> There are four types of mail packets that are based on the type of transaction.</small></p>

    <form id="titleTypes" name="titleTypes" action="process.cfm" method="post">

      <header>
        <output for="rgroup" class="error" style="display:none;">Please choose one.</output>
      </header>

      <div class="form-row">
        <div class="col-lg-12">
          <fieldset class="form-group">
            <legend>Title Types</legend>
            <div class="custom-control custom-radio">
              <input id="motor" name="rgroup" class="custom-control-input" type="radio" value="MV/titleTypeMV.cfm" required>
              <label class="custom-control-label" for="motor">Motor Vehicle / Travel Trailer</label>
            </div>

            <div class="custom-control custom-radio">
              <input id="mobile" name="rgroup" class="custom-control-input" type="radio" value="MH/mobileHome.cfm">
              <label class="custom-control-label" for="mobile">Mobile Home</label>
            </div>

            <div class="custom-control custom-radio">
              <input id="boat" name="rgroup" class="custom-control-input" type="radio" value="BOAT/boat.cfm">
              <label class="custom-control-label" for="boat">Mobile Home</label>
            </div>

            <div class="custom-control custom-radio">
              <input id="dupe" name="rgroup" class="custom-control-input" type="radio" value="DUPL/duplicate.cfm">
              <label class="custom-control-label" for="dupe">Duplicate / Replacement Title</label>
            </div>

            <button class="btn btn-primary float-right" type="submit"><i></i>Next</button>
          </fieldset>

        </div>
      </div>
    </form>
  </main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

添加字段集和图例以分组多个单选按钮

1 个答案: