Как предотвратить вывод стилей HTML-формы?

Question

Я создаю форму, которая принимает входные данные, включая несколько текстовых областей, и выводит то, что было введено в эти поля на той же странице под формой. Он отлично работает, за исключением того, что когда я вставляю фрагмент кода из нескольких строк в любой из текстовых полей, вывод не выглядит так, как я вставил изначально.

Как я могу предотвратить стилизацию кода в моем #results div?

Вот снимок экрана, показывающий, что выходные данные элементов texarea выровнены неправильно и неправильно отформатированы. Все, начиная с заголовка «ФАЙЛ» и заканчивая «ТЕГИ», отображается и правильно отформатировано.

У меня возникли проблемы с поиском подходящего длинного термина для Google, поэтому я обращаюсь к сообществу Stack Overflow за помощью. Возможно, кто-то может сказать мне , что правильный термин для этого вида

output produced from self-submitting form

Мой код:

submit.onclick = function() {
    // build html output
    
    document.querySelectorAll('input, textarea').value = "";
    
    var out = "";
    //var form = document.querySelector('form');
    
    var outPartsArr = [];

    /* GATHER FORM VALUES */
    
    var filename = document.querySelector('#filename').value;
    var dateCreated = document.querySelector('#date-created').value;
    var dateModified = document.querySelector('#date-modified').value;
    var postURL = document.querySelector('#post-url').value;
    var postTitle = document.querySelector('#post-title').value;
    var postTags = document.querySelector('#post-tags').value;
    var postContent = document.querySelector('#post-content').value;
  
    /* GET TIME */
    // from: https://www.codexworld.com/how-to/get-current-date-time-using-javascript/
    var today = new Date();
    var yy = today.getFullYear().toString().substr(-2);
    var mm = today.getMonth()+1;
    var dd = today.getDate() < 10 ? "0" + today.getDate() : today.getDate() ;
    
    var date = mm + "/" + dd + "/" + yy;
    
    var hh = today.getHours() > 12 ? today.getHours() - 12 : today.getHours();
    var mm = today.getMinutes();
    
    var time = hh + ":" + mm;
       
    
    /* BUILD OUTPUT */
    
    var filenameOut = "FILE: " + filename + "
";
    var dateCreatedOut = "DATE CREATED: " + dateCreated + "
";
    var dateModifiedOut = "DATE MODIFIED: " + dateModified + "
";
    var postURLOut = "URL: " + postURL + "
";
    var postTitleOut = "TITLE: " + postTitle + "
";
    var postTagsOut = "TAGS: " + postTags + "
";
    var postContentOut = "CONTENT: " + "" + postContent + "

"; // Добавить каждый фрагмент HTML-строки в массив outPartsArr.push (filenameOut, dateCreatedOut, dateModifiedOut, postURLOut, postTitleOut, postTagsOut, postContentOut); console.log ("% c postContent", "background: orange"); console.log (PostContent); out + = "

• теги // при построении строки outPartsArr.forEach (function (part, i) { out + = "\ t
• " + part + "

"; console.log ("% c out", "background: orange"); console.log (уходит); // отображаем в div результатов document.querySelector ('# results'). innerHTML = out; // #GOTCHA -> Без этого оператора возврата выводится на миллисекунду // тогда форма обновляется. вернуть ложь; };

* {
    box-sizing: border-box;
}

body {
    width: 100%;
}

#wrapper {
    max-width: 1024px;
    width: 80%;
    border: solid gray 1px;
    margin: 2em auto;
    padding: 1.2em
}

form {
    border: solid red 2px;
    background: aliceblue;
    margin-bottom: 1.5em;
    padding: .6em;
}

form label {
    margin-right: 0;
    padding-right: 0;
    width: 200px;
    float: left;
    font-family: Arial, Tahoma, sans-serif;
    font-weight: bold;
    
}

form input {
    padding: .4em .6em;
    margin-bottom: .4em;
    width: 80%;
}

form input[type="submit"] {
    background: green;
    color: white;
    margin-top: 1em;
    width: 6em;
    border-radius: .3em;
    margin-left: 0;
}

textarea {
    width: 80%;
    height: 10em;
    /*resize: both;*/
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #999;    
}

/* OUTPUT */

#results {
    padding: 2em .6em;
    background: #ffffb3;
    border: solid brown 1px;
}

#results h3 {
    font-family: Arial, Tahoma, sans-serif;
    color: brown;
}

.line-title {
    font-weight: bold;
    float: left;
    width: 10em;
    color: brown;
    font-family: Arial, Tahoma, sans-serif;
    line-height: 1.2em;
}

.row-lines li {
    line-height: 2em;
    list-style: none;
}

<div id="wrapper">

<header class="content">

<h1>Eric Hepperle's Stack Overflow Post Builder (2018)</h1>

<p>Some header tag line or other introductory text.</p>

</header>

<main>

<form id="stack-post-builder" method="GET" action="#">

    <label for="filename">FILE:</label>
    <input type="text" id="filename" name="filename" value="" ><br>
    
    <label for="date-created">DATE CREATED:</label>
    <input type="text" id="date-created" name="date-created" value=""><br>
    
    <label for="date-modified">DATE MODIFIED:</label>
    <input type="text" id="date-modified" name="date-modified" value=""><br>

    <label for="post-url">URL:</label>
    <input type="text" id="post-url" name="post-url" value="" ><br>

    <label for="post-title">TITLE:</label>
    <input type="text" id="post-title" name="post-title" value="" ><br>
        
    <label for="post-tags">TAGS:</label>
    <textarea id="post-tags" name="post-tags" placeholder="Enter post tags"></textarea><br>
        
    <label for="post-content">CONTENT:</label>
    <textarea id="post-content" name="post-content" placeholder="Enter post tags"></textarea><br>
    
    
    <!-- <input type="submit" id="stack-post-builder-submit" name="stack-post-builder-submit" value="Submit"> -->
    <input type="submit" id="submit" name="submit" value="Submit">
    
    

</form>

<section id="results">Results will show up here.</section>

</main>

</div><!-- END wrapper div -->