<div id="container">
  <h2>Button type</h2>
  <form id="form_1">
  <input name="input" type="text" placeholder="Введите что-нибудь" />
  <button>Кнопка без атрибута <b>type</b>
  <button type="submit">Кнопка c <b>type="submit"</b></button><button type="button">Кнопка c <b>type="button"</b></button><button type="reset">Кнопка c <b>type="reset"</b></button>
</form>
</div>
input, button {
  font-size: 16px;
  padding: 4px 8px;
  border: 1px solid #efefef
  border-radius: 3px;
  margin-top: 12px;
}

button {
  display: block;
}

div {
  padding: 16px;
}

h2 {
  font-family: Tahoma;
  margin: 0;
}





p {
  color: red;
}
jQuery(document).ready(function($){
  
  $('form').on('submit', function(e){
    e.preventDefault();
    
    var container = $(this).parent();
    container.find('p').remove();
    container.prepend('<p>Нажата кнопка с типом <b>submit</b></p>');
  });
  
  $('form').on('click', 'button[type="button"]', function(e){
    var container = $('form').parent();
    container.find('p').remove();
    container.prepend('<p>Нажата кнопка с типом <b>button</b></p>');
  });
  
  $('form').on('reset', function(e){
    var container = $(this).parent();
    container.find('p').remove();
    container.prepend('<p>Нажата кнопка с типом <b>reset</b>, а текстовое поле очистилось ;)</p>');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js