求助：为HTML表单添加JS提交后动态展示表单内容功能

问题需求 #

我正在创建HTML表单，但对JS了解有限，希望实现以下功能：用户填写表单并点击按钮后，显示包含表单输入值的文本（示例：输入姓名Luis、邮箱luis@test.com后，显示“你好Luis，你的邮箱是：luis@test.com”）。

初始HTML表单代码 #

<label class="label" for="name">Nome do Código</label>
<input class="field" type="text" placeholder="Digite o nome do código..." />
<label class="label" for="name">Linguagem</label>
<select class="field">
    <option value="code">CSS</option>
    <option value="code">JS</option>
    <option value="code">PHP</option>
</select>
<label class="label" for="name">Como usar?</label>
<input class="field" type="text" placeholder="Explique como o código será usado..." />
<label class="label" for="name">Código</label>
<textarea class="field" placeholder="Cole o código aqui." /></textarea>
<button class="button" type="submit">Enviar sua mensagem</button>

当前编写的代码 #

<label for="nome">Título do Código</label>
<input type="text" name="nome" id="nome" placeholder="Digite o título do código...">

<label for="nome">Linguagem</label><label id="cor" for="cor">//Para colorir o texto.</label>
<select type="text" name="ling" id="ling">
    <option value="css">CSS</option>
    <option value="js">JS</option>
    <option value="php">PHP</option></select>

<label for="como">Como usar?</label>
<input type="text" name="como" id="como" placeholder="Explique como o código será usado...">

<label for="code">Código</label>
<textarea rows="5" name="code" id="code" placeholder="Cole o código aqui."></textarea>

<button id="enviar" onclick="mostrarMensagem()">🔥 GERAR MEU CODIGUINHO</button>

<label id="title" for="nome" >Copie o código abaixo:</label>

<pre id="mensagem"></pre>

<script>
  function mostrarMensagem() {

    const nome = document.getElementById('nome').value
    const ling = document.getElementById('ling').value
    const como = document.getElementById('como').value
    const code = document.getElementById('code').value

    const mensagem = document.getElementById('mensagem')

   mensagem.innerHTML = ("**" + nome +"**<br>```"+ ling +"<br>" + code +"``` <br></br> > **Como usar:** " + como)
  }
</script>

修正后的完整代码及说明 #

你的代码已经接近需求，只需调整几个细节即可正常运行：

1. 给初始表单的每个输入控件添加唯一id，修正<select>的option值（原代码所有选项值都是code，需改为对应语言标识），修复<textarea>的错误闭合格式；
2. 优化JS逻辑，用更适配<pre>标签的方式拼接内容，避免HTML标签干扰文本格式。

以下是修正后的完整代码：

<!-- 表单区域 -->
<label class="label" for="nome">Título do Código</label>
<input class="field" type="text" id="nome" placeholder="Digite o título do código..." />

<label class="label" for="ling">Linguagem</label>
<select class="field" id="ling">
    <option value="css">CSS</option>
    <option value="js">JS</option>
    <option value="php">PHP</option>
</select>

<label class="label" for="como">Como usar?</label>
<input class="field" type="text" id="como" placeholder="Explique como o código será usado..." />

<label class="label" for="code">Código</label>
<textarea class="field" rows="5" id="code" placeholder="Cole o código aqui."></textarea>

<button class="button" onclick="mostrarMensagem()">🔥 GERAR MEU CODIGUINHO</button>

<!-- 结果展示区域 -->
<label id="title">Copie o código abaixo:</label>
<pre id="mensagem"></pre>

<script>
function mostrarMensagem() {
    // 获取输入值并去除前后空格
    const nome = document.getElementById('nome').value.trim();
    const ling = document.getElementById('ling').value;
    const como = document.getElementById('como').value.trim();
    const code = document.getElementById('code').value.trim();

    const mensagemElement = document.getElementById('mensagem');

    // 用换行符拼接内容，适配pre标签的格式特性
    const conteudo = `**${nome}**
\`\`\`${ling}
${code}
\`\`\`

> **Como usar:** ${como}`;

    // 用textContent设置内容，避免HTML解析问题
    mensagemElement.textContent = conteudo;
}
</script>

关键细节说明 #

• 每个输入控件的id是JS获取值的唯一标识，必须确保唯一且对应；
• 修正<select>的option值后，JS才能拿到正确的语言标识；
• 使用textContent给<pre>赋值，能保留文本的换行和空格格式，避免HTML标签干扰；
• 添加trim()去除输入内容前后的空格，让展示内容更整洁。

内容的提问来源于stack exchange，提问作者Luis Carvalho