Form fields have space in them

Question

My form fields have space in them, if I select and delete this space my prefilled text shows back up. I don't know what to make of this and have been trouble shooting all day. Any ideas? Here is my code...

<?php
include '_include/php/header.php';
#set variables to be used in the header
$page_title = "Assesment";
?>
<div class="page" id="subheader">
    <div class="container">
        <!-- Title Page -->
        <div class="row">
            <div class="span12">
                <div class="title-page">
                    <h2 class="title">Four simple steps...</h2>
                    <h3 class="title-description">To dictate what you need
                    in a website</h3>
                </div>
            </div>
            </div><!-- End Title Page -->
            <!-- submenu -->
            <?php
            include '_include/php/submenu.php'; ?>
        </div>
        </div><!-- End sub header -->
        <!-- main Section -->
        <div class="page" id="contact">
            <div class="container">
                <!-- Title Page -->
                <div class="row">
                    <div class="span12">
                        <div class="title-page">
                            <h2 class="title">Assesment - Step One</h2>
                            <h3 class="title-description">Status: <span class=
                            "color-text"><?php echo $assessresult; ?></span></h3>
                        </div>
                    </div>
                    </div><!-- End Title Page -->
                    <!-- main Form -->
                    <div class="row">
                        <div class="span9">
                            <form action="assessment_submitted.php" class="contact-form" id="contact-form"
                                method="post" name="contact-form">
                                <h3 class="color-text">What do you wish to get out of
                                your website?</h3>
                                <p class="contact-message">
                                <textarea required cols="10" id="client-goals" name=
                                "client-goals" placeholder=
                                "What do you wish to acheive by having a website? ie. creating a web presence, expanding sales by creating an online market, networking, ect."
                                rows="5">
                                </textarea></p>
                                <h3 class="color-text">What key fatures are you looking
                                for?</h3>
                                <p class="contact-message">
                                <textarea required  cols="10" id="client-needs" name=
                                "client-needs" placeholder=
                                "What key features are you looking to have within your website? ie. storefront, social media intigrtion, a blogging platform, content managment system, ect."
                                rows="5">
                                </textarea></p>
                                <script type = "text/javascript" >
                                var i = 1;

                            function addUrl() {
                                    if (i < 3) {
                                        i++;
                                        var p = document.createElement('p');
                                        p.innerHTML =
                                            '<hr><textarea required  id="client-needs" placeholder="Add URL #' + i +
                                            '" name="example' + i +
                                            '" rows="1" cols="10"><\/textarea><input type="button" value="Remove added URL" onclick="removeUrl(this)">';
                                        document.getElementById('example').appendChild(p);
                                    } //END if
                                } //END addUrl function

                            function removeUrl(textarea) {
                                    textarea.parentNode.parentNode.removeChild(textarea.parentNode);
                                    i--;
                                } //END removeUrl function
                                </script>
                                <h3 class="color-text">Do you have and examples of what
                                you want?</h3>
                                <p class="contact-message" id="example">
                                <textarea cols="10" id="examples" name="example1"
                                placeholder="Do you know of any website like the one you want? ie. google.com, p5services.com, youtube.com"
                                rows="1">
                                </textarea></p><br>
                                <input onclick="addUrl()" type="button" value=
                                "Add url example">
                                <h3 class="color-text">Do you have a budget in
                                mind?</h3>
                                <p class="contact-message">
                                <textarea required cols="10" id="client-budget" name=
                                "client-budget" placeholder=
                                "Enter a budget, approximate or exact. This will help us decide if the scope of your project is in line with what you are interested in spending"
                                rows="2">
                                </textarea></p>
                                <h3 class="color-text">Do you have a timeline or
                                deadline?</h3>
                                <p class="contact-message">
                                <!-- <textarea id="client-deadline" placeholder="When do you need this done by?" name="client-deadline" rows="2" cols="10"></textarea> -->
                                <!-- <input id="client-deadline" name="client-deadline"
                                type="date"></p> -->
                                <!-- add a call to action for further services later -->
                                <h3 class="color-text">Any other comments?</h3>
                                <p class="contact-message">
                                <textarea cols="10" id="client-comments" name=
                                "client-comments" placeholder=
                                "Don't let us over look anything!" rows="5">
                                </textarea></p>
                                <p class="contact-submit"><input name=
                                "submit_assessment" type="submit" value=
                                "Save New Record"></p>
                                <div id="response"></div>
                            </form>
                        </div>
                        <div class="span3">
                            <div class="contact-details">
                                <h3><span class="font-icon-info"></span> Assesment
                                Objective</h3>
                                <p>The assesment section is used to define your needs
                                and help us decided what tool we need to impliment in
                                order to help you reach your goals</p>
                                <h4 class="color-text">After submitting this you will
                                recive a quote!</h4>
                            </div>
                        </div>
                        </div><!-- End main Form -->
                    </div>
                    </div><!-- End main Section -->
                    <?php
                    include '_include/php/footer.php'; ?>

Answer 1

The textarea element takes placeholder text in a different form. You need to put it between the tags like so:

<textarea>My text area placeholder text goes here</textarea>

The space that you are seeing then deleting to see your placeholder is caused by the line break between your opening and closing textarea tags