Take a photo and put it on a html file using CSS and java script

Question

I cant find anything that specifically answers what I am trying to do (very sorry if I just missed) I'm extremely new to programming, I am trying to make a signup sheet for my work where you insert the simple stuff like name, nickname, phone number, and etc. We want it to be able to insert a photo, I would love to be able to show you the code we use to be able to even use the camera but I cant remember it, it looked something like

<input type="file" accept="image/*camera">

(sorry if that makes no sense) after doing that it kept just making the photo super small next to the take photo button and I was wondering if there would be anyway to take a photo and show it clearly on the screen inside a grey box that is already on the screen without the image inside it. we are using CSS, Javascript and HTML. Sorry if that made absolutely no sense and sorry if this has been asked before.

Edit: we are looking to have this running on ipads on either safari or the chrome app

Thanks in advance guys

Answer 1

I'm afraid, you're mixing up things here. accept is for mime types (eg only images with image/* .

In addition, you should try the capture attribute (as described on MDN web docs ).

I had a similiar project years ago, where that attribute accepted a boolean. We used Android tablets, though.