Adding Bullets to Preset Textarea Output - PHP - php

Question

I am trying to add bullets to my defined texture output. I simply created a textarea in php with some preset text. How can I preface each piece of preset text with a bullet. I want the text in my textarea to look like this:
Name:
Address:
DOB:
Favorite Drink:
Here is my PHP code:
<?php
echo "<textarea name='' id='' style='width: 565px;' rows='8' cols='60'>";
echo "Name:";
echo "Address:";
echo "DOB:";
echo "Favorite Drink:";
echo "</textarea>";
?>
Thanks so much for your help!

Answer 1

If you must use a textarea, you can add the 'bullet' HTML entity in the string...
<?php
echo "<textarea name='' id='' style='width: 565px;' rows='8' cols='60'>";
echo "• Name:";
echo "• Address:";
echo "• DOB:";
echo "• Favorite Drink:";
echo "</textarea>";
?>
Otherwise, you can go with an unordered list as #Tim Hunter suggested:
<?php
echo "<ul>";
echo "<li>Name:</li>";
echo "<li>Address:</li>";
echo "<li>DOB:</li>";
echo "<li>Favorite Drink:</li>";
echo "</ul>";
?>

Answer 2

To write something in text area with bullets prefix, I code it with div instead of textarea, follow the below code snippets.
<?php
echo '<div class="editable" contenteditable="true">
<ul>
<li>List item1</li>
<li>List item2</li>
<li>List item3</li>
......
<li>List item(n)</li>
</ul>
</div>';
?>

Answer 3

I don't think it's possible to add bullet points inside a regular textarea. You could make an editable section or div with bullet points in it, but I don't think this works well with a form.
Also, putting the bullet points inside the textarea will allow users to delete them.
Since I assume you would be submitting the input in a form at some point, why not use regular inputs wrapped in li elements? That way, you can use the inputs in a submittable form, and the bullet points can't be deleted.
You can even style it to look like one big textarea!
<style>
#form { border: solid #666 1px; border-radius: 3px; }
#form input { border: 0; -webkit-appearance: none; background-color: unset; }
#form input:focus { outline: none; }
</style>
<form id="form">
<ul>
<li>Name: <input type="text" placeholder="Name"></li>
<li>Address: <input type="text" placeholder="Address"></li>
<li>DOB: <input type="text" placeholder="DOB"></li>
<li>Favorite Drink: <input type="text" placeholder="Favorite Drink"></li>
</ul>
</form>
http://jsfiddle.net/7tw21m3o/ <--- in action