HTML Note文本框

我是HTML新手，遇到困難。HTML Note文本框

我已經實現了一個筆記頁面。

用戶可以輸入筆記並按提交。

當他們按下提交時，我想要他們鍵入的註釋顯示在下面的文本框中，但是Im努力實現它。

<form class="form-horizontal"> 
<fieldset> 

<!-- Form Name --> 
<legend>Form Name</legend> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="Type Note">Note:</label> 
    <div class="col-md-5"> 
    <input id="Type Note" name="Type Note" type="text" placeholder="" class="form-control input-md"> 

    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for=""></label> 
    <div class="col-md-4"> 
    <button id="" name="" class="btn btn-primary">Submit</button> 
    </div> 
</div> 

</fieldset> 
</form>

輸出看起來像......

Note:[==insertnotehere==] 

Submit[button] 

[Want my notes to display below in a text box]

如果任何人有洞察力，這將是真棒！謝謝！

來源

2016-11-13 Kenny Ellis

你寫過什麼javascript了嗎？如果是這樣，請將其包含在問題中。 – Soviut

我沒有寫任何javascript。我想不得不考慮利用JS的文本框？ @Soviut可以引用我可以查看的完成此任務的任何鏈接？ –

HTML是一種聲明性標記語言，因此它不能自己完成這種交互級別。相反，你將需要編寫一些JavaScript來完成這項工作。

你需要寫一些JavaScript代碼執行以下操作：

查找表單元素上所述元件
在事件處理器
監聽submit事件：
- 取消默認表單提交，否則會刷新頁面
- 創建必要的HTML元素顯示音符
- 與文本框的值填充HTML
- 添加元素到DOM
- 清除值的文本框

來源

2016-11-13 21:30:27 Soviut

$(function() { 
 
    $(".form-horizontal").submit(function (e) { 
 
    e.preventDefault(); 
 
    alert($("#Type Note").val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-sm-offset-4"> 
 
     <form class="form-horizontal"> 
 
     <fieldset> 
 

 
      <!-- Form Name --> 
 
      <legend>Form Name</legend> 
 

 
      <!-- Text input--> 
 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label" for="Type Note">Note:</label> 
 
      <div class="col-md-5"> 
 
       <input id="Type Note" name="Type Note" type="text" placeholder="" class="form-control input-md"> 
 
      </div> 
 
      </div> 
 

 
      <!-- Button --> 
 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label" for=""></label> 
 
      <div class="col-md-4"> 
 
       <button class="btn btn-primary">Submit</button> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

的

來源

2016-11-13 21:35:55

HTML Note文本框

回答

相關問題