Question

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

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

问题是，我希望首先按下后退按钮然后再按下确认按钮。像这样：

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

这是我的HTML：

＆＃13;

.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;
}

＆＃13;

<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="email@gmail.com">TestingRenzo</option>
					<option value="email@gmail.com">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>

＆＃13;

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 {
  ...
}

Answer 2

你的HTML有点不对劲。尝试最小化DIV标签，如果可以的话，您将了解问题。同样在提交按钮DIV标签中，如果我没有错，你提到了错误的引导类。

Answer 3

您可以使用float:right来更改按钮的位置。这将使您的DOM结构保持完整。

        <div class="form__confirmation" type="submit" name="submit" style="float:right;" >
            <button>Confirm Information</button>
        </div>
    </form>
    <a href="home.php">
        <div class="form__confirmation2" style="float:right;">
            <button>Back</button>
        </div>
    </a>

这是整个代码片段。

<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="email@gmail.com">TestingRenzo</option>
                <option value="email@gmail.com">TestingPaul</option>
                </select>
            </div>
        </div>
    </div>
    <!-- CHANGED BUTTON TAGS -->
    <div class="form__confirmation" type="submit" name="submit" style="float:right;" >
        <button>Confirm Information</button>
    </div>
    </form>
    <a href="home.php">
        <div class="form__confirmation2" style="float:right;">
            <button>Back</button>
        </div>
    </a>
</div>

具有相同功能的不同按钮

3 个答案: