Mibby Mibby - 1 month ago 9
HTML Question

HTML: What would I put in between for the label for""

I'm getting an error as I tried using compturnon as the label for, but it didn't work can anyone let me know what it should be? If I put yes it works but I'm not sure if that's totally correct.

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

First off, change the second input's value to no.

Second, replace the first label with a fieldset/legend, and since you used a fieldset already, this one does not have a border and set your legend color back to black

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>

Here is you original code, updated

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>