How to hide input tag when using window.print()

When using window.print(), I want to hide the ‘print page’ button, input tags and only print the ‘s-wrapper’ area. However, during print preview, input tag without css applied is printed on the preview screen. How to remove input tag?

If I print without specifying a specific area, the ‘s-box’ does not fill the A4 paper and is not printed in the center, and the box is printed on top.

[html]

<button onclick="printthispage()" class="no-print">print page</button>
<div class="s-wrapper" id="print">
    <div class="s-box">
        {% for p in page %}
            {% if p== 'S' and p.slide_number == 1 %} <img src="{{ p.slide.url }}" class="s-page"> {% endif %}
        {% endfor %}
        <input class="no-print S_{{ image.id }}_top1" value="{{ image.s }}">
        <input class="no-print S_{{ image.id }}_top2" value="{{ image.o }}">
        <input class="no-print S_{{ image.id }}_top3" value="{{ image.e }}">
        <input class="no-print S_{{ image.id }}_top4" value="{{ image.t }}">
        <button class="no-print S_{{ image.id }}_det">Detail</button>
    </div>
</div>

<script type="text/javascript">
function printthispage() {
    window.print();
}
function beforePrint() {
    initBodyHtml = document.body.innerHTML;
    document.body.innerHTML = document.getElementById('print').innerHTML;
}
function afterPrint() {
    document.body.innerHTML = initBodyHtml;
}


window.onbeforeprint = beforePrint;
</script>

[css]

@page {
    size: A4 landscape;
    margin:0;
}
@media print{
   .no-print {
       visibility: hidden;
   }
}

.s-page{
    width: 100%;}

.s-wrapper{
    width: 78%;
    margin: 20px auto;}

.s-box{
    position: relative;
    border: 1px solid black;}


input[class$="S_{{ image.id }}_top1"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left }}%;
    right: {{ link.link_right }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top2"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:4 }}%;
    right: {{ link.link_right|add:-4 }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top3"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:8 }}%;
    right: {{ link.link_right|add:-8 }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top4"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:12 }}%;
    right: {{ link.link_right|add:-12 }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top5"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:16 }}%;
    right: {{ link.link_right|add:-16 }}%;
    bottom: {{ link.link_bottom }}%;}

button[class$="S_{{ image.id }}_det"] {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 10%;
    padding: 0.5%;

    position: absolute;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:20 }}%;
    right: {{ link.link_right|add:-20 }}%;
    bottom: {{ link.link_bottom }}%;}