html - 将跨度视为输入元素

Question

是否可以使用跨度触发输入？

例如

<div class='btn'>
    <span type="submit" aria-hidden="true" data-icon="&#xe000;"></span>
</div>

我可能遗漏了一些非常明显的东西，但我基本上只想使用图标字体作为发送按钮。

谢谢！

Answer 1

如果你有表格，你可以打电话myform.submit()

<form name="myform" method="post" action="action.php">
    <div>
        <label for="email">E-Mail</label>
        <input type="text" id="email" name="email"/>
    </div>
    <div class="btn">
        <span aria-hidden="true" data-icon="&#xe000;" onclick="myform.submit()">Submit</span>
    </div>
</form>

Answer 2

你不能放type="submit"，但是当你点击它时你可以执行一些Javascript代码。

jQuery

<span id="mySpan"> </span>

$("#mySpan").click(function(){

    //stuff here

});

Javascript

<span id="mySpan" onclick="MyClick()"> </span>

function MyClick()
{

  //stuff here

}

SPAN 用作提交按钮

<input type="text" id="usernameInputField />
<input type="email" id="emalInputField />
<span id="mySpan" onclick="Register()"></span>

现在在 Javascript..

function Register()
{
   //First you need to do some validation
   var username = document.getElementById("usernameInputField").value;
   var email = document.getElementById("emailInputField").value;
   //Password, Gender, etc...
   //Then start doing your validation the way you like it...
   /*if(password.length<6)
     {
         alert("Password is too short");
         return false;
     }
   */
   //Then when everything is valid, Post to the Server
   //This is a PHP Post Call
   $.post("Register.php",{ username:username,email:email } ,function(data) {
       //more codes
   });
}

Answer 3

我猜奥拉夫的答案比阿里的简单。但是，当您希望在您的 php 脚本中验证表单是否已提交时，使用 Olaf 的解决方案时会出现一个小问题。

为了避免这个问题，只需添加一个隐藏输入来确认表单已发送。

<form name="myform" method="post" action="action.php">
    <div>
        <label for="email">E-Mail</label>
        <input type="text" id="email" name="email"/>
        <input type="hidden" id="gustav" value="1"/>
    </div>
    <div class="btn">
        <span aria-hidden="true" data-icon="&#xe000;" onclick="myform.submit()">Submit</span>
    </div>
</form>

然后，在您的 PHP 中，只需查找if($_POST['gustav']){ ...确认表单已发送。

这样，您可以在一个页面上有多个表单，所有表单都由同一个 php 脚本收集，仍然使用 Olaf 的解决方案来触发提交。