So I have built a form where customers can build their own skatebaord by sleceting the colour wheels, trucks etc. I have howerver noticed that some sales seem to not be going through and customers are emailing me that the form keeps crashing.... Any idea why? My code is below.
<!-- Start of Add to Cart Form -->
<!-- Note: target="paypal" was replaced with the variable target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE and Firefox -->
<form name="_xclick" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post" target="_blank">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr" target="_self">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Replace "business" value with your PayPal Email Address or your Merchant Account ID -->
<input type="hidden" name="business" value="online#southcoastskates.co.uk">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="item_name" value="Personal Built Board 22 Inch">
<input type="hidden" name="amount" value="29.99">
<!-- Replace value with the web page you want the customer to return to after a successful transaction -->
<input type="hidden" name="return" value="http://www.southcoastskates.co.uk">
<!-- Replace value with the web page you want the customer to return to after item cancellation -->
<input type="hidden" name="cancel_return" value="http://www.southcoastskates.co.uk">
<!-- Note: shipping override variable is used with this example -->
<input type="hidden" name="shipping" value="0.00">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHosted">
<div class="build1">Select 22 inch Board:
<input type="hidden" name="on1" value="22 Inch Board">
<select name="os1" onchange="diva_imgBySel('theImg',this.selectedIndex)">
<option value="NO COLOUR SELECTED" selected>- CHOOSE COLOUR -</option>
<option value="BLACK">BLACK</option>
<option value="LIGHT BLUE">LIGHT BLUE</option>
<option value="DARK BLUE">DARK BLUE</option>
<option value="PINK">PINK</option>
<option value="GREEN">GREEN</option>
<option value="RED">RED</option>
<option value="PURPLE">PURPLE</option>
<option value="YELLOW">YELLOW</option>
<option value="WHITE">WHITE</option>
<option value="ORANGE">ORANGE</option>
<option value="LIME:">LIME</option>
<option value="GREEN PASTEL:">GREEN PASTEL</option>
<option value="PINK PASTEL:">PINK PASTEL</option>
<option value="DARK GREEN:">DARK GREEN</option>
</select>
</div>
<div class="build1">
Select Truck: <br>
<input type="hidden" name="on6" value="Truck">
<select name="os6" onchange="diva_imgBySel2('theImg_truck',this.selectedIndex)">
<option value="NO TRUCK SELECTED" selected>- CHOOSE TRUCK -</option>
<option value="ALUMINUM">ALUMINUM</option>
<option value="BLACK">BLACK</option>
<option value="WHITE">WHITE</option>
</select>
<p> </p>
</div>
<div class="build1">Front Wheel (Right):
<input type="hidden" name="on2" value="Front Wheels (Right)">
<select name="os2" onchange="diva_imgBySel3('theImg_flwheel',this.selectedIndex)">
<option value="NO COLOUR SELECTED" selected>- CHOOSE COLOUR -</option>
<option value="BLUE">BLUE</option>
<option value="BLACK">BLACK</option>
<option value="PINK">PINK</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
<option value="WHITE">WHITE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="PURPLE">PURPLE</option>
<option value="PURPLE TRANS">PURPLE TRANS</option>
<option value="CLEAR BLACK">CLEAR BLACK</option>
<option value="CLEAR WHITE">CLEAR WHITE</option>
<option value="PASTEL PINK">PASTEL PINK</option>
<option value="PASTEL GREEN">PASTEL GREEN</option>
<option value="PASTEL YELLOW">PASTEL YELLOW</option>
<option value="SLATE">SLATE</option>
<option value="GREEN GREY">GREEN GREY</option>
</select></div>
<div class="build1">Front Wheel (Left):
<input type="hidden" name="on3" value="Front Wheels (Left)">
<select name="os3" onchange="diva_imgBySel5('theImg_blwheel',this.selectedIndex)">
<option value="NO COLOUR SELECTED" selected>- CHOOSE COLOUR -</option>
<option value="BLUE">BLUE</option>
<option value="BLACK">BLACK</option>
<option value="PINK">PINK</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
<option value="WHITE">WHITE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="PURPLE">PURPLE</option>
<option value="PURPLE TRANS">PURPLE TRANS</option>
<option value="CLEAR BLACK">CLEAR BLACK</option>
<option value="CLEAR WHITE">CLEAR WHITE</option>
<option value="PASTEL PINK">PASTEL PINK</option>
<option value="PASTEL GREEN">PASTEL GREEN</option>
<option value="PASTEL YELLOW">PASTEL YELLOW</option>
<option value="SLATE">SLATE</option>
<option value="GREEN GREY">GREEN GREY</option>
</select></div>
<div class="build1">Back Wheel (Right):
<input type="hidden" name="on4" value="Back Wheels (Right)">
<select name="os4" onchange="diva_imgBySel4('theImg_frwheel',this.selectedIndex)">
<option value="NO COLOUR SELECTED" selected>- CHOOSE COLOUR -</option>
<option value="BLUE">BLUE</option>
<option value="BLACK">BLACK</option>
<option value="PINK">PINK</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
<option value="WHITE">WHITE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="PURPLE">PURPLE</option>
<option value="PURPLE TRANS">PURPLE TRANS</option>
<option value="CLEAR BLACK">CLEAR BLACK</option>
<option value="CLEAR WHITE">CLEAR WHITE</option>
<option value="PASTEL PINK">PASTEL PINK</option>
<option value="PASTEL GREEN">PASTEL GREEN</option>
<option value="PASTEL YELLOW">PASTEL YELLOW</option>
<option value="SLATE">SLATE</option>
<option value="GREEN GREY">GREEN GREY</option>
</select></div>
<div class="build1">Back Wheel (Left):
<input type="hidden" name="on5" value="Back Wheels (Left)">
<select name="os5" onchange="diva_imgBySel6('theImg_brwheel',this.selectedIndex)">
<option value="NO COLOUR SELECTED">- CHOOSE COLOUR -</option>
<option value="BLUE">BLUE</option>
<option value="BLACK">BLACK</option>
<option value="PINK">PINK</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
<option value="WHITE">WHITE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="PURPLE">PURPLE</option>
<option value="PURPLE TRANS">PURPLE TRANS</option>
<option value="CLEAR BLACK">CLEAR BLACK</option>
<option value="CLEAR WHITE">CLEAR WHITE</option>
<option value="PASTEL PINK">PASTEL PINK</option>
<option value="PASTEL GREEN">PASTEL GREEN</option>
<option value="PASTEL YELLOW">PASTEL YELLOW</option>
<option value="SLATE">SLATE</option>
<option value="GREEN GREY">GREEN GREY</option>
</select></div>
<div class="build1">
<p> </p>
Select abec:
<input type="hidden" name="on7" value="abec">
<select name="os7">
<option value="7" selected>7</option>
<!-- <option value="9">9</option>-->
</select>
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="option_select0" value="7">
<input type="hidden" name="option_amount0" value="29.99">
<input type="hidden" name="option_select1" value="9">
<input type="hidden" name="option_amount1" value="47.99">
<input type="hidden" name="option_index" value="0">
<p style="font-size:12px"> abec9 extra charge £8.00</p>
</div>
<div class="build1"> <p> </p>
Delivery outside UK?
<select name="shipping" style="margin-bottom: 5px;">
<option selected value="0.00">NO</option>
<option value="6.50">YES</option>
</select>
<br>
<p style="font-size:12px; padding-bottom:3em;"> £6.50 5 day service</p>
</div>
<div class="build5">
<input type="image" src="images/add.png" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!"></td>
<!-- Start of View Cart Button Code -->
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- If using a Business or Company Logo Graphic, include the "cpp_header_image" variable in your View Cart code. -->
<input type="hidden" name="cpp_header_image" value="http://southcoastskates.co.uk/images/logo.png">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<!-- Replace "business" value with your PayPal Email Address or Account ID -->
<input type="hidden" name="business" value="online#southcoastskates.co.uk">
<!-- Replace value with the web page you want the customer to return to -->
<input type="image" src="images/view.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="images/view.png" width="1" height="1">
</form>
<!-- End of View Cart Button Code -->
Related
This is supposed to be the template for a sign-up page that I am currently working on. I am having trouble with <input required> not being validated when the user submits the form - I would expect it to tell me that I have to fill out certain fields in order to submit / proceed, but this does not seem to be the case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form method="post">
<label for="f_name">First Name:</label>
<input id="f_name" type="text" placeholder="First Name" name="first_n" required>
<label for="l_name">Last Name:</label>
<input id="l_name" type="text" placeholder="Last Name" name="last_n" required>
</form>
<form method="post">
<label for="m_f_o">Male</label>
<input id="m_f_o" type="radio" name="gender">
<label for="f_m_o">Female</label>
<input id="f_m_o" type="radio" name="gender">
<label for="o_m_f">Other</label>
<input id="o_m_f" type="radio" name="gender">
</form>
<form method="post">
<label for="email">Email:</label>
<input id="email" type="email" placeholder="your email" name="email" required>
<label for="password">Password:</label>
<input id="password" type="password" placeholder="password" name="password" pattern=".{5,10}" required>
</form>
<form method="post">
<label>Birthday</label>
<select name="month" required>
<option value="Month">Month</option>
<option value="jan">Jan</option>
<option value="feb">Feb</option>
<option value="mar">Mar</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="aug">Aug</option>
<option value="sept">Sept</option>
<option value="oct">Oct</option>
<option value="nov">Nov</option>
<option value="dec">Dec</option>
</select>
<select name="day" required>
<option value="day">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year" required>
<option value="year">Year</option>
<option value="1990">1999</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</form>
<form method="post">
<label>I agree to the</label>
terms and conditions
<input type="checkbox" required>
</form>
<form method="post">
<input type="submit">
</form>
</body>
</html>
There are two problems:
First, ensure that your inputs are closed.
Secondly, you have multiple forms, one for each collection of inputs. You need a single form and the submit button needs to be included inside it.
Here's an example:
<form method="post">
<label for="f_name">First Name:</label>
<input id="f_name" type="text" placeholder="First Name" name="first_n" required />
<label for="m_f_o">Male</label>
<input id="m_f_o" type="radio" name="gender" />
<input type="submit" />
</form>
I am trying to layout a table (I know a grid might work better but do not feel like changing everything for the 3rd time). I have 2 identical cells but one is smaller than the other. No matter what I do, whether I create a smaller class, or make them equal one will always be bigger than another
.grid td.normal{
width: 100px;
}
.grid td.small{
width: 50px;
}
<tr>
<!--Section Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="section.php" method="get" class="form-labels-on-toptabletry">
<label><span>Section:</span><br></label>
<select name="section">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value=8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
</select><br>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Township Search-->
<td colspan="1" class="normal">
<form name="township" action="township.php" method="get" class="form-labels-on-toptabletry">
<label><span>Township:</span><br>
<input type="text" name="township"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--TD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="td.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Township Direction:</span><br>
<select name="td">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="N">North</option>
<option value="S">South</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Range Search-->
<td colspan="1" class="small">
<form name="range" action="range.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Range:</span><br>
<input type="text" name="range"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--RD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="rd" action="rd.php" method="get" class="form-labels-on-toptabletry">
<label><span>Range Direction:</span><br>
<select name="rd">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="W">West</option>
<option value="E">East</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
</tr>
On the snippet it looks ok but here is what it looks like when I test it:
Different Size Inputs
Does anybody have any idea why this would be happening?
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sell</title>
<link rel="stylesheet" type="text/css" href="../Web6/Web6.css"/>
</head>
<body>
<center><h1>Video Games for Sale</h1></center>
<center><h4>(This is for a school project only. Any of these items can not actually be purchased by an individual.)</h4></center>
<div><label class="field-label">First name:</label><input type="text" name="firstname" /></div><br/>
<div><label class="field-label">Last Name:</label><input type="text" name="lastname" /></div>
<p>
<img src="SotC.jpg" alt="Shadow of the Colossus" /><input type="checkbox" name="games[]" value="shadowofthecolossus"/>
Shadow of the Colossus - $20 <br/>
<img src="GoW.jpg" alt="God of War" /><input type="checkbox" name="games[]" value="godofwar" />
God of War - $15 <br/>
<img src="HL.jpg" alt="Half-life" /><input type="checkbox" name="games[]" value="halflife" />
Half-Life - $10 <br/>
</p>
<p id="description">This website is for the sale of 3 particularly good video games. The first one Shadow of the Colossus where you play a character Wander who is set<br/> on a quest to slay 16 Gigantic Colossus to bring back his love. Another game for sale is God of War, where you play as Spartan warrior Kratoes<br/> who is betrayed by the God of War Ares which sets up an Epic revenge tale. Finally Half-Life in which you play as scientist Gordon Freeman who<br/> was involved in a science experiment gone wrong and has to survive not only alien creatures let in, but also the military trying to quarentine the area.
</p>
<label class="field-label">Street:</label><input type="text" name="street" /><br/>
<label class="field-label">City:</label><input type="text" name="city" /><br/>
<label class="field-label" id="state">State:</label><select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select><br/>
<label class="field-label">Zip Code:</label><input type="text" name="zip" /><br/>
Credit Card Type:<br/>
<input type="radio" name="card" value="mastercard" checked="checked"/>Master Card<br/>
<input type="radio" name="card" value="visacard" />Visa Card<br/>
<input type="radio" name="card" value="expresscard" />American Express<br/>
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.field-label {
display: inline-block;
width: 5%;
text-align: left;
}
img {width:1%;
height:1%;
}
#description {text-align:right;
z-index:1;
}
If you go to this website the text is to the right, but the left side now has a huge gab. How would I fix this within CSS? If not possible how would I fix it through HTML? I am trying to submit a site to sell materials (video games). I will be adding links on the name of the games later on to describe them, which is more than what is asked. This is my biggest issue though. I have asked, but nothing stopped the gap on the right.
Example: http://jsfiddle.net/ethbz5gn/1/
It's because of the <br> tags that have been manually implemented everywhere inside the <p id="description"> tag. Remove all br tags and it does what you want.
I would change few things. The center tag is obsolete, get rid of it and use CSS. The br tag has no semantic meaning and is almost impossible to style, so get rid of that and replace with div if needed to separate elements. It is also better to let text flow naturally.
Learn how label works. It either uses an id of an element or wraps it. This does a few things, it helps with accessibility and also provides an additional action point. For example clicking on the label will bring focus to the element or click a radio or check-box.
Also learn about floats, which is what I've used to move your text to the right.
So here is the code:
h1, h4 {text-align:center;} /*Replace the center tag with css*/
.field-label {
display: inline-block;
width: 15%;
text-align: left;
}
/*Get rid of list bullets and paddin when in field set*/
fieldset ul {list-style:none; padding:0;}
img {width:1%;
height:1%;
}
form{float:left; width:50%;}
#description {text-align:right;
z-index:1;
float:right;
width:50%;
}
<h1>Video Games for Sale</h1>
<h4>(This is for a school project only. Any of these items can not actually be purchased by an individual.)</h4>
<p id="description">This website is for the sale of 3 particularly good video games. The first one Shadow of the Colossus where you play a character Wander who is set on a quest to slay 16 Gigantic Colossus to bring back his love. Another game for sale is God of War, where you play as Spartan warrior Kratoes who is betrayed by the God of War Ares which sets up an Epic revenge tale. Finally Half-Life in which you play as scientist Gordon Freeman who was involved in a science experiment gone wrong and has to survive not only alien creatures let in, but also the military trying to quarentine the area.
</p>
<form action="#">
<fieldset>
<legend>Personal Details</legend>
<div class="frmRow"><label class="field-label" for="firstname">First name:</label><input type="text" id="firstname" name="firstname" /></div>
<div class="frmRow"><label class="field-label" for="lastname">Last Name:</label><input type="text" id="lastname" name="lastname" /></div>
</fieldset>
<fieldset id="selGames">
<legend>Games</legend>
<!-- Looks Like a list, so lets make it a list -->
<ul>
<li>
<label for="SotC">
<img src="SotC.jpg" alt="Shadow of the Colossus" />
</label>
<input type="checkbox" id="SotC" name="games[]" value="shadowofthecolossus"/>
<label for="SotC">Shadow of the Colossus - $20</label>
</li>
<li>
<label for="GoW">
<img src="GoW.jpg" alt="God of War" />
</label>
<input type="checkbox" name="games[]" id="GoW" value="godofwar" />
<label for="GoW">God of War - $15</label>
</li>
<li>
<label for="HL">
<img src="HL.jpg" alt="Half-life" />
</label>
<input type="checkbox" id="HL" name="games[]" value="halflife" />
<label for="HL">Half-Life - $10</label>
</li>
</ul>
</fieldset>
<fieldset id="addressDetails">
<legend>Address</legend>
<div class="frmRow"><label class="field-label" for="street">Street:</label><input type="text" name="street" id="street" /></div>
<div class="frmRow"><label class="field-label" for="city">City:</label><input type="text" name="city" id="city" /></div>
<div class="frmRow"><label class="field-label" for="state">State:</label><select id="state" name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></div>
<div class="frmRow"><label class="field-label" for="zip">Zip Code:</label><input type="text" id="zip" name="zip" /></div>
</fieldset>
<fieldset>
<legend>Credit Card Type</legend>
<!--Again this looks like a list-->
<ul>
<li><input type="radio" name="card" id="mc" value="mastercard" checked="checked"/><label for="mc">Master Card</label></li>
<li><input type="radio" name="card" id="vc" value="visacard" /><label for="vc">Visa Card</label></li>
<li><input type="radio" name="card" id="amex" value="expresscard" /><label for="amex">American Express</label></li>
</ul>
</fieldset>
<input type="submit" />
<input type="reset" />
I use Dreamweaver to write my html code, but now have run into a problem.
I have created an enquiry form which contains several different fields, but when I try to validate the form using Window | Behavior | Validate Form, it only shows my "firstname", "lastname", "Datepicker1", "Datepicker2" as well as the "Comments" field.
I want to make sure that the telephone, email and select fields are required and will be filled by a number and an email address. It worked fine when I made the contact form, but for some reason it does not in the enquiry.
My code is as follows:
<form action="../../enquiryform.php" method="post" id="enquiry">
<h1>ENQUIRE ABOUT<br><span style="color:#816122">VILLA 2610</span></h1>
<input type="hidden" name="villaid" id="villaid" value="2610">
<br>
Arrival Date<br>
<input type="text" name="arrivaldate" id="Datepicker1">
<br>Departure Date<br>
<input type="text" name="departuredate" id="Datepicker2"><br>
First Name
<input type="text" name="firstname" id="firstname"><br>
Last Name
<input type="text" name="lastname" id="lastname"><br>
Telephone
<input type="tel" name="tel" id="tel"><br>
Email
<input type="email" name="email" id="email"><br>
<div class="leftcolumn">Adults<br>
<select name="adults" id="adults">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
<div class="rightcolumn">Children<br>
<select name="children" id="children">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
Comments (optional)<br>
<textarea name="comments" id="comments" wrap="soft" style="width:150px; height:100px;"></textarea><br>
<p class="antispam">Leave this empty: <input name="url" type="text" id="url" /></p>
<input type="submit" value="Send" style="background-color:#aa802c; color:#FFFFFF; border-radius:5px; text-align:center; cursor:pointer;"><br><br>
I have added the following inside the starting form bracket:
onSubmit="MM_validateForm('firstname','','R','lastname','','R');return document.MM_returnValue"
But what should I use for a telephone number, email address as well as the 2 select options that I have?
My suggestion is
onSubmit="MM_validateForm('firstname','','R','lastname','','R','tel','','RisNum','email','','RisEmail',);return document.MM_returnValue"
But how do I add that I require for my viewers to select children and adults options?
And are my thoughts above correct?
Why don't you use the require attribute on input tag like this
Telephone
<input type="tel" name="tel" id="tel" required>
I have this code :
<form action="#" method="get">
<fieldset>
<div>
<label for="profilephoto">Your profile photo</label>
<input type="file" name="profilephoto" id="profilephoto" />
</div>
<div>
<label for="firstname">Your first name</label>
<input type="text" name="firstname" id="firstname" />
</div>
<div>
<label for="lastname">Your last name</label>
<input type="text" name="lastname" id="lastname" />
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="female" id="female" />
<label for="female">Female</label>
<input type="radio" name="gender" value="male" id="male" />
<label for="male">Male</label>
</div>
<div>
<label for="birthdategroup">Birth Date</label>
<select name="Month">
<option value="none">- Month -</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="Day">
<option value="none">- Day -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="22">30</option>
<option value="29">31</option>
</select>
<select name="year">
<option value="none">- Year -</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>
<p>This is hidden by fault from your profile.</p>
</div>
<div>
<label for="about">About you</label>
<textarea id="about" rows="9" cols="30"></textarea>
</div>
<div>
<label for="websiteaddress">Your website address
</label>
<input type="text" id="websiteaddress" name="websiteaddress" />
</div>
<div>
<label for="websitename">Website name</label>
<input type="text" id="websitename" name="websitename" />
</div>
<div>
<span>preview profile</span> <input type="submit" value="save"/>
</div>
</fieldset>
</form>
And the desired design is this :
http://d.pr/i/WZ0U
The problem is, I tried to align this by adding padding and a width to the labels, but given that the radio buttons have their own label (male and female), it also increase the space between these buttons, which isn't desired.
How can I style this ?
Also, is the use of 3rd label for "gender" really appropriate, since each radio button already has their own label ?
Give the "odd" label a class name and style it separately.
Also, it better form to use a styled unordered list as a container than DIVs.
See: http://www.alistapart.com/articles/prettyaccessibleforms
add classes to the labels, for example if radio boxes labels need different styling then other labels add a specific class to those labels:
<label class="radio">text</label>
<label class="input">text</label>
...
then use the classes in css:
instead of
label {css code}
use
.radio {css code}
and so on so you can give different css to different labels.