[wp-testers] 2 bugs in rendering html forms with WP-RC3 and Tiny MCE

david saroe.fr at gmail.com
Sat Mar 29 12:06:26 GMT 2008


I found 2 bugs related to html forms. Sorry for this long message.

First, with Tiny MCE: when you edit a page that contains a html form
(eg. a contact form), it cuts the content after the first </textarea>
tag. It always appears when you edit a page (not tested with a post)
and you use Tiny MCE by default as the first editor. If the HTML is
the first editor displayed, there is no such bug.
The rest of the content is displayed below, thus outside the edit area.
See the picture here:
<http://demo21.ovh.com/5bfed4cf73c151b9fc0f6b5e71f4bc87P/?see=bug-tiny-mce-and-form.png>
You see, above the "send it" button? Then, everything below this
separation is lost, it is not in the edit area anymore (no "send it"
button, no privacy statements, etc.), even if I switch to the HTML
area. This cutting always happens after the first </textarea> tag when
Tiny MCE is activated first.

Second bug: In a form, when there should be a line break, instead of
adding "<br />", WP RC3 (and also RC2 before) adds "</p>" instead. But
there is no beginning "<p>". So the layout of the form is a mess! But,
I think it is a bit more complicated, sometimes there is a <br/ >
See picture here:
<http://demo21.ovh.com/5bfed4cf73c151b9fc0f6b5e71f4bc87P/?see=rendering-form-RC3.png>
After "name:" there should be a line break, the checkbox should be in
a new line, etc.

Excerpt of the genuine code displayed in the wordpress admin area
(with the good line breaks):
-------------------
<form action="/cgi-bin/mail.cgi" method="post">
<label><strong>Name:</strong></label>
<input maxlength="80" name="name" size="40" type="text" /> * <span
style="color: #006633; font-size: small;">required</span>

<label><strong>E-mail:</strong></label>
<input maxlength="80" name="email" size="40" type="text" /> * <span
style="color: #006633; font-size: small;">required</span>

<input name="confirmation_message" type="checkbox" value="1"
/><strong>Receive a copy of this message to your e-mail
address</strong>.

<label><strong>Subject:</strong></label>
<input maxlength="80" name="subject" size="40" type="text" /> * <span
style="color: #006633; font-size: small;">required</span>

<label><strong>Message:</strong></label>
<textarea style="width:450px;" cols="55" rows="15" name="message"></textarea>

<input style="font-size:1.5em;" name="submit_form" type="submit"
value=" SEND IT " />
</form>
-------------------

Now, the html code interpreted by WP RC3 :
-------------------
<form action="/cgi-bin/mail.cgi" method="post">
<label><strong>Name:</strong></label></p>
<input maxlength="80" name="name" size="40" type="text" /> * <span
style="color: #006633; font-size: small;">required</span></p>
<p><label><strong>E-mail:</strong></label></p>
<input maxlength="80" name="email" size="40" type="text" /> * <span
style="color: #006633; font-size: small;">required</span></p>
<input name="confirmation_message" type="checkbox" value="1"
/><strong>Receive a copy of this message to your e-mail
address</strong>.</p>

<p><label><strong>Subject:</strong></label></p>
<input maxlength="80" name="subject" size="40" type="text" /> * <span
style="color: #006633; font-size: small;">required</span></p>
<p><label><strong>Message:</strong></label><br />

<textarea style="width:450px;" cols="55" rows="15"
name="message"></textarea></p>
<input style="font-size:1.5em;" name="submit_form" type="submit"
value=" SEND IT " />
</form>
-------------------

If some </p> after </label> are replaced by <br>, everything should be fine.

Using WP RC3 (same bug with RC2), Firefox 3.0b4, Mac 10.5.2.
Safari 3.1 displays a better result by fixing this bug, interpreting
the lonely </p> as a <br />, but the source code, is still wrong.

Hope this help.

David.


More information about the wp-testers mailing list