Label doesn't work

Question

I have this code:

.hidden_element {
  height: 1px;
  width: 1px;
  overflow: hidden;
}

<form action="">
  <label for="file">
    <button type="button" class="button red">Choose File</button>
  </label>
  <div class="hidden_element">
    <input type="file" name="video" id="file" />
  </div>
</form>

The problem is when I click choose file nothing happens.

This button does nothing. What do you want it to do? And why would you put it into label? — Nikolay Ermakov, Jan 21 '16 at 13:44
Perhaps you should use plain text or span styled as button inside `label` if you want label to work. — Sergiy T., Jan 21 '16 at 13:46
It won't work because the `button` does not `focus`, the `label` does. Replace the `label` with just text and it starts working. — somethinghere, Jan 21 '16 at 13:46
Maybe this answers your question: http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file — Vasilis Tsirimokos, Jan 21 '16 at 13:47
You have no javascript here; the code you provided does nothing. What are you trying to accomplish? — ConnorCMcKee, Jan 21 '16 at 13:52

score 4 · Answer 1 · answered Jan 21 '16 at 13:54

Change your button like <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>

.hidden_element {
  height: 1px;
  width: 1px;
  overflow: hidden;
}

<form action="">
  <label for="file">
    <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>
  </label>
  <div class="hidden_element">
    <input type="file" name="video" id="file" />
  </div>
</form>

that works, thank you! But why the `` didn't work? – Lucas Jun 10 '21 at 19:52 — Lucas, Jun 10 '21 at 19:52

score 0 · Answer 2 · answered Jan 21 '16 at 15:52

The label element applies to one input only: since it has one as a child (the button is an input element), it applies to it instead of the file-input as you hoped.

Just remove the button, maybe replace it with a span and style it as you wish, and clicking the label will open the file picker. No javascript needed! :)

.hidden_element {
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.button {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #aaa;
  background-image: linear-gradient(to bottom, #eee, #ccc);
  padding: 0.1em 0.2em;
  cursor: pointer;
}

<form action="">
  <label for="file">
    <span class="button red">Choose File</span>
  </label>
  <div class="hidden_element">
    <input type="file" name="video" id="file" />
  </div>
</form>

Homer Reynolds · Answer 3 · 2016-01-21T16:12:20.660

I do not see the purpose of putting the button as a label. Either use a button or a submit to process your input (file upload). You should not hide your 'input file' tag. You really need two things for the user: the 'input file' tag to allow the user to choose the file he wants to upload and then a way to perform an action by submitting the form or perhaps an ajax call. However, since you are just learning this process, I recommend, just performing a simple submit and for you to write the code on the backend that will handle uploading the file. Here is a sample of my html code:

<form method="post" action="uploadFile.php">
 <input type="file" name="video" id="file" />
 <br /><br />
 <input type="submit" value="upload file">
</form>

Label doesn't work

3 Answers3