CSS Display to list-item not working

I am doing a page on html, JavaScript and CSS. Here is the issue:

When I check some boxes and click on the button for the result, the form is not giving me the result in a list-item.

Here is the code , basically I activated list-item on display but nothing its not working, can you give me a hand?

function myFunction() {
  var regua = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < regua.length; i++) {
    if (regua[i].checked) {
      txt = txt + regua[i].value + " ";
    }
  }
  document.getElementById("order").value = "Line: " + txt;
}

input[type=text] {
  display: list-item;
  width: 100%;
  height: 70%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

<div class="form2">
  <form name="form2">
    <form action="send">
      <input type="button" onclick="myFunction()" value="Resultado">
      <input type="text" id="order" size="20">
      <input type="checkbox" class="checkbox1" id="check1" value="TEST1" />
      <input type="checkbox" class="checkbox2" id="check2" value="TEST2" />