Member Avatar for lewashby

How can I make the following web page liquid? I want the fomr to resize with the browser.

<html>
<head>
<title>Bail Bonding</title>
</head>

<body>
<form action="bail.php" method="POST">

<table width="25%">

<tr> <td>First Name:</td> 
     <td align="right"> <input type="text" name="fname"></td></tr>

<tr> <td>Last Name:</td>
     <td align="right"> <input type="text" name="lname"></td></tr>

<tr> <td>Address:</td>
     <td align="right"> <input type="text" name="address"</td></tr>

<tr> <td>City:</td>
     <td align="right"> <input type="text" name="city"</td></tr>

<tr> <td>Zip code:</td>
     <td align="right"> <input name="zip"></td></tr>

<tr> <td>Sate: <select name="sate">

    <option value="NONE"> Select</option>
    <option value="AL"> AL - Alabama</option>
    <option value="AK"> AK - Alaska</option>
    <option value="AZ"> AZ - Arizona</option>
    <option value="AR"> AR - Arkansas</option>
    <option value="CA"> CA - Califonria</option>
    <option value="CO"> CO - Colorado</option>
    <option value="CT"> CT - Connecticut</option>
    <option value="DE"> DE - Delaware</option>
    <option value="FL"> FL - Florida</option>
    <option value="GA"> GA - Georgia</option>
    <option value="HI"> HI - Hawaii</option>
    <option value="ID"> ID - Idaho</option>
    <option value="IL"> IL - Illinois</option>
    <option value="IN"> IN - Indiana</option>
    <option value="IA"> IA - Iowa</option>
    <option value="KS"> KS - Kansas</option>
    <option value="KY"> KY - Kentucky</option>
    <option value="LA"> LA - Louisiana</option>
    <option value="ME"> ME - Maine</option>
    <option value="MD"> MD - Maryland</option>
    <option value="MA"> MA - Massachusetts</option>
    <option value="MI"> MI - Michigan</option>
    <option value="MN"> MN - Minnesota</option>
    <option value="MS"> MS - Mississippi</option>
    <option value="MO"> MO - Missouri</option>
    <option value="MT"> MT - Montana</option>
    <option value="NE"> NE - Nebraska</option>
    <option value="NV"> NV - Nevada</option>
    <option value="NH"> NH - New Hampshire</option>
    <option value="NJ"> NJ - New Jersey</option>
    <option value="NM"> NM - New Mexico</option>
    <option value="NY"> NY - New York</option>
    <option value="NC"> NC - North Carolina</option>
    <option value="ND"> ND - North Dakota</option>
    <option value="OH"> OH - Ohio</option>
    <option value="OK"> OK - Oklahoma</option>
    <option value="OR"> OR - Oregon</option>
    <option value="PA"> PA - Pennsylvania</option>
    <option value="RI"> RI - Rhode Island</option>
    <option value="SC"> SC - South Carolina</option>
    <option value="SD"> SD - South Dakota</option>
    <option value="TN"> TN - Tennessee</option>
    <option value="TX"> TX - Texas</option>
    <option value="UT"> UT - Utah</option>
    <option value="VT"> VT - Vermont</option>
    <option value="VA"> VA - Virginia</option>
    <option value="WA"> WA - Washington</option>
    <option value="WV"> WV - West Virginia</option>
    <option value="WI"> WI - Wisconsin</option>
    <option value="WY"> WY - Wyoming</option>
    </select></td><td><input type="submit"></td></tr>
</form>
</table>
</body>
</html>
Edited by pritaeas because: Moved
  • 2 Contributors
  • 2 Replies
  • 182 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by lewashby

Dani AI

Generated

The simplest, most reliable way to make this form fluid is to stop relying on a table for layout and let CSS control sizing. Wrap the form in a percentage-width container with a sensible max-width, make form controls fill their cell with width: 100% and box-sizing: border-box, and use CSS Grid or Flexbox to create the label/input columns that collapse to a single column on small screens. As asked, the examples below assume the goal is a responsive form that grows and shrinks with the browser.

Minimal HTML structure (replace the table rows with repeated .form-row blocks):

<form class="form-wrap" action="bail.php" method="post">
  <div class="form-row">
    <label for="fname">First Name</label>
    <input id="fname" name="fname" type="text">
  </div>
  <!-- repeat for other fields -->
</form>

Example CSS using CSS Grid for a two-column layout that becomes single-column on narrow viewports:

.form-wrap {
  width: 90%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

.form-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem;
  align-items: center;
}

input, select, textarea {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row label { margin-bottom: 0.25rem; }
}

Troubleshooting and quick fixes: add <meta name="viewport" content="width=device-width,initial-scale=1"> for mobile; remove any hard pixel widths on inputs or td elements; if you cannot refactor the table immediately, make the table percent-based (width: 90%) and force inputs to width:100% with box-sizing:border-box. Also ensure labels use for and matching id for accessibility.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

What exactly do you want to happen?

Member Avatar for lewashby

I want the form to resize as the browser resizes. I want to make this page liquid, or fluid.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.