自定义表单提交按钮

Question

我正在为我的 MailChimp 列表制作一个自定义订阅按钮。不过，我似乎无法将我的按钮与表单输入法关联起来。

var subscribe_button = document.querySelector(".fi-mail");

subscribe_button.addEventListener('click', function(){
	subscribe_button.classList.remove("fi-mail");
  subscribe_button.classList.add("fi-check");
});

* {
	-webkit-font-smoothing: antialiased;
	font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
	font-size: 15px;
	color: #fff;
}

html {
	background: linear-gradient(134.72deg, #EB4B92 0%, #CA76E3 100%);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
}

body {
	text-align: center;
}

form {
	background: transparent;
	height: 50px;
	width: 300px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	-webkit-box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
	box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, .1);
	top: 50%;
	left: 50%;
	position: absolute;
	margin: -25px 0 0 -150px;
}

input {
  background: transparent;
	float: left;
	padding: 14px 0;
	border: 0;
	outline: 0;
	margin-left: 25px;
	width: 220px;
}

form a {
	float: right;
	background: #4db6ec;
	border: 0;
	line-height: 38px;
	height: 38px;
	width: 38px;
	margin: 6px 6px 0 0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	color: #fff;
	font-size: 1.2em;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}

form a:hover {
	background: #75c8f3;
}

form a.fi-check {
	background: #aed43e;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg); 
	-o-transform: rotate(360deg);
}

form a.fi-check:hover {
	cursor: default;
} 

.a-thing {
	color: #fff;
	font-weight: bold;
	font-size: .9em;
	text-shadow: 0 1px rgba(0,0,0,0.2);
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -195px;
}

.a-thing a {
	color: #eeffbc;
	text-decoration: none;
}

.a-thing a:hover {
	color: #fff;
}

@font-face {
  font-family: "foundation-icons";
  src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.svg#GeneralFoundicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class*="fi-"]:before {
  font-family: "foundation-icons";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline-block;
}

.fi-check:before {
  content: "\f126";
}

.fi-mail:before {
  content: "\f16d";
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    rgba(0, 0, 0, .2);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    rgba(0, 0, 0, .2);
   opacity:  .2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    rgba(0, 0, 0, .2);
   opacity:  .2;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    rgba(0, 0, 0, .2);
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    rgba(0, 0, 0, .2);
}

::placeholder { /* Most modern browsers support this now. */
   color:    rgba(0, 0, 0, .2);
}

<form action="https://fulfillingtheprophecy.us16.list-manage.com/subscribe/post?u=9c9cbcbf400c4df4622eef40f&amp;id=0ae3f9ab0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <input type="email" placeholder="ava@example.com">
  <a type="submit" class="fi-mail"></a>
</form>

Answer 1

看看这个答案，因为我认为它很好地回答了你的问题：(Is it safe to use anchor to submit form?)。

简短回答：以下任何一个都可以代替锚标记。

<input type="submit" value="Submit!" />

或

<button type="submit">Submit!</button>