Need help making a custom Checklist with HTML

TubsAlwaysWins · November 27, 2020

Hello all, let me start by saying I have 0 experience in HTML (Or any code really. Very basic knowledge).

I am working on a custom invoice template (I did not make the template), and I would like to put a short checklist in part of the invoice. (Basically just a empty square with some custom text next to it, so I can print and then check things off).

Would anyone be able to help either point me in the direction of a tutorial, give me a base code I can copy and paste for each item, or edit the template I have?

Thank you!

Attached is a PDF of what they look like, and the HTML code (I have the CSS code too)

Edit: Ive got how to put a box in and ive got how to put text in, I just dont know how to get them on one line...

template-install-quote.zip Template Example.pdf

mariushm · November 28, 2020

Lots of ways you can do it...

If you want the standard checkbox , just insert this in front of the text and the browser will generate a basic checkbox

<input type="checkbox" />

You could also use the unicode characters for empty checkbox and checkbox filled, if the font you use has those two characters defined. If not, you can specify a custom font which can be loaded when the html page loads.

The empty checkbox is U2610 , the filled checkbox is u2611 so you can just write ☐ (using decimal notation) or ☐ for the hexadecimal notation in the page. Of course, you could put this between and apply a css class to change font or make bold or bigger size , for example ☐

An alternative would be to use an image to show that square in which you put the checkmark...

You can use a html tag that's not visible usually on the page and set dimensions and background image the image you want to be shown on the screen. You can also embed the image inside the style sheet

You can use online sites to convert image files to that base64 code you can put in css to embed image in stylesheet... i used https://www.base64-image.de/

I made a basic html with all three examples above here: https://codesandbox.io/s/small-rain-y4qrz?file=/index.html

TubsAlwaysWins · November 28, 2020

2 hours ago, mariushm said:
Lots of ways you can do it...

If you want the standard checkbox , just insert this in front of the text and the browser will generate a basic checkbox
<input type="checkbox" />
You could also use the unicode characters for empty checkbox and checkbox filled, if the font you use has those two characters defined. If not, you can specify a custom font which can be loaded when the html page loads.

The empty checkbox is U2610 , the filled checkbox is u2611 so you can just write ☐ (using decimal notation) or ☐ for the hexadecimal notation in the page. Of course, you could put this between and apply a css class to change font or make bold or bigger size , for example ☐

An alternative would be to use an image to show that square in which you put the checkmark...

You can use a html tag that's not visible usually on the page and set dimensions and background image the image you want to be shown on the screen. You can also embed the image inside the style sheet

You can use online sites to convert image files to that base64 code you can put in css to embed image in stylesheet... i used https://www.base64-image.de/

I made a basic html with all three examples above here: https://codesandbox.io/s/small-rain-y4qrz?file=/index.html

Oh my gosh thank you so much! I will have to start messing with that in the template to get formatting right but you have defivinitly helped! Thank you!