Problems with button of google design material

Question

Problems with button of google design material

Navigation

#1 by (6 votes)

4

I have a button to upload images in my web project; in Chrome and Microsoft Edge it works, but in Firefox it does not. Clicking should open the window to find the image to upload as it does in other browsers.

My HTML code:

<button data-upgraded=",MaterialButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored f-left">
<i class="material-icons ">cloud_upload</i>
    <form method="POST" action="http://timeline.dev/post/ajaxupload" accept-charset="UTF-8" class="x-uploader" enctype="multipart/form-data">
      <input name="_token" value="3kpNrTDVx59bdv1KqB8x4HNbftxdDC1TpIjpNgeX" type="hidden">
      <input name="file" type="file">
    </form>
</button>

That code should work the same as it does in Chrome and Explorer:

javascript html5 materialize material-design-lite

asked by vdjkelly 29.03.2016 в 02:14

source

1 answer

Delete repeated records from a table in MySQL Mask input text javascript

score 6 · Accepted Answer

This is a problem that occurs because the HTML code is not valid. The HTML definition indicates that the content inside a button can be :

Phrasing content, but there must be no interactive content descendant.

That is, content of phrase type, but that is not interactive. And within interactive content include (among others): a , button , select or input other than hidden (emphasis added by me):

Interactive content is content that is specifically intended for user interaction.


a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state) , keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)

In your code you include a form and a input of type file within a button that makes the code is not valid, then each browser will interpret it as it can. Chrome and IE interpret it in a way that you like and Firefox that you do not like ... but it could be otherwise.

One way to solve the problem is to make the code valid:

moving the form out,
adding a id to the input of the file, and
changing button to label pointing to input (with for ).

Then the code will be valid and works in all browsers:

<form method="POST" action="http://timeline.dev/post/ajaxupload" accept-charset="UTF-8" class="x-uploader" enctype="multipart/form-data">
  <label data-upgraded=",MaterialButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored f-left" for="file">
    <i class="material-icons ">cloud_upload</i>
    <input name="_token" value="3kpNrTDVx59bdv1KqB8x4HNbftxdDC1TpIjpNgeX" type="hidden">
    <input name="file" type="file" id="file">
  </label>
</form>