Making a web page and I need help on making the form nice and even. The page now
ID: 3549439 • Letter: M
Question
Making a web page and I need help on making the form nice and even. The page now looks like a mess.
(Need the blocks to be even. Not the same length just aligned )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Checkout Page</title>
</head>
<h1 align="center">Enter Customer Info Below</h1>
<body>
<form action=http:localhost:8090/" method="POST" autocomplete="on" >
First Name:<input type="Text" maxlength= "ascii - 32 " name="First " class="required" required pattern="[A-Za-z_]+" /><br />
Last Name:<input type="Text" maxlength= "ascii- 32 " name="Last" class="required" required pattern="[A-Za-z]+[']?"[/><br />
Email:<input type="Text" class="required" required pattern="^([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$" /><br />
Address 1:<input type="Text" class="required" /><br />
Address 2:<input type="Text" class="" /><br />
City:<input type="Text" class="required" required pattern="[A-Za-z_]*"/><br />
State:<input type="Text" class="required" required pattern="[A-Z]"{2}/><br />
Zip:<input type="Text" class="required" required pattern="[0-9]"{5,}/><br />
Country:<input type="Text" class="required" required pattern="[A-Z]{1,}[a-z]+"/><br />
Phone:<input type="Text" class"required" required pattern="(?[0-9]{3})?-?[0-9]{3}-?[0-9]{4}" /><br />
Fax:<input type="Text"required pattern="(?[0-9]{3})?-?[0-9]{3}-?[0-9]{4}" /><br />
Check here to be added to the mailing list.<input type="checkbox" name="check2" value="Emails" /> <br /><br />
<h1>Enter Credit Card Information Below</h1>
<input type="radio" name="radio" value="MC" checked="checked" /><img alt=""
src="images/Checkout/mc.jpg" />
Master Card<br />
<input type="radio" name="radio" value="Visa" checked="checked" /><img
alt="" src="images/Checkout/visa.jpg" /> Visa<br />
<input type="radio" name="radio" value="Discover" /><img alt=""
src="images/Checkout/discover.jpg" /> Discover<br />
<input type="radio" name="radio" value="AMEX" />
<img alt="" src="images/Checkout/amex.jpg"
style="width: 50px; height: 32px" />American Express<br />
<h2>Enter Card Number and Expiration</h2>
<b>Credit Card Number:<input type="Text" class="required" required pattern="[0-9]"{16,}/><br />
<b>Expiration Month: :<select name="expMonth">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</b>
Enter Expiration Year:<select name="expYear">
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select><br /><br />
<input type="submit" value="Buy Now!" name="submit_button" />
<input type="reset" value="Reset All" name="reset_button" /><br /><br /><br />
<a href="index.htm">Return to Previous</a>
</form>
</body>
</html>
Making a web page and I need help on making the form nice and even. The page now looks like a mess. (Need the blocks to be even. Not the same length just aligned)Explanation / Answer
Hi,
Please find below the aligned HTML with even blocks. Hope this is what is required.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Checkout Page</title>
</head>
<h1 align="center">Enter Customer Info Below</h1>
<body>
<form action=http:localhost:8090/" method="POST" autocomplete="on" >
<table>
<tr>
<td>
First Name: </td><td><input type="Text" maxlength= "ascii - 32 " name="First " class="required" required pattern="[A-Za-z_]+" /><br />
</td>
</tr>
<tr>
<td>
Last Name: </td><td><input type="Text" maxlength= "ascii- 32 " name="Last" class="required" required pattern="[A-Za-z]+[']?"[/><br />
</td>
</tr>
<tr>
<td>
Email: </td><td><input type="Text" class="required" required pattern="^([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$" /><br />
</td>
</tr>
<tr>
<td>
Address 1:</td><td><input type="Text" class="required" /><br /></td>
</tr>
<tr>
<td>
Address 2:</td><td><input type="Text" class="" /><br /></td>
</tr>
<tr>
<td>
City:</td><td><input type="Text" class="required" required pattern="[A-Za-z_]*"/><br /></td>
</tr>
<tr>
<td>
State:</td><td><input type="Text" class="required" required pattern="[A-Z]"{2}/><br /></td>
</tr>
<tr>
<td>
Zip:</td><td><input type="Text" class="required" required pattern="[0-9]"{5,}/><br /></td>
</tr>
<tr>
<td>
Country:</td><td><input type="Text" class="required" required pattern="[A-Z]{1,}[a-z]+"/><br /></td>
</tr>
<tr>
<td>
Phone:</td><td><input type="Text" class"required" required pattern="?[0?9]3?-?[0-9]{3}-?[0-9]{4}" /><br /></td>
</tr>
<tr>
<td>
Fax:</td><td><input type="Text"required pattern="?[0?9]3?-?[0-9]{3}-?[0-9]{4}" /><br /></td>
</tr>
<tr>
<td valign="top">
Check here to be added to the mailing list.</td><td ><input type="checkbox" name="check2" value="Emails" /> <br /><br /></td>
</tr>
</table>
<h1 align="center">Enter Credit Card Information Below</h1>
<table>
<tr>
<td>
<input type="radio" name="radio" value="MC" checked="checked" /></td><td ><img alt=""
src="images/Checkout/mc.jpg" /> </td><td >
Master Card<br /></td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="Visa" checked="checked" /></td><td ><img
alt="" src="images/Checkout/visa.jpg" /> </td><td >Visa<br /></td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="Discover" /></td><td ><img alt=""
src="images/Checkout/discover.jpg" /></td><td > Discover<br /></td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="AMEX" /></td><td >
<img alt="" src="images/Checkout/amex.jpg"
/></td><td >American Express<br /></td>
</tr>
</table>
<h2 align="center">Enter Card Number and Expiration</h2>
<table>
<tr><td>
<b>Credit Card Number:</td><td><input type="Text" class="required" required pattern="[0-9]"{16,}/><br /></td></tr></table>
<table>
<tr><td>
<b>Expiration Month: </td><td><select name="expMonth">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</b></td><td>
Enter Expiration Year:</td><td><select name="expYear">
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select></td></tr></table></br>
<table>
<tr><td>
<input type="submit" value="Buy Now!" name="submit_button" /></td> <td>
<input type="reset" value="Reset All" name="reset_button" /></td></tr></table></br>
</br>
<a href="index.htm">Return to Previous</a></br>
</form>
</body>
</html>
Hope it helps. Copy paste the code in notepad, save as .html and open it in browser.
Thanks.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.