How do I open an input box in HTML?

Question

I want to be able to click a button, open an input box and, after closing it, creating a new element in the document body. I started by (of course) using the onclick event in the button and reffering it to a function that would create the thingy, but I don't how to create an entire new tag (which, in this case, would be the <input> with a z-index to show it in front of the user. Could I code the element as hidden and use the function to change the display value then? That would be too inefficient, I guess.

Answer 1

Actually, what you could do is just type in the tag within a document.write() function (in quotes), which will also allow you to add your own attributes to it too, just like in HTML.

For example:
document.write("<input id = 'id'></input>");

Answer 2

TL:DR HALP ME

Answer 3

last time I did web design, you needed to use a script with PHP/Javascript. I preferred JQuery.
you could try CSS display: none then "onclickevent" display: span/block. In essence you just hide the "new" element from the user. Then show it when the button is clicked. CSS wise you have to "style" it while it's visible first. Faisal's answer would be your best bet:
$("buttonCallForm" ).click(function() { // idk been a while :P
$("myForm").show();
});

read through the JQuery API its quite easy: https://api.jquery.com/click/