如何在提交按钮内制作链接？

Posted 2023-03-06

技术标签:

【中文标题】如何在提交按钮内制作链接？【英文标题】：how to make link inside of submit button? 【发布时间】：2020-12-15 02:24:00 【问题描述】：

所以对于我正在制作的网站，我创建了一个联系我页面并有一个联系我表格。我想通过将用户带到另一个页面来制作一个按钮，让用户认为他们已经提交了表单（这是一个学校项目，我仅限于 html、css 和 javascript）。我让它部分工作，因为它只在按钮模糊时工作。我希望它在按钮不模糊时工作。这是我的页面代码：

const checkbox = document.querySelector('.my-form input[id="terms"]');
const btns = document.querySelectorAll(".my-form button");
const image = document.querySelector('.image');
const hover = document.querySelector('.hover');
const modal = document.querySelector('.modal');
const close = document.querySelector('.close');

checkbox.addEventListener("change", function() 

  const checked = this.checked;
  for (const btn of btns) 
    checked ? (btn.disabled = false) : (btn.disabled = true);
  
);

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

.topnav 
  background-color: #333;
  overflow: hidden;


/* Style the links inside the navigation bar */
.topnav a 
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 125.19px;
  text-decoration: none;
  font-size: 17px;



/* Change the color of links on hover */
.topnav a:hover 
  background-color: #ddd;
  color: black;


/* Add an active class to highlight the current page */
.topnav a.active 
  background-color: #4CAF50;
  color: white;


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon 
  display: none;

@media screen and (max-width: 600px) 
  .topnav a:not(:first-child) display: none;
  .topnav a.icon 
    float: right;
    display: block;
  


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) 
  .topnav.responsive position: relative;
  .topnav.responsive a.icon 
    position: absolute;
    right: 0;
    top: 0;
  
  .topnav.responsive a 
    float: none;
    display: block;
    text-align: left;
  



/* Links inside the navbar */
.topnav a 
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;

  text-decoration: none;


/* The dropdown container */
.dropdown 
  float: left;
  overflow: hidden;


/* Dropdown button */
.dropdown .dropbtn 
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 126.4px;
  background-color: inherit;



.box 
  width: 1100px;
  padding: 10px;
  border : 5px solid #000000;
  margin: 10;



/* Dropdown content (hidden by default) */
.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;


/* Links inside the dropdown */
.dropdown-content a 
  float: none;
  color: black;
  padding: 12px 126.4px;
  text-decoration: none;
  display: block;
  text-align: left;


/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover 
  background-color: #ddd;


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content 
  display: block;


@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root 
  --white: #afafaf;
  --red: #e31b23;
  --bodyColor: #292a2b;
  --borderFormEls: hsl(0, 0%, 10%);
  --bgFormEls: hsl(0, 0%, 14%);
  --bgFormElsFocus: hsl(0, 7%, 20%);


/* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;


a 
  color: inherit;

*/
input,
select,
textarea,
button 
  font-family: inherit;
  font-size: 100%;


button,
label 
  cursor: pointer;


select 
  appearance: none;


/* Remove native arrow on IE */
select::-ms-expand 
  display: none;


/*Remove dotted outline from selected option on Firefox*/
/*https://***.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/
/*We use !important to override the color set for the select on line 99*/
select:-moz-focusring 
  color: transparent !important;
  text-shadow: 0 0 0 var(--white);


textarea 
  resize: none;


ul 
  list-style: none;


body 
  font: 18px/1.5 "Open Sans", sans-serif;
  background: var(--bodyColor);
  color: var(--white);
  margin: 1.5rem 0;


.container 
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;



/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form h1 
  margin-bottom: 1.5rem;


.my-form li,
.my-form .grid > *:not(:last-child) 
  margin-bottom: 1.5rem;


.my-form select,
.my-form input,
.my-form textarea,
.my-form button 
  width: 100%;
  line-height: 1.5;
  padding: 15px 10px;
  border: 1px solid var(--borderFormEls);
  color: var(--white);
  background: var(--bgFormEls);
  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);


.my-form textarea 
  height: 170px;


.my-form ::placeholder 
  color: inherit;
  /*Fix opacity issue on Firefox*/
  opacity: 1;


.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:enabled:hover,
.my-form button:focus,
.my-form input[type="checkbox"]:focus + label 
  background: var(--bgFormElsFocus);


.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus 
  transform: scale(1.02);


.my-form *:required,
.my-form select 
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 15px 15px;


.my-form *:required 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg);


.my-form select 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/down.svg);


.my-form *:disabled 
  cursor: default;
  filter: blur(2px);



/* FORM BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form .required-msg 
  display: none;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg)
    no-repeat center left / 15px 15px;
  padding-left: 20px;


.my-form .btn-grid 
  position: relative;
  overflow: hidden;
  transition: filter 0.2s;


.my-form button 
  font-weight: bold;


.my-form button > * 
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;


.my-form button .back 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-110%, -50%);


.my-form button:enabled:hover .back,
.my-form button:focus .back 
  transform: translate(-50%, -50%);


.my-form button:enabled:hover .front,
.my-form button:focus .front 
  transform: translateX(110%);



/* CUSTOM CHECKBOX
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form input[type="checkbox"] 
  position: absolute;
  left: -9999px;


.my-form input[type="checkbox"] + label 
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);


.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after 
  content: '';
  position: absolute;


.my-form input[type="checkbox"] + label::before 
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white);


.my-form input[type="checkbox"]:checked + label::before 
  background: var(--red);


.my-form input[type="checkbox"]:checked + label::after 
  left: 7px;
  top: 7px;
  width: 6px;
  height: 14px;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);



/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer 
  font-size: 1rem;
  text-align: right;
  backface-visibility: hidden;


footer a 
  text-decoration: none;


footer span 
  color: var(--red);



/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 600px) 
  .my-form .grid 
    display: grid;
    grid-gap: 1.5rem;
  

  .my-form .grid-2 
    grid-template-columns: 1fr 1fr;
  

  .my-form .grid-3 
    grid-template-columns: auto auto auto;
    align-items: center;
  

  .my-form .grid > *:not(:last-child) 
    margin-bottom: 0;
  

  .my-form .required-msg 
    display: block;
  


@media screen and (min-width: 541px) 
  .my-form input[type="checkbox"] + label::before 
    top: 50%;
    transform: translateY(-50%);
  

  .my-form input[type="checkbox"]:checked + label::after 
    top: 3px;
  

.container
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

.ul2
  display: flex;



.ul2 li
  display: flex;
 align-items:center;
 justify-content:center;
  position: relative;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;

.ul2 li:before
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;

.ul2 li:nth-child(1):before
  background: #4267B2;

.ul2 li:nth-child(2):before
  background: #1DA1F2;

.ul2 li:nth-child(3):before
  background: #E1306C;

.ul2 li:nth-child(4):before
  background: #2867B2;

.ul2 li:nth-child(5):before
  background: #ff0000;

.ul2 li:hover:before
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */

.ul2 li:nth-child(1):hover:before
  box-shadow: 0 0 15px #4267B2;

.ul2 li:nth-child(2):hover:before
  box-shadow: 0 0 15px #1DA1F2;

.ul2 li:nth-child(3):hover:before
  box-shadow: 0 0 15px #E1306C;

.ul2 li:nth-child(4):hover:before
  box-shadow: 0 0 15px #2867B2;

.ul2 li:nth-child(5):hover:before
  box-shadow: 0 0 15px #ff0000;

.ul2 li:nth-child(1):hover
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;

.ul2 li:nth-child(2):hover
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;

.ul2 li:nth-child(3):hover
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;

.ul2 li:nth-child(4):hover
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;

.ul2 li:nth-child(5):hover
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;

.ul2 li:hover
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;

.con
  position: relative;
  height: 500px;
  width: 550px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;


.fatness
  float: right;

.epic
  float: left;

.con2
  float: right;

.con:hover
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);

.con .image
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;

.con:hover .image
  transform: translateY(-100px);

.image img
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;

.con:hover .image img
  opacity: 0.7;

.con:hover .image
 transform: translateY(-100px);


.con:hover > ul > li > a
  opacity: 1;
  transform: translateY(0);

.con:hover > ul > li:nth-child(2) a
  transition-delay: 0.1s;

.con:hover > ul > li:nth-child(3) a
  transition-delay: 0.2s;

.con:hover > ul > li:nth-child(4) a
  transition-delay: 0.3s;

.con:hover > ul > li:nth-child(5) a
  transition-delay: 0.4s;

.con .content
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;


.info
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;

.info h2
  font-size: 27px;
  margin: 3px 0;

.info span
  color: #1a1a1a;

.https
  text-decoration: none;

.https :visited
text-decoration: none;
color: #69655b;

<html>
<link href="AboutUs.css" rel="stylesheet" type="text/css">

<head>
<img src="Images/FinalLogo.jpg"  >
<meta charset="UTF-8">
    <title>Contact Us Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">                          also this
</head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="topnav" id="myTopnav">
    <a href="ISTwebsite.html">Home</a>
    <a href="AboutUs.html">About Us</a>
    <div class="dropdown">
      <button class="dropbtn">Stories
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Jack and Jill</a>
        <a href="Cinderalla.html">Cinderella</a>
        <a href="#">Snow White</a>
      </div>
    </div>
    <a href="ContactUsPage.html" class="active" >Contact Us</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
  <body style="background-color:#faecca">
        <form class="my-form">
          <div class="container">
            <h1>Get in touch!</h1>
            <ul>
              <li>
                <select>
                  <option selected disabled>-- Please choose an option --</option>
                  <option>Send feedback</option>
                  <option>Want to collab</option>
                  <option>Other</option>
                </select>
              </li>
              <li>
                <div class="grid grid-2">
                  <input type="text" placeholder="Name" required>
                  <input type="text" placeholder="Surname" required>
                </div>
              </li>
              <li>
                <div class="grid grid-2">
                  <input type="email" placeholder="Email" required>
                  <input type="tel" placeholder="Phone">
                </div>
              </li>
              <li>
                <textarea placeholder="Message"></textarea>
              </li>
              <li>
                <input type="checkbox" id="terms">
                <label for="terms">I have read and agreed with <a href="">the terms and conditions.</a></label>
              </li>
              <li>
                <div class="grid grid-3">
                  <div class="required-msg">REQUIRED FIELDS</div>
                  <button class="btn-grid" type="submit" disabled>
                    <span class="back">
                     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/email-icon.svg" >
                    </span>
                                <div class="https">
                    <span class="front"><a href="ContactUsPageAfter.html" style="text-decoration:none">SUBMIT</a></span>
</div>
                  </button>
                  <button class="btn-grid" type="reset" disabled>
                    <span class="back">
                      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/eraser-icon.svg" >
                    </span>
                    <span class="front">RESET</span>
                  </button>
                </div>
              </li>
            </ul>
          </div>
        </form>
<div class="epic">
        <div class="con">
      <div class="image">
        <img src="Images/blankprofile.png">
      </div>
<div class="content">
        <div class="info">
          <h2>
Name</h2>
<span>Student</span>
        </div>
</div>

</div>
        <ul class="ul2" >
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</div>
<div class="fatness">
        <div class="con">
      <div class="image">
        <img src="Images/blankprofile.png">
      </div>
<div class="content">
        <div class="info">
          <h2>
Name</h2>
<span>Student</span>
        </div>
</div>

</div>
        <ul class="ul2" >
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</div>

  </body>
    <script src="ContactUsPage.js"></script>

</html>

当我按下提交按钮时，它只会在我的本地桌面上重新加载页面。有人可以帮我使提交按钮起作用吗？

【问题讨论】：

如果您只想链接到另一个页面而不是提交表单，为什么不直接使用链接并将其设置为按钮？ 【参考方案1】：

如果你只是想模拟一个提交按钮而不是实际提交任何东西，你可以在你的函数调用中使用 prevent.default。

检查：https://www.w3schools.com/jsref/event_preventdefault.asp

但是，如果您想要不同的行为，您可以选择不同的输入类型/按钮，并将其包裹在链接标签周围，正如其他人已经在此线程中建议的那样。

【讨论】：

【参考方案2】：

您不应该在<button> 元素中使用链接。您应该做的是将 action 属性添加到您的<form>

所以在你的情况下你应该做的是改变：

<form class="my-form">

到