HTML表单查询

【问题标题】：Query regarding HTML formHTML表单查询
【发布时间】：2017-07-11 12:43:10
【问题描述】：

问题 1

我是 html 新手，正在尝试构建一个表单，该表单基本上从用户那里获取数据作为输入，然后单击发送，它应该通过电子邮件将详细信息发送给管理员 + 它还应该在仪表板上通知用户电子邮件已发送..

问题 2

点击发送后，下面的代码没有被执行

<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>

非常感谢任何帮助！

<!DOCTYPE html>
<html>
<Center>
  <h1>Test Form</h1>
</Center>

</body>

<head>
  <meta charset="UTF-8">
  <title>Test Code</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>



  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>

  <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <div class="container">

    <Center>
      <form class="well form-horizontal" action=" " method="post" id="contact_form">
        <Center/>
        <fieldset>

          <!-- Form Name -->
          <legend>Need Compute Resources? Contact us today!!!</legend>

          <!-- Text input-->

          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="first_name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>

          <!-- Text input-->

          <div class="form-group">
            <label class="col-md-4 control-label">Last Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="last_name" placeholder="Last Name" class="form-control" type="text">
              </div>
            </div>
          </div>


          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">E-Mail</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
              </div>
            </div>
          </div>


          <!-- Text input-->

          <div class="form-group">
            <label class="col-md-4 control-label">Hostname </label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
                <input name="Hostname" placeholder="mytestvm.testlab.local" class="form-control" type="text">
              </div>
            </div>
          </div>


          <!-- Select Basic -->

          <div class="form-group">
            <label class="col-md-4 control-label">Domain Name</label>
            <div class="col-md-4 selectContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                <select name="Domain Name" class="form-control selectpicker">
          <option value=" " >Select domain name</option>
          <option>testlab.local</option>
          <option>example.local</option>
          </select>
              </div>
            </div>
          </div>

          <!-- Select Basic -->

          <div class="form-group">
            <label class="col-md-4 control-label">Hosting Environment</label>
            <div class="col-md-4 selectContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
                <select name="Hosting Environment" class="form-control selectpicker">
          <option value=" " >Select Hosting Environment</option>
          <option>Amazon Web Services</option>
          <option>Azure</option>
    	  <option>Oracle Cloud</option>
    	  <option>Oracle VM</option>
    	  <option>Vmware</option>
          <option >Baremetal</option>
        </select>
              </div>
            </div>
          </div>


          <!-- Select Basic -->

          <div class="form-group">
            <label class="col-md-4 control-label">Do you have Manager's Approval?</label>
            <div class="col-md-4 selectContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <select name="Hosting Environment" class="form-control selectpicker">
          <option value=" " >Select an option</option>
          <option>Yes</option>
          <option>No</option>
        </select>
              </div>
            </div>
          </div>


          <!-- Text area -->

          <div class="form-group">
            <label class="col-md-4 control-label">Business Justification</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                <textarea class="form-control" name="comment" placeholder="Please specify the Business Justification"></textarea>
              </div>
            </div>
          </div>

          <!-- Success message -->
          <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>



          <!-- Button -->

          <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-4">
              <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
            </div>
          </div>



        </fieldset>
      </form>
  </div>
  </div>
  <!-- /.container -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

【问题讨论】：

  • 请在此处添加您的所有代码。不要使用链接来引用您的代码。
  • 谢谢@Zaphiel 我已经更新了帖子..

标签： javascript html css webforms webpage


【解决方案1】：

这很容易用 HTML 和 JavaScript 实现。

HTML：

<form onSubmit="myFunction()">
 <input type="text" id="name" name="name" placeholder="Name" required> 
 <input type="text" id="age" name="age" placeholder="Age" required> 
 <input type="text" id="height" name="height" placeholder="Height" required> 
 <button class="btn btn-info" type="submit">Submit</button>
</form>
<span id="confirmation"></span>

JavaScript：

function myFunction(){
 var name = document.getElementById('name').value;
 var age = document.getElementById('age').value;
 var height = document.getElementById('height').value;
 var message = "Name: " + name + " age: " + age + " Height: " + height + "";
 window.open('mailto:test@example.com?body=' + message);
 document.getElementById('confirmation').innerHTML = "Email successfully sent!";
}

我也建议做一些验证，否则人们可以在字段中输入任何值。

【讨论】：

  • 谢谢@Coopza 我们可以将这些数据添加到现有代码中吗？很抱歉给您带来麻烦，但我不确定这里的集成是如何工作的
猜你喜欢
  • 2017-04-13
  • 2015-02-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-28
  • 2012-11-04
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode