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>
Related
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?
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 -->
For some reason, the required attribute didn't work. Where did I go wrong?
I've already tried putting another <option> with blank value
<form action="">
<select required>
<optgroup label="test">
<option value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</optgroup>
</select>
<input type="submit">
</form>
It works without optgroup DEMO
<form method="POST" action="">
<select required>
<option value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
Anyway, there is poor support of the required attribute in browsers
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.
This is actually embarrassing, but I can't seem to tab to the select box and I've tried all I know to do.
<form action="trial.php" method="post">
<div class="formLeftCol">
First Name:<br/>
Last Name:<br/>
Address:<br/>
City:<br/>
Select State <br/>
Zip Code:<br/>
Phone:<br/><br/>
<p class="emailLabel">
Email:</p><br/>
</div>
<div class="formRightCol">
<input class="formInput" type="text" name="first" />
<input class="formInput" type="text" name="last" />
<input class="formInput" type="text" name="address" />
<input class="formInput" type="text" name="city" />
<select tabindex=1 class="formInput" 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>
<input class="formInput" type="text" name="zip" />
<input class="formInput" type="text" name="phone" />
<input class="formInputEmail" type="text" name="email" />
</div>
<input class="formButton" type="image" src="images/trial/submitbutton.png" alt="Submit button">
</form>
Either just remove the tabindex attribute from the select element (since other input elements doesn't have it), or set it on all other input elements as well, with the desired tabbing order as tabindex value.