I am trying to add a submit button after a dropdown list in an HTML form. I am unable to add a line break between the dropdown list and submit button. Attached is a Picture of the form. Below is the code I am using. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<input required type="text" name="firstname" placeholder="First Name"><br>
<br><input required type="text" name="lastname" placeholder="Last Name"><br>
<br><input requiredtype="email" name="email" placeholder="Email"><br>
<br><input required type="text" name="phonenumber" placeholder="Phone Number"><br>
<br><input required type="text" name="handicap" placeholder="Handicap"><br>
<br><select required name="shirtsize" size = 1>
<option value="" selected>Shirt Size</option>
<option value="S"> S </option>
<option value="M"> M </option>
<option value="L"> L </option>
<option value="XL"> XL </option>
<option value="XXL"> XXL </option>
<option value="XXXL"> XXXL </option>
<input type="submit" value=Register>
</div>
</form>
</body>
</html>
Close the select and add a line break (<br>)
<select required name="shirtsize" size = 1>
<option value="" selected>Shirt Size</option>
<option value="S"> S </option>
<option value="M"> M </option>
<option value="L"> L </option>
<option value="XL"> XL </option>
<option value="XXL"> XXL </option>
<option value="XXXL"> XXXL </option>
</select>
<br>
<input type="submit" value=Register>
#David is exactly right, I'd add a second line break though to keep the format similar to your picture.
<select required name="shirtsize" size = 1>
<option value="" selected>Shirt Size</option>
<option value="S"> S </option>
<option value="M"> M </option>
<option value="L"> L </option>
<option value="XL"> XL </option>
<option value="XXL"> XXL </option>
<option value="XXXL"> XXXL </option>
</select>
<br>
<br>
<input type="submit" value=Register>
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>
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 -->
So i'm trying to make the text inside the select form have colors so example where you write your name to send email i want the text is a color black example, Also inside the select form i tried using div but failed to get it to work. I tried putting this in the css also to link it to div also didn't
work.
#skills {
color:F0F8FF;
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus>
<input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus>
<input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus>
</p>
<div id="skills">
<p class="contact-input">
<label for="select" class="select">
<select name="why" id="why">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</div>
</select>
<label for="select" class="select">
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option value="Don't know yet">Don't know yet</option>
</select>
</label>
</p>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…"></textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
Try using:
-input-placeholder
Is this what you wanted?
::-webkit-input-placeholder { /* WebKit browsers */
color: #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000;
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus />
<input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus />
<input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus />
</p>
<div id="skills">
<label for="select" class="select"></label>
<select name="why" id="why">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
<label for="select" class="select"></label>
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option value="Don't know yet">Don't know yet</option>
</select>
</div>
</p>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…"></textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
something like this?
#email {
color:blue; /*target element with id email and set text color to blue*/
}
#name {
color: red; /*target element with id name and set text color to red*/
}
#skype {
color: green; /*target element with id skype and set text color to green*/
}
#why {
color: orange; /*target element with id why and set text color to orange. in this case, its a select, so all the text within the select - meaning the options text- is orange*/
}
#participate .yellow {
color: yellow; /*target elements with class yellow (options) inside element id participate (select) and set text color to yellow. in this case, you can select which options to make yellow by adding classes*/
}
#message {
color: purple; /*target element with id message and set text color to purple*/
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="aaaa" name="email" placeholder="Your Email..." autofocus>
<input type="text" id="name" value="bbbbb" name="name" placeholder="Your Full Name." autofocus>
<input type="text" id="skype" value="cccc" name="skype" placeholder="Your Skype Name." autofocus>
</p>
<div id="skills">
<p class="contact-input">
<label for="select" class="select">
<select name="why" id="why">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
<label for="select" class="select">
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option class="yellow" value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option class="yellow" value="Don't know yet">Don't know yet</option>
</select>
</label>
</label>
</p>
</div>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…">ddddd</textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
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.