問題1

我是新來的HTML和試圖建立一種形式，基本上是從用戶獲取的數據作爲輸入，並通過點擊發送應通過電子郵件的詳細信息發送到管理員+它還應該在儀表板，發送電子郵件通知用戶..查詢關於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> 
 
    \t <option>Oracle Cloud</option> 
 
    \t <option>Oracle VM</option> 
 
    \t <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>

來源

2017-07-11 biz

請在這裏輸入你的所有代碼。不要使用鏈接來引用您的代碼。 – Zaphiel

謝謝@Zaphiel我已更新線程.. – biz

這是非常簡單的實現與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:[email protected]?body=' + message); 
document.getElementById('confirmation').innerHTML = "Email successfully sent!"; 
}

我也建議，雖然做了一些驗證，否則人們可以輸入任何值的字段。

來源

2017-07-11 13:45:56 Coopza

Thanks @Coopza我們可以將這些數據添加到現有代碼中嗎？對不起，但我不確定整合如何在這裏工作 – biz

查詢關於HTML表單

問題1

第2期

回答

相關問題