Input elements not printing

[Schille]

Am I doing something wrong or is the visual output of input elements not supported?
I have a minimal HTML document with just one input (and no CSS) like so:
[...]
<input type="text" value="Foo">
[...]
Unfortunately, the output is blank. Same thing for type="radio" and so on.
I couldn't find any documentation about this, so I will be glad if anybody can give me a hint.

[liZe]

There's a bug open (#61) to support form fields in PDF files.

If you only want to draw input tags, you just have to add some CSS as you do for other tags. There's no default CSS in WeasyPrint for forms, that's why they are not drawn (just as an empty div or span would be).

<style>input:before{content:attr(value)}</style>
<input style="background: red" type="text" value="Foo">

[obonyojimmy]

Here a simple solution for checkbox input :

input[type="checkbox"] {
  height: 1em;
  width: 1em;
  display: inline-block;
  border: black 2px solid;
  margin: 0 0.5em;
}

[notanumber]

Is this documented somewhere? I just spend several days banging my head against the wall trying to debug my document output, unable to figure out why the form values weren't being displayed. I thought I was going crazy.

[liZe]

Is this documented somewhere? I just spend several days banging my head against the wall trying to debug my document output, unable to figure out why the form values weren't being displayed. I thought I was going crazy.

It's not documented yet, and I'm sorry for that.

I should add a stylesheet somewhere in the documentation to explain how to render forms in WeasyPrint.

[liZe]

@notanumber You'll now find a sample in the documentation, I hope that it will be useful for everybody!

[notanumber]

@liZe thanks for the update, and apologies if my comment sounded rude. This library is great and much easier to work with then any other Python based HTML to PDF library I've tried in the past!

[robertpro]

@obonyojimmy Thank you for your snippet,

Here a simple solution for checkbox input :

input[type="checkbox"] {
height: 1em;
width: 1em;
display: inline-block;
border: black 2px solid;
margin: 0 0.5em;
}

This is partially working for me, were you able to display checked checkboxes?

[liZe]

This is partially working for me, were you able to display checked checkboxes?

You can for example use a different background for checked checkboxes:

input[checked] { background: red }

[matiasrebori]

I had this problem and this is my solution if its useful for someone, i copy some css and modified a little to work with weasyprint.

CSS

/* css para los checkbox */
.checkbox label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 15%;
}

.checkbox label input[type="checkbox"] {
    display: none;
}

/* no mostrar check  */
.checkbox label input[type="checkbox"] + .cr > .cr-icon {
    opacity: 0;
}

/* mostrar check cuando tenga atributo checked */
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
    opacity: 1;
}

/* bajar opacidad del check cuando este disabled */
.checkbox label input[type="checkbox"]:disabled + .cr {
    opacity: .5;
}

/* etiqueta label con clase checkbox */
label.checkbox {
    width: 100%;
}

/* etiqueta span (para texto) con clase checkbox */
span.checkbox {
    font-size: 0.8rem;
    font-weight: 400;
    color: #212529;
}

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="checkbox">
    <label class="checkbox">
            <input type="checkbox" value="">
        <!-- icon -->
        <span class="cr"><i class="cr-icon fas fa-check"></i></span>
        <!-- text -->
        <span class="checkbox"> option one </span>
    </label>
</div>
<div class="checkbox">
    <label class="checkbox">
            <input type="checkbox" value="" checked>
        <!-- icon -->
        <span class="cr"><i class="cr-icon fas fa-check"></i></span>
        <!-- text -->
        <span class="checkbox"> option two is checked by default</span>
    </label>
</div>
<div class="checkbox">
    <label class="checkbox">
            <input type="checkbox" value="" checked disabled>
        <!-- icon -->
        <span class="cr"><i class="cr-icon fas fa-check"></i></span>
        <!-- text -->
        <span class="checkbox"> option three is disabled </span>
    </label>
</div>

[ashwinzmed]

I too had the same problem and solved with this CSS code for the check and uncheck the box
input[type="checkbox"]:not(:checked)::before { content: "\2610"; color: black; font-size: 18px ; }

input[checked]::before { content: "\2611"; color: black; font-size: 18px ; }