Attribute capture not allowed on element input at this point

Question

This line of code:

<input name="img" type="file" accept="image/*" capture="camera" onchange="uploadImage(this, 75)" />

fails to pass the W3C HTML5 validator check:

I would appreciate anyone letting me know why the error from W3C (and any solution), given that the code works fine and it opens the camera for mobile devices.

Post the code, too, not only an image of code. Also add the URL you've used for validation. — connexo, Dec 14 '19 at 07:48
your code seems different from the code in the error message — jochen, Dec 14 '19 at 10:04
@jochen: My bad. I edited the question for including the code as text (it was just in the screenshot) as *connexo* suggested and left a part behind. Thank you for reporting it. — David, Dec 14 '19 at 10:09

score 3 · Accepted Answer · edited Mar 21 '20 at 16:37

3

It was a bug in the validator.

Even when the capture attribute didn't, so far, make its way into the HTML spec, it has already the "W3C Recommendation" status (HTML Media Capture). Therefore, it should have been included in the validator.

On March 2018, an issue was raised in the W3C mailing list and a member of the validator team acknowledged it. It was fixed on March 21, 2020.

If you want to know more about the correct syntax regarding HTML Media Capture, have a look at this article.

edited Mar 21 '20 at 16:37

Colin 't Hart

7,372
3
28
51

answered Dec 14 '19 at 09:50

David

6,695
3
29
46

Thanks @David for your explanation and editing my question above. – aj888 Dec 16 '19 at 04:22
Thank you for the update @Colin'tHart, I was about to look for that info. – David Mar 21 '20 at 16:43

score -1 · Answer 2 · answered Dec 14 '19 at 09:05

label.cameraButton {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.cameraButton:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
  display: none;
}

<!DOCTYPE html>
<html>

<body>
  <label class="cameraButton">
    <input type="file" accept="image/*;capture=camera">
  </label>
</body>

</html>

I guess you mean `accept="image/*" capture="camera"`. If not, that is not a valid markup for the [`accept` attribute](https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-input-accept)). Anyway, this fails to explain **why** the validator raise an error. — David, Dec 14 '19 at 10:02

Attribute capture not allowed on element input at this point

2 Answers2