Why, when I call the form to upload files, I do not have time to select a file and the page reloads?

Question

css

Hello! There is a task to style the form for uploading input[type=file] files. Found an elegant solution, which I give in the code. Everything works great on html pages, but when I transfer it to the site (input with the browse button), such a bug occurs: when you click on the button, the system menu pops up, but you don’t even have time to select a file or take your mouse away from the menu and the page suddenly reloads and writes that the update . How can this be fixed? login/password: demo

<p>
  <input type="file" name="upload" id="upload_hidden" style="position: absolute; display: block; overflow: hidden; width: 0; height: 0; border: 0; padding: 0;" onchange="document.getElementById('upload_visible').value = this.value;" />
  <input type="text" readonly="1" id="upload_visible" onclick="document.getElementById('upload_hidden').click();" />
  <button onclick="document.getElementById('upload_hidden').click();">Обзор</button>
</p>

Answer 1

You need to put a button type="button". In the browser in which you are testing, the default type is submit, and you do not cancel the default action in the handler, so the form is sent.