How to do a solid square for a tickbox


I am designing a form in html (Not as in <form> i mean a paper based form) to be printed of and filled in.

I have having a realll headache trying to do tick boxes. Heres what i have tired:
- An image of a square, but for some reason when the web app converts it to a PDF, 2 sides of the square come out as 2px and the other 2 sides at 1px.
- A special character (&#9744;) but that just comes out with extra line breakes for some reason (see attached image)

Anyone have any other suggestions?
Who is Participating?
thehagmanConnect With a Mentor Commented:
I don't understand exactly what you don't like with the &#9744; character.
If it is because of the wrap inside "Hair & Beauty Studies", I suggest you style the corresponding container accordingly, e.g. <p style="white-space: nowrap">
previewservicesAuthor Commented:
I have attached another example. The above tick boxes are the images which are quite close to  each other whereas the bottom tick boxes have quite a bit of spacing.
if you are just making a form for print you might try Microsoft Word.  It has draw features and would be a much better tool than trying to format everything with html.
previewservicesAuthor Commented:
There is more to this than just printing a form. There is an asp form when pre fills part of this form and converts the html into PDF.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.