HTML form input steals focus/ focus gets shifted - html

For some reason the focus keeps getting shifted from any of the address field to the credit card field on my HTML form.
So onclick of address fields, the focus goes back to the credit card field.
It's probably something really simple, but can anyone help?
http://jsfiddle.net/xYbsz/
<form name='order-validation'>
<p><label>email: <input type="email" title="email" id="emailAddress" name="email" value=""></label></p>
<p>
Phone: <select name="countrycode" style="display: inline;">
<option value="44" selected>UK (+44)</option>
<option value="1">USA (+1)</option>
<option value="213">Algeria (+213)</option>
</select><input type="tel" name="phone" id="id_tel" required pattern="(\+?\d[-.]*){7,13}" title="international, national or local phone number"/></p>
<img class="cc-img" id="visa-card-img" src="visa.jpg" />
<img class="cc-img" id="mastercard-card-img" src="mastercard.jpg" />
<img class="cc-img" id="amex-card-img"src="american-express.jpg" />
<p><label>credit card: <input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
<img class="cc-security-code" id="visa-sec-code" src="cvv.gif" />
<img class="cc-security-code" id="amex-sec-code" style="display: none;" src="amex-sec-code.gif" /><br />
Address:
<input type="text" name="newCreditCardStreet" size="35" tabindex="5" value="" id="id_creditCardStreet"><br />
Town/City:
<input type="text" name="newCreditCardLocality" size="35" tabindex="5" value="" id="id_creditCardLocality"><br />
Country:
<input type="text" name="country" id="id_country">
<p><input type="button" name="submit" value="Submit" /></p>
<p id="test"></p>
</form>

The label tag for cc_number is not closed.
<label for="cc_number">credit card:</label>
<input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
Also I noticed in the markup the label tags are wrapping the inputs. This is unnecessary:
<label>email:
<input type="email" title="email" id="emailAddress" name="email" value="">
</label>
Instead use the for attribute:
<label for="emailAddress">email:</label>
<input type="email" title="email" id="emailAddress" name="email" value="">
Working Example http://jsfiddle.net/xYbsz/1/

Related

Code checker tells me my work is wrong but I am sure it's correct

Create a DIV with an attribute of data-cc-digits. It should contain four INPUT text fields, each with a size of 4 and a placeholder of ---- (4 dashes).
Code checker says: "You need to create the specified INPUT elements within the data-cc-digits DIV"
It does not specify if I should use maxlength or minlength to clamp the input.
<div data-cc-digits="">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
</div>
You should show more codes. But, it appears you will get the same error if your data-cc-digits inputs are wrong and if your data-cc-info inputs are wrong.
Try this:
<div data-cc-digits>
<input type="text" size="4" placeholder="----" />
<input type="text" size="4" placeholder="----" />
<input type="text" size="4" placeholder="----" />
<input type="text" size="4" placeholder="----" />
</div>
<div data-cc-info>
<input type="text" size="20" placeholder="Name Surname" />
<input type="text" size="6" placeholder="MM/YY" />
</div>

HTML (Forms stuck in nest)

I want to have four separate forms right under one another. However, when I enter the code below I get four nested forms. The first form nests the next three forms. The following form nests the next two forms, etc...
<form name="my form" method="get">
<div id="contactInfo">
<p><fieldset><legend><strong>Contact Info</legend></strong></p>
<label>Name</label><input type="text" name="FullName" style="width: 300px;" value="First and last name" /> <br>
<label>Street Address</label><input type="text" name="Address" style="width: 300px;"/> <br>
<label>Zip Code</label><input type="text" name="ZipCode" /> <br>
<label>Email</label><input type="text" name="EmailAddress"style="width: 300px;" value="address#example.com" /> <br>
<label>Phone</label><input type="text" name="PhoneNumber" />
<p><fieldset><legend><strong>Best day(s) to schedule a visit</strong></legend></p>
<input type="checkbox" name="date" id="date1" value="Mon" /> Monday
<input type="checkbox" name="date" id="date2" value="Tues" /> Tuesday
<input type="checkbox" name="date" id="date3" value="Wed" /> Wednesday
<input type="checkbox" name="date" id="date4" value="Thur" /> Thursday
<input type="checkbox" name="date" id="date5" value="Fri" /> Friday
<input type="checkbox" name="date" id="date6" value="Sat" /> Saturday
<input type="checkbox" name="date" id="date7" value="Sun" /> Sunday
<p><fieldset><legend><strong>Project Area</strong></legend></p>
<input type="radio" name="choice" id="choice1" value="frontOfHouse" /> Front of House <br>
<input type="radio" name="choice" id="choice2" value="Border" /> Border of Property <br>
<input type="radio" name="choice" id="choice3" value="multipleAreas" /> Multiple Areas (please specify in Notes box below) <br>
<input type="radio" name="choice" id="choice4" value="Other" /> Other (please specify in Notes box below) <br>
<p><fieldset><legend><strong>Additional Information</strong></legend></p>
Notes <br>
<textarea name="comments" align="left" rows="5" cols="50"></textarea>
<p></fieldset></p>
<input type="submit" value="Submit Request"/>
You've got one </fieldset> tag, but four <fieldset> tags. Make sure to close each one up, and you'll avoid the nesting issue!
Edit:
A nesting issue shown in CodePen: http://codepen.io/cam5/pen/vXdGQz
That pen, forked, with closing tags: http://codepen.io/cam5/pen/QKQNzw
Get the Fiddle. https://jsfiddle.net/7p0g2hq9/
Be attentive with the tags.
<form name="my form" method="get">
<div id="contactInfo">
<fieldset><p><legend>
<strong>Contact Info</strong></legend>
</p>
<label>Name</label><input type="text" name="FullName" style="width: 300px;" value="First and last name" /> <br>
<label>Street Address</label><input type="text" name="Address" style="width: 300px;"/> <br>
<label>Zip Code</label><input type="text" name="ZipCode" /> <br>
<label>Email</label><input type="text" name="EmailAddress"style="width: 300px;" value="address#example.com" /> <br>
<label>Phone</label><input type="text" name="PhoneNumber" />
</fieldset>
<fieldset><p><legend><strong>Best day(s) to schedule a visit</strong></legend></p>
<input type="checkbox" name="date" id="date1" value="Mon" /> Monday
<input type="checkbox" name="date" id="date2" value="Tues" /> Tuesday
<input type="checkbox" name="date" id="date3" value="Wed" /> Wednesday
<input type="checkbox" name="date" id="date4" value="Thur" /> Thursday
<input type="checkbox" name="date" id="date5" value="Fri" /> Friday
<input type="checkbox" name="date" id="date6" value="Sat" /> Saturday
<input type="checkbox" name="date" id="date7" value="Sun" /> Sunday
</fieldset>
<fieldset><p><legend><strong>Project Area</strong></legend></p>
<input type="radio" name="choice" id="choice1" value="frontOfHouse" /> Front of House <br>
<input type="radio" name="choice" id="choice2" value="Border" /> Border of Property <br>
<input type="radio" name="choice" id="choice3" value="multipleAreas" /> Multiple Areas (please specify in Notes box below) <br>
<input type="radio" name="choice" id="choice4" value="Other" /> Other (please specify in Notes box below) <br>
</fieldset>
<fieldset><p><legend><strong>Additional Information</strong></legend></p>
Notes <br>
<textarea name="comments" align="left" rows="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Submit Request"/>
If I helped, don't forget to mark as correct

email form gives strange error

The email form I'm trying to fix gives me an error saying:
This can not be accessed this way, you need to have an input field named 'sendtoemail'
Which is strange because i have that input field. Here's the code:
<h2>Contact AirKrete</h2>
<form action="http://www.hostmonster.com/monstermail" enctype="multipart/form-data" method="post"><p><label><input type="checkbox" name="locate " id="locate "><strong>Locate an Installer</strong></label><strong><label><input type="checkbox" name="become" id="become">Become an Installer</label></strong></p>
<div class="left">Name:<div>
<input name="name" type="text" id="name" onDblClick="MM_validateForm('name','','R');return document.MM_returnValue" size="40" />
</div></div>
<div class="left">Email:<div><input name="mailfrom" type="text" onDblClick="MM_validateForm('email','','NisEmail');return document.MM_returnValue" size="40" /></div></div>
<div class="left">Street:<div><input name="street" type="text" id="street" onDbleClick="MM_validateForm('street','','R');return document.MM_returnValue" size="40" /></div></div>
<div class="left">City:<div><input name="city" type="text" id="city" onDbleClick="MM_validateForm('city','','R');return document.MM_returnValue" size="40" /></div></div>
<div class="left">State:<div><input name="state" type="text" id="state" onDblClick="MM_validateForm('state','','R');return document.MM_returnValue" size="10" /> Zip:
<input name="zip" type="text" id="zip" onDblClick="MM_validateForm('zip','','R');return document.MM_returnValue" size="15" />
</div></div>
<div class="left">Country:<div><input name="country" type="text" id="country" onDblClick="MM_validateForm('country','','R');return document.MM_returnValue" size="40" /></div></div>
<div class="left">Phone:<div><input name="phone" type="text" id="phone" onDblClick="MM_validateForm('phone','','R');return document.MM_returnValue" size="40" /></div></div></p>
<p>The fields above are REQUIRED<br>
<strong>How did you hear about AirKrete<span style="font-size:11.0pt; ">®</span>? <br>
Please make a selection.<span id="sprycheckbox1"><span class="checkboxRequiredMsg"></span></span></strong></p><div class="radiox"><label><input type="radio" name="Connection" value="friend" id="Connection_0">Friend</label></div>
<div class="radiox"><label><input type="radio" name="Connection" value="jobspec" id="Connection_1">Job Specification</label></div>
<div class="radiox"><label><input type="radio" name="Connection" value="hgtv" id="Connection_2">HGTV Promotion</label></div>
<div class="radiox"><label><input type="radio" name="Connection" value="web" id="Connection_3">Web Browsing</label></div>
<div class="radiox"><label><input type="radio" name="Connection" value="radio" id="Connection_4">Radio</label></div>
<div class="radiox"><label><input type="radio" name="Connection" value="tv" id="Connection_5">TV</label></div>
<div class="radiox"><label><input type="radio" name="Connection" value="other" id="Connection_6">Other</label></div></p>
<p class="clear-fix"> </p>
<div><p><strong>Comments:</strong><br></p></div>
<p><textarea name="Comments" cols="43" rows="10" id="Comments"></textarea></p>
<p><label>If you have Attachments....</label></p>
<p><input name="file_attachment" type="file" size="30" /></p>
<p>When completed please click Send Email Button</p>
<input name="sendtoemail" type="hidden" id="sendtoemail" value="info#airkrete.com" />
<input type="submit" onClick="MM_validateForm('name','','R','zip','','R','phone','','R');return document.MM_returnValue" value="Send Email" />
<input type="hidden" name="redirect" value="http://www.airkrete.com/airkrete_thankyou.php" /><p>Thank You</p>
</form>
If you know what I'm doing wrong here, some advice would be greatly appreciated. Thank you.
I opened a live chat and talked to a representative about it. It turns out they discontinued this service but did not take it off the options they used. Thanks for the help everyone.
BlueMail prohibits sending a form to an email address that is not hosted on this same bluehost account. the solution is to setup a mail forwarder in the account which can then send "forward" off site. Then simply send the form to the address that is forwarded.

HTML to justify text boxes

Below is the full body code however it has been broken down using div so all looks good up to the one part where I have decided to justify the boxes however still being new to this Ijust cannot get it to justify however align="centre" align="left" align="right" works fine the part that i needto be tidied up and balanced out is:
<div align="justify"> Street Number:
<input name="xfg" type="text" disabled id="Strn" value="" readonly>
<br>
Street Name: <input type="text" disabled id="Strna" readonly><br>
Suburb:
<input type="text" disabled id="Subu" readonly><br>
Town: <input type="text" disabled id="Town" readonly><br>
Code: <input type="text" disabled id="Code1" readonly><br>
Region: <input type="text" disabled id="Region" readonly><br>
Country: <input type="text" disabled id="Country" readonly ><br></div>
full div:
<body bgcolor="#000000" text="#FFFFFF">
<div id="container" style="width:1000px">
<div id="header" style="margin-bottom:0;left:50%;">
<div align="center"><img src="Logo.png" align="middle"></div>
</div>
<div id="menu" style="width:50%; height:410px; float:left">
<div align="center">
<input type="button" value="Get Address" onclick="codeLatLng()">
<input type="button" value="reset" onclick="reset()">
<input type="button" value="Get GPS" onclick="codeAddress()"><br>
GPS: <input id="latlng" type="text" value="-00.000000, 00.000000">
Address:
<input id="pladd" type="text" value="">
<br>
<div align="justify"> Street Number:
<input name="xfg" type="text" disabled id="Strn" value="" readonly>
<br>
Street Name: <input type="text" disabled id="Strna" readonly><br>
Suburb:
<input type="text" disabled id="Subu" readonly><br>
Town: <input type="text" disabled id="Town" readonly><br>
Code: <input type="text" disabled id="Code1" readonly><br>
Region: <input type="text" disabled id="Region" readonly><br>
Country: <input type="text" disabled id="Country" readonly ><br></div>
Full Address: <br>
<textarea cols="30" rows="7" readonly id="fulla"></textarea>
<br>
</div>
</div>
<div id="aside" style="width:50%;height:410px;position:right"> </div>
</div>
<div id="footer" style="width:1000px;clear:both;text-align:center;"">
This is a WIP project, Some functions does not work 100% as yet and may be subject to change
</div>
</body>
You can't write it by html, because it is a css rule.
#your_element{
text-align: justify;
}
Managed to fix it as per below using "div align="center" " as well as using line breaks adding the Text above the Boxes instead of next to them
<div id="Menu" style="width:25%; height:550px; Float:left;">
<div align="center">
<input type="button" value="Get Address" onclick="codeLatLng()">
<input type="button" value="reset" onclick="reset()">
<input type="button" value="Get GPS" onclick="codeAddress()"><br>
<font> <font1> * </font1> GPS: (decimal degree) </font> <br><input id="latlng" type="text" value=""><br>
<font> Address:</font><br><input id="pladd" type="text" value="">
<br>
<div id="ressults1" style="text-align:center" >
<font> Street Number:</font><br><input name="xfg" type="text" disabled id="Strn" value="" readonly>
<br>
<font> Street Name:</font> <br><input type="text" disabled id="Strna" readonly><br>
<font> Suburb:</font> <br>
<input type="text" disabled id="Subu" readonly><br>
<font>Town:</font> <br><input type="text" disabled id="Town" readonly><br>
<font> Code: </font><br><input type="text" disabled id="Code1" readonly><br>
<font> Region: </font><br><input type="text" disabled id="Region" readonly><br>
<font> Country: </font><br><input type="text" disabled id="Country" readonly ><br>
<font> Full Address: <br></font>
<textarea cols="30" rows="7" readonly id="fulla"></textarea></div>

Creating a comples form in html

i'm making a html form from a pdf file. Attached is a screenshot
The input fields was different width. Is there a better way to do this form using css or jquery for the width.
Here is my fiddle
http://jsfiddle.net/cancerian73/amW5c/
<p>
<label class="lbl1">Name: (as it appears on passport):</label>
<input name="" type="text" class="inpt1" />
</p>
<p>
<label class="lbl1">Address:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">Apt.#:</label>
<input name="" type="text" class="inpt1" />
</p>
<p>
<label class="lbl1">City:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">State:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">Zip:</label>
<input name="" type="text" class="inpt1" />
</p>
Thanks
San