Show an input text field as plain text

Question

I want to have a sort of editable div like this:

<div onClick="this.contentEditable='true';">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>

But it has to be an input field so it's submitted when you submit the form with the input field in it. Does someone knows how I can show the input field just as plain text with a placeholder?

Solution 1

I have made a little fiddle as I'm not 100% sure what you are asking for so I covered a few things. Some have been mentioned already as I was writing this but still lets have a look.

HTML:

So you can have two things here, textarea and input. We will start with inputs (although they are pretty much the same depending on what you want to do with them)

Input w/ no border:
<input class="noborder" />

Input w/ no border or outline:
<input class="nothing" />

Input w/ no border:
<input class="noborder" placeholder="Placeholder here" />

Moving on to textarea, as you can see we are using the same class's (view below the code) as there is no need to change any CSS for the textarea.

Textarea w/ no border:
<textarea class="noborder"></textarea>

Textarea w/ no border or outline:
<textarea class="nothing"></textarea>

This one uses readonly, it does exactly as it says. If you look at the demo I have linked at the bottom you will see it does not allow you to edit. I very rarely see it so not sure if there is something bad about it but none the less its an option. The second one like one of the inputs above has a placeholder.

Textarea w/ readonly:
<textarea class="nothing" readonly>Try edit</textarea>

Textarea w/ readonly:
<textarea class="nothing" placeholder="Placeholder here" readonly></textarea>

CSS:

.noborder {
    border: 0;
}
.nothing {
    border: 0;
    outline: none;
}

DEMO HERE

I hope this helps, good luck!

Solution 2

<input style="border:0" name="" placeholder="type here"/>

or

<textarea rows="4" cols="50" style="border:0" placeholder="type here"></textarea>