Line breaks in textarea element

Question

This is PURE HTML. (no php or anything like that, if you want to know the background its a C# application with HTML in a web view).

All my HTML files are nicely formatted and correctly indented for maintainability and such.

Here is an excerpt:

<tr>
    <td class="label">Clinic Times:</td>
    <td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:
    Tuesday:
    Wednesday:
    Thursday:
    Friday:
    Saturday:
    Sunday:</textarea></td>
</tr>

The line breaks in the <textarea></textarea> element are there to get the line breaks on the page. However it also includes the indentation in the textarea element.

e.g.

The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting? Thanks.

Answer 1

You could use the 
 (it means new line in html) but maybe that's not a nice formatting, like you said...

The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting?

<tr>
  <td class="label">Clinic Times:</td>
  <td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:&#10;Tuesday:&#10;Wednesday:&#10;Thursday:&#10;Friday:&#10;Saturday:&#10;Sunday:</textarea></td>
</tr>

Answer 2

There isn't a pure HTML solution to your problem. Textareas always display any whitespace in their contents.

In a perfect world, you'd be able to take advantage of the CSS property white-space; unfortunately, it isn't applied to textareas either.

Answer 3

You can use <div> with contenteditable attribute:

<div contenteditable="true" style="width: 450px; height: 300px; white-space: pre-line;" name="familyPlanningClinicSessionsClinicTimes">Monday:
                            Tuesday:
                            Wednesday:
                            Thursday:
                            Friday:
                            Saturday:
                            Sunday:</div>

But in your case I think idea solution will be just using several ordinary text boxes, one for each day:

Monday: <input type="text" name="familyPlanningClinicSessionsClinicTimesMonday" /><br />
Tuesday: <input type="text" name="familyPlanningClinicSessionsClinicTimesTuesday" /><br />
...

Answer 4

Nope; a textarea will spit back whatever it actually has.

You could inject the value from JavaScript, but that seems like a lot of work for an isolated thing.

Answer 5

In C# if you want to send a new line to a textarea you can use Environment.NewLine

Answer 6

If you merely want a list of items, you can use <ul> <li>"Monday"</li> <li>"Tuesday"</li> ... </ul>
Using <ul><li></li></ul> will start a preformatted list with <ul> starting the list and <li> starting each item on the list. This method does not require any java or css and will auto indent.

Answer 7

Try <br/> if it is good for you:

Monday:<br/>Tuesday:<br/>...