如何防止HTML表单输出样式化？

Question

我正在构建一个表单，该表单接受包含几个texareas的输入，并输出输入到表单下方同一页面上这些字段中的内容。效果很好，除了当我在任何文本区域中粘贴多行代码段时，输出看起来都不像我最初粘贴的那样。

如何防止#results div中的代码样式化？

这是屏幕截图，显示了texarea元素的输出未对齐和格式错误。从“ FILE”到“ TAGS”标题的所有内容都会显示并正确设置格式。

我在为此找到合适的长尾术语时遇到了麻烦，因此我正在向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 = "<span class='line-title'>FILE: </span>" + filename + "<br>";
    var dateCreatedOut = "<span class='line-title'>DATE CREATED: </span>" + dateCreated + "<br>";
    var dateModifiedOut = "<span class='line-title'>DATE MODIFIED: </span>" + dateModified + "<br>";
    var postURLOut = "<span class='line-title'>URL: </span>" + postURL + "<br>";
    var postTitleOut = "<span class='line-title'>TITLE: </span>" + postTitle + "<br>";
    var postTagsOut = "<span class='line-title'>TAGS: </span>" + postTags + "<br>";
    var postContentOut = "<span class='line-title'>CONTENT: </span>" + "<pre>" + postContent + "</pre><br>";
   
    // Add each line item html snippet to array
    outPartsArr.push(filenameOut, dateCreatedOut, dateModifiedOut, postURLOut, postTitleOut, postTagsOut, postContentOut);
   
    console.log("%c            postContent             ","background:orange");
    console.log(postContent);
    
    out += "<ul class='row-lines'>"
    
    // loop through out parts array and wrap each in <li> tags
    //  while building the out string
    outPartsArr.forEach(function(part, i) {
    
        out += "\t<li>" + part + "</li>";
        
    });
    
    out += "</ul>";
    
    console.log("%c            out             ","background:orange");
    console.log(out);

    
    // display in results div
    document.querySelector('#results').innerHTML = out;
    
    // #GOTCHA --> Without this return statement output appears for a milisecond
    // then the form refreshes.
    return false;
    
    
};

* {
    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 -->