Formrunを使ったフォームにbuttonタグを使うと送信されてしまう

#Formrunとは
メールフォームが作れるサービス。

公式サイト
https://form.run/ja

#今回のトラブル
Formrunを「HTML・CSSをオリジナルで作成」し、ボタンをクリックするとテキストボックスに行が追加される入力エリアを作った。

form.html

<div class="form-group">
    <label for="area" class="lead">入力エリア</label>
    <textarea name="area" id="area" class="form-control" rows="10">項目1:
項目2:
項目3:

</textarea>
    <button id="add-line" class="btn btn-primary">行追加</button>
</div>

<script>
(function($){
$("#add-line").click( function() {
 var addText = "項目1:\n項目2:\n項目3:\n\n";
 var getData = String($("#area").val());
$("#area").val( getData + addText );
});
</script>

参考にしたサイト
jQuery でテキストボックスの値を設定／取得／追記／削除を行う方法
https://webllica.com/jquery-text-edit-get-add-del/

すると「行追加」ボタンをクリックしただけで送信されてしまった。
jQueryが原因かと思いscriptを切るが送信されてしまう。

#対処方法
jQueryが原因でないならタグが原因。
<button>を試しに他のタグに変更すると解消された。

form.html

<div class="form-group">
    <label for="area" class="lead">入力エリア</label>
    <textarea name="area" id="area" class="form-control" rows="10">項目1:
項目2:
項目3:

</textarea>
    <!-- ▼buttonをdivに変更 -->
    <div id="add-line" class="btn btn-primary">行追加</div>
</div>

<script>
(function($){
$("#add-line").click( function() {
 var addText = "項目1:\n項目2:\n項目3:\n\n";
 var getData = String($("#area").val());
$("#area").val( getData + addText );
});
</script>

Formrunを使うときは<button>タグ使うのやめよ。

#補足
jQueryは今回関係なかったが、一応記述したのは問題解決の流れを記録しておきたかったため。