222 votes

L'espace réservé du textarea HTML5 n'apparaît pas

Je n'arrive pas à comprendre ce qui ne va pas dans mon balisage, mais l'espace réservé à la zone de texte n'apparaît pas. Il semble qu'il soit recouvert d'espaces vides et de tabulations. Lorsque vous vous concentrez sur la zone de texte et que vous supprimez à partir de l'endroit où le curseur se place, puis que vous quittez la zone de texte, l'espace réservé approprié apparaît alors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

797voto

Aquarelle Points 633

Cette question a toujours été un piège pour moi et pour beaucoup d'autres. En bref, les balises d'ouverture et de fermeture de la balise <textarea> doit être sur la même ligne, sinon un caractère de nouvelle ligne l'occupe. L'espace réservé ne sera donc pas affiché puisque la zone de saisie contient du contenu (un caractère de nouvelle ligne est, techniquement, un contenu valide).

Bien :

<textarea></textarea>

Mauvais :

<textarea>
</textarea>

Mise à jour (2020)

C'est pas vrai plus, selon la spécification d'analyse du HTML5 :

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

Vous risquez cependant de rencontrer des difficultés si votre éditeur insiste pour que les lignes se terminent par CRLF.

56voto

Mahendra Points 474

Supprimez tous les espaces et les sauts de ligne entre <textarea> ouverture et fermeture </textarea> tags.

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

11voto

matthew Points 61

C'est parce qu'il y a un espace quelque part. J'utilisais jsfiddle et il y avait un espace après la balise. Après avoir supprimé l'espace, ça a commencé à fonctionner.

5voto

Conny P Points 51

Techniquement, il n'est pas nécessaire qu'ils soient sur la même ligne tant qu'il n'y a pas de caractère entre le ">" de la balise de début et le "<" de la balise de fin. C'est-à-dire que vous devez terminer par ...></textarea> comme dans l'exemple ci-dessous :

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

4voto

SpicyTacos23 Points 420

Je sais que ce message a été (très bien) répondu par Aquarelle mais juste au cas où quelqu'un aurait ce problème avec d'autres formulaires de balises sans texte comme les entrées, je vais laisser ce message ici :

Si vous avez une entrée dans votre formulaire et que l'espace réservé n'apparaît pas à cause d'un espace blanc au début, cela peut être dû à votre attribut "value". Si vous utilisez des variables pour remplir la valeur d'une entrée, vérifiez qu'il n'y a pas d'espace blanc entre les virgules et les variables.

exemple d'utilisation de twig pour le framework php symfony :

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder 

Dans ce cas, la balise entre {{ }} est la variable. Veillez simplement à ne pas laisser d'espaces entre les virgules, car les espaces blancs sont également des caractères valides.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X