不同的按钮具有相同的功能答案

【问题标题】：Different buttons having the same function不同的按钮具有相同的功能
【发布时间】：2018-03-03 03:50:56
【问题描述】：

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

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

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

只有当后退按钮在表单内时，我才能这样做。正如我所说，我这样做时会遇到问题。

这是我的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="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>

【问题讨论】：

您的 html 非常无效。对于初学者，您不能在锚点 (<a>) 标记内使用 <button>，也不能在 type="submit" name="submit" 中使用 <div> - 这仅适用于 <input> 或 <button>。修复您的 HTML 可能会解决您的问题。

标签： html css forms button

【解决方案1】：

您可以使用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>

【讨论】：

非常感谢。我可以拥有整个代码 sn-p 吗？我也想试试这个方法。
没问题。直到现在我还没有注意到你使用了引导程序，所以你可能不需要包装器，因为 .container 是一个包装器类。

【解决方案2】：

您的 HTML 有点错误。如果可以的话，尽量减少 DIV 标签，然后你就会明白这个问题。同样在提交按钮 DIV 标记中，如果我没记错的话，您提到了错误的引导类。

【讨论】：

【解决方案3】：

尝试更改此 [非常无效的] 代码：

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

【讨论】：

我才意识到我的代码确实非常无效，哈哈。太感谢了！还有一个问题，我的后退按钮有下划线，不知道为什么。
将text-decoration: none 添加到您的按钮样式中，因为后退按钮只是一个普通的超链接，看起来像一个按钮。