html - 不同的按钮具有相同的功能

Question

我有这个后退和确认按钮。问题是，当我单击后退按钮时，它会确认表单。基本上我的后退和确认按钮具有相同的功能。

我尝试将后退按钮放在外面，效果很好。问题是它看起来像这样:

问题是我希望先返回后退按钮，然后再选择确认按钮。像这样:

只有当后退按钮位于表单内时，我才能执行此操作。正如我所说，当我这样做时会遇到问题。

这是我的 html:

.form__confirmation,
.form__confirmation2 {
  padding: 0px 0px;
  display: inline-block;
}

button {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  background-color: #011f4b;
  border: 1px solid #DADDE8;
  color: #fff;
  padding: 18px;
  border-radius: 5px;
  outline: none;
  -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  left: 330px;
  margin-bottom: 20px;
}

button:hover {
  background-color: #1293e1;
}

button:active {
  background-color: #1083c8;
}

<div class="container">
  <div class="card">
    <div class="form__name" style="font-family: Questrial; ">
      Leave Application Form
    </div>
    <div class="time__container">
      <div class="section">
        <div class="box">
          1
        </div><span>Date &amp; Time</span>
      </div>
      <form action="form-to-email.php" class="form__time" method="post">
        <div class="date">
          <label for="date">From</label> <input id="date" type="date" name="datefrom" required>
        </div>
        &nbsp; &nbsp; &nbsp;
        <div class="date">
          <label for="date">To</label> <input id="date" type="date" name="dateto" required>
        </div>
        <div class="timezone">
          <label for="timezone"></label>
          </select>
        </div>
    </div>
    <div class="message__container">
      <div class="section">
        <div class="box">
          2

        </div><span>Message</span>
      </div>
      <textarea cols="50" rows="5" name="message" required></textarea>
    </div>
    <div class="contact__container">
      <div class="section">
        <div class="box">
          3

        </div><span>Contact Information</span>
      </div>
      <div class="form__contact">
        <div class="cname">
          <label for="cname">Name</label> <input name="name" type="text" required>
        </div>
        <div class="cnum">
          <label for="cnum">Phone Number</label> <input id="cnum" type="text" name="phoneno" required>
        </div>
        <div class="email">
          <label for="cemail">Email</label> <input id="cemail" name="email" required>
        </div>
      </div>
    </div>
    <div class="contact__container">
      <div class="section">
        <div class="box">
          4

        </div><span>Send to</span>
      </div>
      <div class="form__contact">
        <div class="cname">
          <label for="cname">Manager</label> <select name="emailTo" required>
					<option value=""></option>
					<option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c49414d45406c4b414d4540024f4341" rel="noreferrer noopener nofollow">[email protected]</a>">TestingRenzo</option>
					<option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c7cfc3cbcee2c5cfc3cbce8cc1cdcf" rel="noreferrer noopener nofollow">[email protected]</a>">TestingPaul</option>
					</select>
        </div>
      </div>
    </div>
    <a href="home.php">
      <div class="form__confirmation2">
        <button>Back</button>
      </div>
    </a>
    <div class="form__confirmation" type="submit" name="submit">
      <button>Confirm Information</button>
    </div>
    </form>
  </div>
</div>

Answer 1

尝试更改此[极其无效]代码:

<a href="home.php">
  <div class="form__confirmation2">
    <button>Back</button>
  </div>
</a>
<div class="form__confirmation" type="submit" name="submit">
  <button>Confirm Information</button>
</div>

改为此[有效]版本:

<div class="form__confirmation2">
  <a class="button" href="home.php">Back</a>
</div>
<div class="form__confirmation">
  <button type="submit" name="submit">Confirm Information</button>
</div>

并将 .button 类添加到您的 CSS 中:

button,
.button {
  ...
}
button:hover,
.button:hover {
  ...
}
button:active,
.button:active {
  ...
}