HTML注釈テキストボックス

Question

私はHTMLの初心者ですが、苦労しています。

私はノートページを実装しました。

ここで、ユーザーはメモを入力して[送信]を押すことができます。

投稿を押すと、入力したメモが下のテキストボックスに表示されますが、実装するには苦労します。誰もが素晴らしいだろうな洞察力を持っている場合

<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] 

...のように見えます！ありがとうございました！

Answer 1

HTMLは宣言型マークアップ言語であり、それで、それ自身のレベルの対話性を実現することはできません。代わりに、あなたはこの仕事をするためにいくつかのJavaScriptを書く必要があります。

次ず、いくつかのJavaScriptを記述する必要があります

• フォーム要素
• は、前記要素のイベントハンドラ内
• 上submitイベントをリッスンして下さい：
  • デフォルトのフォーム送信をキャンセルします。それ以外の場合はページを更新します
  • 必要なHTML要素を作成します
  • は、テキストボックス

Answer 2

$(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>

のDOM

クリアに値を要素を追加し、テキストボックスの値でHTMLを読み込むノート

を表示します