问题1

Question

问题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>

Answer 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!";
}

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

查询HTML表单

问题1

第2期

1 个答案: