Lag in an input of type text

I'm having a real-time lag problem in a text input of a form. With lag I mean that when writing, since you press a letter until it is displayed on the screen, it takes a few thousandths of a second, and if you write fast it costs more and the problem is more noticeable.

The code I use is the following:

<form <?php if($user != "null") { echo "style='background: #" . $usuario_color['color_fondo'] . ";'";} ?> class="hilo_wrapper" action="crear_hilo.php?foro=<?php echo str_replace(" ", "%",$foro) ?>&subforo=<?php echo $subforo ?>"  method="post">
                <div class="data_hilo">
                    <input <?php echo "style='border-color: #" . $usuario_color['color_principal'] . ";' onmouseover=\"this.style.boxShadow='inset 0 1px 1px #" . $usuario_color['color_secundario'] . ", 0 0 8px #" . $usuario_color['color_secundario'] . "'\" onmouseout=\"this.style.boxShadow='inset 0 0 0 transparent,0 1px 1px transparent'\"" ?> type="text" name="asunto" placeholder="Asunto:" value="<?php if(isset($_POST['vista_previa'])) { echo $asunto; } else if (isset($_POST['crear_hilo'])) { echo $asunto;} else if (isset($_POST['guardar_borrador'])) { echo $asunto;} else if (!empty($info_borradores)) { echo $info_borradores['asunto'];} ?>">
                </div>

                <?php if ($usuario_color['administrador'] == 1): ?>
                    <div style='width:100%; display:flex; flex-wrap: wrap;justify-content: center' class="">
                        <input style='width: 20px;' type="checkbox" name="fijar" value="1" <?php if($fijar == 1 AND isset($_POST['vista_previa'])) { echo "checked";} else if (!empty($info_borradores) AND $info_borradores['hilo_fijado'] == 1) { echo "checked";} else if (isset($_POST['guardar_borrador']) AND $fijar == 1) { echo "checked";} ?>><p style='width:200px'>Marca la casilla para fijar el hilo</p>
                    </div>
                    <div style='width:100%; display:flex; flex-wrap: wrap;justify-content: center' class="">
                        <input style='width: 20px;' type="checkbox" name="relevante" value="1" <?php if($relevante == 1 AND isset($_POST['vista_previa'])) { echo "checked";} else if (!empty($info_borradores) AND $info_borradores['hilo_relevante'] == 1) { echo "checked";} else if (isset($_POST['guardar_borrador']) AND $relevante == 1) { echo "checked";} ?>><p style='width:200px'>Marca como hilo relevante</p>
                    </div>
                    <div style='width:100%; display:flex; flex-wrap: wrap;justify-content: center' class="">
                        <input style='width: 20px;' type="checkbox" name="cerrar" value="1" <?php if($cerrar == 1 AND isset($_POST['vista_previa'])) { echo "checked";} else if (!empty($info_borradores) AND $info_borradores['hilo_cerrado'] == 1) { echo "checked";} else if (isset($_POST['guardar_borrador']) AND $cerrar == 1) { echo "checked";} ?>><p style='width:200px'>Marcar para cerrar el hilo</p>
                    </div>
                <?php endif; ?>

                <?php

                if (!empty($aviso_borrador)) {
                    echo $aviso_borrador;
                }
                ?>

                <?php require 'emoticonos.php' ?>

                <div class="botones_crear_hilo">
                    <?php require 'botones_textarea.php' ?>
                </div>
                <div class="col-100">
                    <textarea <?php echo "style='border-color: #" . $usuario_color['color_principal'] . ";' onmouseover=\"this.style.boxShadow='inset 0 1px 1px #" . $usuario_color['color_secundario'] . ", 0 0 8px #" . $usuario_color['color_secundario'] . "'\" onmouseout=\"this.style.boxShadow='inset 0 0 0 transparent,0 1px 1px transparent'\"" ?> id="txt1" name="texto_hilo" placeholder="Texto:"><?php if (isset($_POST['vista_previa'])) { echo $vista_previa;} else if (isset($_POST['crear_hilo'])) {echo $texto;} else if (isset($_POST['guardar_borrador'])) { echo $texto_sin_etiquetas_html;} else if (!empty($info_borradores)) { echo $info_borradores['texto_sin_etiquetas'];} ?></textarea>

                    <div class="col-emoticonos-enviar">
                        <input <?php if($user != "null") { echo "style='background: #" . $usuario_color['color_principal'] . ";'";} ?> type="submit" name="vista_previa" value="Vista previa">
                        <input <?php if($user != "null") { echo "style='background: #" . $usuario_color['color_principal'] . ";'";} ?> type="submit" name="guardar_borrador" value="Guardar borrador">
                        <input <?php if($user != "null") { echo "style='background: #" . $usuario_color['color_principal'] . ";'";} ?> type="submit" name="crear_hilo" value="Crear hilo">
                    </div>
                </div>


                <?php

                if (!empty($errores)) {
                    echo "<p class='errores'>" . $errores .  "</p>";
                } else if (isset($_POST['guardar_borrador']) AND empty($errores)) {
                    echo "<p class='enviado'>Mensaje guardado en borradores correctamente</p>";
                }


                ?>


            </form>

I have tried to remove the styles and the problem persists. It does not do any checking in real time, only when you click on one of the 3 buttons. In addition, the textarea works perfectly without lag or anything and has more associated things like buttons and emoticons. I do not know what may be due.