Use a DIV as an input

Question

Sorry if this question is very basic, but I'm trying to get back into programming and I'm stuck with this.

I want to have text input into a <div> in HTML, but I don't want the default chat box that comes with <input>. I just want it to directly print to a location within the <div>.

How can I do this?

Answer 1

You can use contenteditable attribute if you don't wanna submit its value to the server, just like this :

<div contenteditable="true">I'm Editable. Edit me!</div>

So that user can edit the text but it's not gonna be sent to the server and it's just a client side stuff.

But if you need to submit the value to the server you have to use TextArea or Input tag and remove the borders by CSS styles. Say :

<input id="myText" type="text" style="border:none; background: transparent; outline: 0;"/>

Answer 2

Use a <div>

Make the div itself a text input (as you mentioned in the comments) by using contenteditable attribute:

<div contenteditable="true" style="outline:0px;">Hodor!</div>

JSFiddle

To get the value you can use jQuery $("div").text() or js textContent

To use the <div> inside a <form> add some js to wire it up. You can see an example here.

Use a <textarea>

You can also use a <textarea> if you hide some properties:

<textarea style="resize:none;overflow:auto;
        border:0px;outline:0px;background-color:transparent;">
    Hodor!
</textarea>

JSFiddle

To get the value you can use jQuery $("textarea").val() or js value