HTML (Forms stuck in nest) - html

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

Related

checkboxes in html form wont check when clicked even with labels : Here's the whole form

Some of the checkboxes in my form are not checking when clicked
I've tried wrapping them with the label as this usually does the trick for people but this hasn't changed anything for me, even if I get rid of the text for each checkbox it still doesn't check. I'm not sure what else it could be.
<div class = "register">
<form action="register.php" method="post">
<input type="text" name="username" value="" placeholder="Username ..."><p />
<input type="password" name="password" value="" placeholder="Password ..."><p />
<input type="email" name="email" value="" placeholder="someone#somesite.com"><p />
<input type="gender" name="gender" value="" placeholder="Male or Female ..."><p />
<input type="sport" name="sport" value="" placeholder="Favorite Sport..."><p />
<input type="age" name="age" value="" placeholder="Age ..."><p />
<h1 class="h4">Favorite Player</h2>
<br><br>
<label><input type='checkbox' name='response1' value='response1'>Ronaldo</label>
<label><input type='checkbox' name='response2' value='response2'>Messi</label>
<label><input type='checkbox' name='response3' value='response3'>Ibra</label>
<label><input type='checkbox' name='response4' value='response4'>Me</label>
<br><br>
<h1 class="h4">Favorite Color</h2>
<br><br>
<label><input type='checkbox' name='noise1' value='noise1'>Red</label>
<label><input type='checkbox' name='noise2' value='noise2'>Blue</label>
<label><input type='checkbox' name='noise3' value='noise3'>ME!</label>
<br><br>
<h1 class="h4">Level of Cleanliness/Organization Preference </h1><br><br><br><br>
<input type='checkbox' name='room1' value='room1' class='heads'><img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1446151328/miami-header-dg1015.jpg?itok=eIwFd7q_" width="250" height="250" /><br>
<input type='checkbox' name='room2' value='room2' class='heads'><img src="https://images.musement.com/cover/0002/49/thumb_148242_cover_header.jpeg?w=1200&h=630&q=60&fit=crop" width="250" height="250" /> <br>
<input type='checkbox' name='room3' value='room3' class='heads'><img src="place.jpg" width="250" height="250" />
<h1 class="h4">Do you want a account?</h2>
<br><br><br><br>
<label><input type='checkbox' name='r1' value='r1'>Yes</label>
<label><input type='checkbox' name='r2' value='r2'>No</label>
<br><br>
<h1 class="h4">Do you need a account?</h2>
<br><br>
<label><input type='checkbox' name='r3' value='r3'>Yes</label>
<label><input type='checkbox' name='r4' value='r4'>No</label>
<br><br>
<br><br>
br><br>
<?php
if(isset($_POST['r3']))
{
echo ' <h1 class = "h4">How did you find us?</h2><br><br> <input type="location" name="location" value="" placeholder="Zip Code or Full address"><p />';
}
?>
<br><br>
<input type="submit" name="createaccount" value="Create Account">
</form>
</div class = "register">
To have the checkboxes check when clicked
I was able to check the boxes when running the code snippet included with your question.
As a possible solution for your environment, instead of:
<input type='checkbox' name='response2' value='response2'>Messi</label>
Try the following:
<input type="checkbox" id="Messi" name="Messi"> <label for="Messi">Messi</label>

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.

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

HTML form input steals focus/ focus gets shifted

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/

Two radio buttons on at the same time

Hello Can you tell why I am allowed to select two radio buttons in this code
<html>
<head><title>Survey</title>
<body>
<h3>Please Enter the following Information: </h3>
<form method= "post" action="/~fmccown/cgi-bin/printinfo.cgi">
<input type ="hidden" name="input-source" value="survey2.html" />
<p>
Name: <input type="text" name="name" size="30" />
</p><p>
Classification:
<select name="class">
<option>Freshman</option>
<option selected="selected">Sophomore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</p><p>
Gender:
<input type="radio" name="gender" value="M" checked="checked" />Male
<input type="radio" name="gender" value="F" />Female
</p><p>
Email address: <input type="text" name="email" size="30" />
</p><p>
Password: <input type="password" name="pword" />
</p><p>
What are your favorite computer classes?
<br />
<label>
<input type="checkbox" name="class-int" />Internet Development
</label>
<label>
<input type="checkbox" name="class-net" />Networking
</label>
<label>
<input type="checkbox" name="class-gui" />GUI
</label>
<label>
<input type="checkbox" name="class-oop" />OOP
</label>
</p><p>
Are you graduating this spring?
<label>
<input type="radio" name="grad-yes" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad-no" value="Yes" />No
</label>
</p><p>
<input type="submit" value="Submit Survey" />
<input type="reset" value="Clear Form" />
</p>
</form>
<p>
Thank You!
</p>
</body>
</html>
These two elements should probably have the same name:
<input type="radio" name="grad-yes" value="Yes" />
<input type="radio" name="grad-no" value="Yes" />
Radio buttons get grouped together if and only if they share a common name.
The first pair is called gender, so it works.
The second pair doesn't, since one is called grad-yes and the other grad-no.
The way to go would be:
<label>
<input type="radio" name="grad" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad" value="No" />No
</label>