Question

我尝试使用compturnon作为标签时出现错误，但它没有工作，任何人都可以让我知道它应该是什么？如果我说是有效，但我不确定这是否完全正确。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Fix This - Computer Repair Reporting</title>
    <meta content="width=device-width, maximum-scale=1, initial-scale=1" name="viewport">
    <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png" />
        <link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png" />
        <link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png" />
        <link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png" />
</head>
<body>
    <div id="container">
        <header><h1>Computer Repair Reporting</h1></header>
        <form action="http://webdevbasics.net/scripts/demo.php" method="post">
            <div>
                <p>There are several methods for reporting a problem at problem to ITS, the easiest way
                is the fill out the form below and submit it to ITS. If you need immediate assistance or are not able to describe the issue, please call <i>1-888-FIX-THIS.</i></p>
            </div>
            <div>
            <fieldset>
                <legend><strong>Personal Information</strong></legend>
            <div class="spacings">
                <label for="fullname">Full Name:</label>
                <input id="fullname" name="fullname" type="text" placeholder="First and last name" required>
            </div>
            <div class="spacings">
                <label for="email">Email:</label>
                <input id="email" name="email" type="email" placeholder="jsmith@gmail.com" required>
            </div>
            <div>
                <label for="phone">Phone Number:</label>
                <input id="phone" name="phone" type="tel" placeholder="(###) ###-####" required>
            </div>
            </fieldset>
            </div>
            <div>
            <fieldset>
                <legend><strong>Fix It Information</strong></legend>
            <div class="spacings">
                <label for="room">Select Your Room:</label>
                <select id="room" name="room" required>
                    <option disabled selected value="">
                        Choose a room
                    </option>
                    <option value="S308">
                        S308
                    </option>
                    <option value="S324">
                        S324
                    </option>
                    <option value="L2">
                        L2
                    </option>
                    <option value="ME201">
                        ME201
                    </option>
                    <option value="ME208">
                        ME208
                    </option>
                </select><br>
            </div>
            <div class="spacings">
                <label for="machinenum">Select Your Machine Number (1 - 15): </label>
                <input id="machinenum" name="machinenum" type="number" min="1" max="15" value="" placeholder="#" required><br>
            </div>
            <div class="spacings">
                <p>Does the computer turn on?</p>
                <input  id="yes" name="compturnon" type="radio" value="yes" required>
                <label for="yes">Yes&nbsp;&nbsp;</label>
                <input  id="no" name="compturnon" type="radio" value="no">
                <label for="no">No&nbsp;&nbsp;</label>
            </div>
            <div class="spacings">
                <label for="reportdate">Reporting Date:</label>
                <input id="reportdate" name="reportdate" type="date" required>
            </div>
            <div>
                <label for="message">Brief Description of Problem(s):</label><br>
                <textarea id="message" name="message" cols="50" rows="5" placeholder="Please indicate the problem(s) you are experiencing" required></textarea> 
            </div>
            </fieldset>
            </div>
            <div>
                <p>Please submit this form and we will attempt to get the issue fixed within 12 hours.</p>
            </div>
                <input type="submit" value="Fix me">
                <input type="reset" value="Reset">
        </form>
    </div>
        <footer>
        <small>&copy; 2016 Michael Manieri</small>
        </footer>
</body>
</html>

CSS

body, input[type=submit], input[type=reset] {
    background-color: #333333;
    color: #fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size:16px;
}

h1 {
    color:#E60957;
    font-size:35px;
    margin-bottom:30px;
    letter-spacing:1px;
    text-align: center;
}

input[type=submit], input[type=reset]{
    background:#E60957;
    border:2px solid #E60957;
    border-radius:15px;
    font-size:14px;
    padding:5px 15px;
}

input[type=submit]:hover, input[type=reset]:hover {
    background-color:#B73F69;
    border:none;
}

fieldset {
    border-color:#E60957;
    margin-bottom:25px;
    width:545px;
}

legend {
    color:#E60957;
    font-size:20px;
    margin-bottom:5px;
}

#container, footer {
    margin:25px auto;
    width:575px;
}

.spacings {
    margin-bottom:15px;
}

Answer 1

每MDN’s <label> docs：

for

与标签元素在同一文档中的可标记表单相关元素的ID。文档中第一个具有与for属性值匹配的ID的元素是此标签元素的标记控件。

只要for属性指向包含的控件元素，label元素就可以同时具有for属性和包含的控制元素。

虽然如果你想“标记”多个字段，你应该将它们包裹在<fieldset>中并使用<legend>。 E.g。

<fieldset class="spacings">
  <legend>Does the computer turn on</legend>

  <input id="yes" name="compturnon" type="radio" value="yes" required>
  <label for="yes">Yes</label>
  <input id="no" name="compturnon" type="radio" value="yes">
  <label for="no">No</label>
</fieldset>

Answer 2

首先，将第二个输入的值更改为no。

其次，将第一个label替换为fieldset / legend，并且由于您已经使用了字段集，因此该字段集没有边框并将您的图例颜色设置为黑色

fieldset.borderless {
  border: none;
  margin: 0;
  padding: 0;
}
fieldset.borderless legend {
  color: black;
  padding: 0;
}

<fieldset class="borderless">
  <legend>Does the computer turn on</legend>
  <input id="yes" name="compturnon" type="radio" value="yes" required>
  <label for="yes">Yes&nbsp;&nbsp;</label>
  <input id="no" name="compturnon" type="radio" value="no">
  <label for="no">No&nbsp;&nbsp;</label>
</fieldset>

这是原始代码，已更新

body,
input[type=submit],
input[type=reset] {
  background-color: #333333;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
h1 {
  color: #E60957;
  font-size: 35px;
  margin-bottom: 30px;
  letter-spacing: 1px;
  text-align: center;
}
input[type=submit],
input[type=reset] {
  background: #E60957;
  border: 2px solid #E60957;
  border-radius: 15px;
  font-size: 14px;
  padding: 5px 15px;
}
input[type=submit]:hover,
input[type=reset]:hover {
  background-color: #B73F69;
  border: none;
}
fieldset {
  border-color: #E60957;
  margin-bottom: 25px;
  width: 545px;
}
legend {
  color: #E60957;
  font-size: 20px;
  margin-bottom: 5px;
}
#container,
footer {
  margin: 25px auto;
  width: 575px;
}
.spacings {
  margin-bottom: 15px;
}

fieldset.borderless {
  border: none;
  margin: 0 0 15px 0;
  padding: 0;
}
fieldset.borderless legend {
  color: white;
  padding: 0;
  font-size: 16px;
}

<div id="container">
  <header>
    <h1>Computer Repair Reporting</h1>
  </header>
  <form action="http://webdevbasics.net/scripts/demo.php" method="post">
    <div>
      <p>There are several methods for reporting a problem at problem to ITS, the easiest way is the fill out the form below and submit it to ITS. If you need immediate assistance or are not able to describe the issue, please call <i>1-888-FIX-THIS.</i>
      </p>
    </div>
    <div>
      <fieldset>
        <legend><strong>Personal Information</strong>
        </legend>
        <div class="spacings">
          <label for="fullname">Full Name:</label>
          <input id="fullname" name="fullname" type="text" placeholder="First and last name" required>
        </div>
        <div class="spacings">
          <label for="email">Email:</label>
          <input id="email" name="email" type="email" placeholder="jsmith@gmail.com" required>
        </div>
        <div>
          <label for="phone">Phone Number:</label>
          <input id="phone" name="phone" type="tel" placeholder="(###) ###-####" required>
        </div>
      </fieldset>
    </div>
    <div>
      <fieldset>
        <legend><strong>Fix It Information</strong>
        </legend>
        <div class="spacings">
          <label for="room">Select Your Room:</label>
          <select id="room" name="room" required>
            <option disabled selected value="">
              Choose a room
            </option>
            <option value="S308">
              S308
            </option>
            <option value="S324">
              S324
            </option>
            <option value="L2">
              L2
            </option>
            <option value="ME201">
              ME201
            </option>
            <option value="ME208">
              ME208
            </option>
          </select>
          <br>
        </div>
        <div class="spacings">
          <label for="machinenum">Select Your Machine Number (1 - 15):</label>
          <input id="machinenum" name="machinenum" type="number" min="1" max="15" value="" placeholder="#" required>
          <br>
        </div>
        <fieldset class="spacings borderless">
          <legend>Does the computer turn on</legend>
          <input id="yes" name="compturnon" type="radio" value="yes" required>
          <label for="yes">Yes&nbsp;&nbsp;</label>
          <input id="no" name="compturnon" type="radio" value="no">
          <label for="no">No&nbsp;&nbsp;</label>
        </fieldset>
        <div class="spacings">
          <label for="reportdate">Reporting Date:</label>
          <input id="reportdate" name="reportdate" type="date" required>
        </div>
        <div>
          <label for="message">Brief Description of Problem(s):</label>
          <br>
          <textarea id="message" name="message" cols="50" rows="5" placeholder="Please indicate the problem(s) you are experiencing" required></textarea>
        </div>
      </fieldset>
    </div>
    <div>
      <p>Please submit this form and we will attempt to get the issue fixed within 12 hours.</p>
    </div>
    <input type="submit" value="Fix me">
    <input type="reset" value="Reset">
  </form>
</div>
<footer>
  <small>&copy; 2016 Michael Manieri</small>
</footer>

Answer 3

<div class="spacings">
     <span>Does the computer turn on?</span>
     <input  id="compturnon_yes" name="compturnon" type="radio" value="yes" />
     <label for="computernon_yes">Yes&nbsp;&nbsp;</label>
     <input id="computernon_no" name="compturnon" type="radio" value="yes" />
     <label for="computernon_no" name="compturnon" type="radio" value="no">No</label>
</div>

是正确使用“label”标签及其“for”属性的示例 - “for”属性用于指定标签适用的元素的ID;每个“for”属性make必须引用一个唯一的表单元素。

在您的情况下，您尚未定义此类元素。

有关详细信息，请参阅：https://www.w3.org/wiki/HTML/Elements/label

HTML：我会在＆＃34;＆＃34;的标签之间插入什么？

3 个答案:

`for`