Variable input length in table

  • hsysgrp

    (@hsysgrp)


    3 years, 3 months ago

    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.

    <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

    (@catacaustic)

    3 years, 3 months ago

    If you want more than one line in an input field, you should use a <textarea> element instead.

    Thread Starter hsysgrp

    (@hsysgrp)

    3 years, 3 months ago

    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. 

      
 <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

    (@catacaustic)

    3 years, 2 months ago

    What you have there looks right. What are you having problems with?

    Thread Starter hsysgrp

    (@hsysgrp)

    3 years, 2 months ago

    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.

    <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

    (@catacaustic)

    3 years, 2 months ago

    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

    (@hsysgrp)

    3 years, 2 months ago

    
</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

    (@catacaustic)

    3 years, 2 months ago

    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…

    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.