Title: Variable input length in table
Last modified: March 12, 2023

---

# Variable input length in table

 *  [hsysgrp](https://wordpress.org/support/users/hsysgrp/)
 * (@hsysgrp)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/)
 * How to create an input space spanning more than one row? The last two fields 
   are the varchar limit, how do I create an input vertical text block to accommodate
   this? Previous efforts run off of the page.
 *     ```wp-block-code
       <style>
       table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
       }
       </style>
       <form action="https://www.hawesfamilyassociation.com/wp-content/themes/twentyfourteen-child/HFA_insertMembers.php" method="post">
       <table style="width:90%;">
   
       <tbody>
       <tr>
       <td>Title</td>
       <td><select id="Title" name="Title">
       <option>Mr.</option>
       <option>Ms.</option>
       <option>Mrs.</option>
       <option>Mr. &amp; Mrs.</option>
       <option>Dr.</option>
       <option>Rev.</option>
       </select></td>
       </tr>
       <tr>
       <td><label for="FirstName">First Name</label></td>
       <td><input id="FirstName" name="FirstName" size="20" type="text" /></td>
       </tr>
       <tr>
       <td style="border-bottom: none;"><label for="LastName">Last Name</label></td>
       <td style="border-bottom: none;"><input id="LastName" name="LastName" size="20" type="text" /></td>
       </tr>
       <tr>
       <td><label for="Address">Address</label></td>
       <td style="border-bottom: none;"><input id="Address" name="Address" size="50" type="text" /></td>
       </tr>
       <tr>
       <td><label for="City">City </label></td>
       <td><input id="City" name="City" size="15" type="text" /></td>
       <tr>
       <td><label for="State">State </label></td>
       <td><input id="State" name="State" size="2" type="text" /></td>
       </tr>
       <tr>
       <td><label for="Zip">Zip </label>
       <td><input id="Zip" name="Zip" size="15" type="text" /></td>
       </tr>
       <tr>
       <td align="right"><label for="Country">Country:</label></td>
       <td align="left"><input id="Country" name="Country" type="text" value="USA" /></td>
       </tr>
       <tr>
       <td align="right"><label for="Phone">Phone </label></td>
       <td align="left"><input id="Phone" name="Phone" size="15" type="text" /></td>
       </tr>
       <tr>
       <td align="right"><label for="CellPhone">CellPhone </label></td>
       <td align="left"><input id="CellPhone" name="CellPhone" size="15" type="text" /></td>
       </tr>
       <tr>
       <td align="right"><label for="Email">Email </label></td>
       <td align="left"><input id="Email" name="Email" size="15" type="text" /></td>
       </tr>
       <tr>
       <td align="right"><label for="Notes">Notes </label></td>
       <td align="left"><input id="Notes" name="Notes" size="100" type="text" /></td>
       </tr>
       <tr>
       <td align="right"><label for="HawesLine">Hawes Line </label></td>
       <td align="left"><input id="HawesLine" name="HawesLine" size="100" type="text" /></td>
       </tr>
   
       </tbody>
       </table>
       <button name="save" type="submit">Save</button>
   
       </form>
       ```
   

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16552428)
 * If you want more than one line in an input field, you should use a <textarea>
   element instead.
 *  Thread Starter [hsysgrp](https://wordpress.org/support/users/hsysgrp/)
 * (@hsysgrp)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16555114)
 * Thank you for your reply. Have tried to substitute input textarea for input text
   but cannot get the syntax right. I want to enter the form data for HawesLine 
   in a box instead of a text box that stretches across the form.
 *     ```wp-block-code
        <label for="Notes">Notes:</label>
         <input type="text" id="Notes" name="Notes" size = 250 value="<?php echo $row->Notes; ?>"><br>
        <label for="HawesLine">Hawes Line:</label>
         <input type="textarea"  rows = "4" cols = "40" id="HawesLine" name="HawesLine" value="<?php echo $row->HawesLine; ?>"><br>
       ```
   
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16555995)
 * What you have there looks right. What are you having problems with?
 *  Thread Starter [hsysgrp](https://wordpress.org/support/users/hsysgrp/)
 * (@hsysgrp)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16558255)
 * Result for type “text” is a box that stretches for 250 across the page:
 * Result for type “textarea” is the default box as though the rows = “4” cols =“
   40” is ignored entirely. Data can be retrieved and updated ok.
 *     ```wp-block-code
       <input type="text" id="Notes" name="Notes" size = 250 value="<?php echo $row->Notes; ?>"><br> 
        <input type="textarea"  rows = "4" cols = "40" id="HawesLine" name="HawesLine" value="<?php echo $row->HawesLine; ?>"><br>
       ```
   
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16560055)
 * OK, so what is the problem? If it works and updates everything, isn’t that what
   it’s meant to do?
 * Or… are you only concerned about the way that it looks? If so, that’s really 
   going to be up to some pretty basic CSS rules to make everything uniform.
 *  Thread Starter [hsysgrp](https://wordpress.org/support/users/hsysgrp/)
 * (@hsysgrp)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16567281)
 *     ```wp-block-code
       </tbody>
       </table>
       <input type = "submit" name ="submit" Value = "Save"> 
       </form>
       <p> Enter extended text for  Hawes Line descent in the box</p>
   
       <textarea rows = "4" cols = "40" name = "HawesLine" form = "HawesLinefrm"> Enter Hawes Line text here...</textarea><br>
       ```
   
 * The data gets inserted ok. So now the form ends with the save button and the 
   textarea box is below the form. Is there a way to place the “save” button after
   the form border? Yes, I am always concerned with how it looks… and have novice
   skills with css.
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16567694)
 * To have the text area before the submit button, it needs to be _inside_ the form
   tags. If it’s working with updating the value now, I don’t know how because it’s
   not set up correctly. Everything that’s needed for the form has to be inside 
   the <form> tags. How its ordered in your HTML is how it will show on the page.
 * As for the CSS, this is basic, but it would be something like this…
 *     ```wp-block-code
       input,
       textarea {
           width: 300px;
       }
       ```
   

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Variable input length in table’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 7 replies
 * 2 participants
 * Last reply from: [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * Last activity: [3 years, 2 months ago](https://wordpress.org/support/topic/variable-input-length-in-table/#post-16567694)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics