Input Type="Submit" VS Button Tag Are They Interchangeable

Difference between input type='button' / and input type='submit' /

<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.

Can a input type=submit button have an HTML label?

Not with <input type='submit' ...>, as HTML labels aren't supported this way. From <input type="button"> MDN page:

Note: While <input> elements of type button are still perfectly valid HTML, the newer <button> element is now the favored way to
create buttons. Given that a <button>’s label text is inserted
between the opening and closing tags, you can include HTML in the
label, even images.

As such, with the functionally-same <button> you can have HTML labels:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<button type="submit" name="plus" value="" class="btn btn-primary">
    <ion-icon name="chevron-forward-outline"></ion-icon>
</button>

What's the difference between submit and button?

The value of a submit input will be the display label.

<input type="submit" name="foo" value="bar"> <!-- Displays [bar] -->

The child nodes of a submit button will be the display label. The value can be different and the label can include elements as well as text.

<button type="submit" name="foo" value="bar">
    <img src="arrow.png" alt="Sample Image"> Baz
</button>
<!-- Displays [→ Baz] -->

There are no differences between them that are JavaScript related. You can't use JavaScript to couple or decouple the display label and submitted value.

Differences between button and input type=button for onclick script handling

If you need to use the button tag, you can add "return false" after to keep it from submitting by default. http://codepen.io/anon/pen/bVdJOm

<button type="submit" onclick="submitForm(); return false;" />

Have you ever reflected Reflector?

It would have been kind of ironic if it weren't ;-)

Submit button doesn't submit inside form tag

An invalid form control with name='userfile[]' is not focusable.

Try to add novalidate attribute to the form.

<form enctype="multipart/form-data" class="form-horizontal" method="post" action="{{base_url()}}admin/unit/update/{{$unit->id_unit}}" novalidate>

Edit :

The reason is simple. Your file element is required AND empty. So, the browser have to show a pop up message to ask you to fill this field. Or, the file element is also HIDDEN (display: none), so, the browser is unable to do this, and an error occurs.

So, add novalidate is a solution, but you can also remove required attribute to the file element