CODEWITHSUNDEEP
javascripthtml
Hobittual
Hobittual

Reputation: 133

I am trying to create a form using a table for the inputs

As I say, I am using a table to create a form. input-small and its label fits great in various places. I have opened up three rows in one column to place a 3 row textarea. Simple I thought, but I get a messed up table that appears OK in the live view but has half the input-small placeholders are missing, in the design view (Dreamweaver)it is full of broken tags. Here is the code without the textarea and with.

Without

    <table width="581" border="0" summary="Contact">
  <caption>
    Personal Details
  </caption>
  <tr>
    <td width="120">Full Name</td>
    <td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
    <td width="71">Phone</td>
    <td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
  </tr>
  <tr>
    <td>Postal Address</td>
    <td rowspan="4">&nbsp;</td>
    <td>Email</td>
    <td><input class="input-small" type="text" placeholder=".input-small"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">Emergency Contact</td>
    <td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Postcode</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

With

    <table width="581" border="0" summary="Contact">
  <caption>
    Personal Details
  </caption>
  <tr>
    <td width="120">Full Name</td>
    <td width="226"><input class="input-small" type="text" placeholder=".input-small"></td>
    <td width="71">Phone</td>
    <td width="146"><input class="input-small" type="text" placeholder=".input-small"></td>
  </tr>
  <tr>
    <td>Postal Address</td>
    <td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></td>
    <td>Email</td>
    <td><input class="input-small" type="text" placeholder=".input-small"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">Emergency Contact</td>
    <td rowspan="2"><input class="input-small" type="text" placeholder=".input-small"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Postcode</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Cheers

Upvotes: 0

Views: 34

Answers (2)

Lock
Lock

Reputation: 5522

Close off the field with </textarea>:

<textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea>

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Your problem is that the textarea is not closed:

<td rowspan="4"><textarea rows="3" class="input-xxlarge" placeholder=".input-xxlarge"></textarea></td>

See </textarea>. It is needed.

Upvotes: 1

Related Questions