单击提交按钮显示时输入类型 - HTML

一般情况下，HTML表单中的输入控件都是实时显示的，用户在输入文本框中输入内容时，文本框中也会对应显示。但有一些场景，比如表单中的留言框，输入内容较多，为了避免页面的混乱，我们可能希望用户输入后，再点击提交按钮后才显示用户输入的内容，这就需要用到“单击提交按钮显示输入类型”。

实现方法：

实现这个功能的方法相对简单，只需要给对应的输入框设置type="button"，并在点击按钮的时候获取文本框中的值并显示出来就可以了。

<input id="input_text" type="text">
<input id="submit_button" type="button" value="提交" onclick="showInputText()">

<script>
  function showInputText() {
    let text = document.getElementById('input_text').value;
    document.getElementById('show_area').innerHTML = text;
  }
</script>

<div id="show_area"></div>

上述代码中，我们首先声明了一个文本框和一个按钮，文本框的ID为“input_text”，按钮的ID为“submit_button”，在按钮的onclick事件中，我们调用了showInputText函数，获取文本框中的值，并用innerHTML方法将值显示在指定的<div>标签中。

注意事项：

1. 为了避免用户误操作，按钮的type必须设置为button，而不能设置为submit，否则用户点击按钮后会执行表单提交操作，导致页面跳转。
2. 如果多个文本框需要执行相同的操作，可以将showInputText函数提取到单独的JS文件中，然后在每个按钮的onclick事件中调用该函数。
3. 在获取文本框中的值时，要注意判断用户是否输入了内容，如果文本框为空，就不需要执行后面的代码了。

结论：

单击提交按钮显示时输入类型是一种比较常用的表单交互方式，可以减少页面的混乱，让表单更加美观易用。同时，这种交互方式的实现也很简单，只需要用JS获取文本框中的值，并将其显示在指定的位置即可。