Question

如何编写代码来创建工作提交按钮，其中某人单击我页面上的提交按钮，该数据将转到我的工作电子邮件ID，例如smrithikollam@gamil.com。

＆＃34;不喜欢JavaScript ..更喜欢用HTML 5编写代码。 CSS3＆＃34;

以下是我的表单的HTML代码

<div id="forms">
    <form class="form">

        <p class="name">
            <input type="text" name="name" id="name" placeholder="Enter Your Name" />
        </p>

        <p class="email">
            <input type="text" name="email" id="email" placeholder="mail@example.com" />
        </p>

        <p class="web">
            <input type="text" name="web" id="web" placeholder="9876 543 210" />
        </p>        

        <p class="text">
            <textarea name="text" placeholder="Write something to us" /></textarea>
        </p>

        <p class="submit">
            <input type="submit" value="Send" />
        </p>
    </form>
</div>

以下是我提交按钮的CSS代码

.submit input {
    width: 100px; 
    height: 40px;
    background-color: #474E69; 
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;     
}

Answer 1

首先：普通表单有action属性，其中包含接收表单数据的页面地址，而你的表单没有：

<form action="sendmail.php">

第二：你不能使用纯HTML和CSS发送表单，你需要一个服务器端语言以及PHP或ASP来接收表单数据并处理它们作为电子邮件发送。

Answer 2

概念是捕获提交按钮单击并通过返回false来防止该函数的默认行为。在函数内部捕获表单输入值并构建正文。通过将mailto作为href的值发送来激活链接。我还没有测试它的链接激活，所以最好开始用IE测试希望这可能有所帮助艾伦梅希奥伦敦

<body>
    <div id="forms" >
<form id="myform" class="form" action="#">

<p class="name">
<input type="text" name="myname" id="myname" placeholder="Enter Your Name" />
</p>

<p class="email">
<input type="text" name="myemail" id="myemail" placeholder="mail@example.com" />
</p>

<p class="web">
<input type="text" name="myphone" id="myphone" placeholder="9876 543 210" />
</p>        

<p class="text">
<textarea name="mytext" placeholder="Write something to us" /></textarea>
</p>

<p class="submit" >
<input type="submit" value="Send"  onClick="sendEmail()"/>
</p>
</form>
    <a id="mylink" href="#"> </a>
</div>
    <script>
    function sendEmail() {
        var  str = "name: " + document.forms.myform.myname.value + "\n" + "email: " + document.forms.myform.myemail.value + "\n" + "phone: " + document.forms.myform.myphone.value + "\n" +
            "text: " + document.forms.myform.mytext.value;      
        var link = document.getElementById("mylink");
        link.href="/mailto:alan.mehio@gmail.com?subject=form submottion&body=" + str;
       clickLink(link);
        return false;
    } 


 function clickLink(link) {

   if (isIE())
   {
      link.click();
      return;
   }
   else if (document.createEvent)
   {
      var e = document.createEvent('MouseEvents');
      e.initEvent(
         'click'     // event type
         ,true      // can bubble?
         ,true      // cancelable?
      );
     var allowDefaultAction = link.dispatchEvent(e);           
   }

 }

 function isIE () {
  var myNav = navigator.userAgent.toLowerCase();
  return (myNav.indexOf('msie') != -1) ? true : false;
}

</script> 

</body>

Answer 3

以下代码将向您输入的电子邮件提交电子邮件，而不是user@example.org （在你的情况下是smrithikollam@gamil.com）

<input type="submit" value="SUBMIT EMAIL TO: user@example.org"><a href="mailto:user@example.org">

Answer 4

                <div class="col-md-6  col-sm-12" >
                    <h3>Need Help ? Write Us. </h3>
                    <hr />
                    <form>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" required="required" placeholder="Name">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" required="required" placeholder="Email address">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <textarea name="message" id="message" required="required" class="form-control" rows="3"  placeholder="Message"></textarea>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Submit Request</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

为表单创建一个工作提交按钮以发送电子邮件

4 个答案: