22

I am trying to add line breaks (aka newlines) to values of the input-element. 
, 
, 
 
 and \n aren't working; still everything is on one line.

I haven't found an answer to this question amongst other questions that solves my problem. Thanks in advance.

Improve this question

4 Answers 4

Reset to default
23

I don't actually think you can have line breaks for those types of form elements. You may have to use a <textarea> tag which allows for literal line breaks:

<textarea id="multiliner" name="multiliner">line1
line2
line3</textarea>

Improve this answer
1
  • 2
    I was a little bit hasty and didn't mention that I was only able to work with elements that work with Clipboard.js and don't force a discontiguous error. However, both <input> and <textarea> work nicely with Clipboard.js, and <textarea> plays nicely with line break html entities. Thanks very much for your help.
    – DanMad
    Commented Mar 12, 2017 at 5:04
12

The HTML input elements, type text or something similar (such as email) will deliberately strip off all line breaks, so that’s not going to work.

The only form element which will accept line breaks is the textarea.

Incidentally, Clipboard.js works by creating a dummy textarea element to do its magic.

Improve this answer
0
-1

you can use div element and pass an attribute 'contenteditable="true"'

<div class="input-box" contenteditable="true">your inputs</div>

// css
.input-box {
  word-wrap: break-word;
  word-break: break-word;
}
Improve this answer
1
  • <div name="your_input_name" class="input-box" contenteditable="plaintext-only" >your inputs</div> Then take name=your_input_name through javascript and post it. Gladwin contenteditable="plaintext-only" may be better.
    – Hakan
    Commented Apr 23 at 19:14
-4

Use <br> for line breaks, see below

<input type="radio" name="table" value="info">Info<br>
Improve this answer
1
  • 2
    I think the OP want inside the input, not outside
    – Vega
    Commented Jun 19, 2021 at 16:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.