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
Related
What tag should i use for small amount of text. For example it is good practise to use p tag for every "small" text like here "username" and pasword" or for day/month/year, should i use also p tag?
<div class="login-area">
<p>Username:</p>
<input type="text">
<p>Password:</p>
<input type="password">
</div>
Use
<label for="name">Your Form label</label>
<input type="text" name="name">
<label for="password">Your Form label</label>
<input type="password" name="password>
As Others have suggested <label></label> tag is other option that you can use.
Some of it's use cases are as follows:
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>
<label>
Name : <input type="text" name="lastname" />
</label>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
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
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.
i have a form on a div with check boxes, the check boxes are to low in relationship to the line of the text,
what is missing to make it align vertically?,, thanks!
<div id="dialog-form2" title="Titulo">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Your name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Your email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="email">Your phone number</label>
<input type="text" name="phone" id="phone" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Your Member Number</label>
<input type="password" name="password" id="password" value="" class="text ui-widget- content ui-corner-all" />
<br>
Enquiry<br>
<input type="checkbox" name="option1" value="Milk"> I would like to r <br>
<input type="checkbox" name="option2" value="Butter">I need a h <br>
<input type="checkbox" name="option2" value="Butter">Please email me with offer details<br>
<input type="checkbox" name="option2" value="Butter">Please call me to discuss offer<br>
<input type="checkbox" name="option2" value="Butter">Other?<br>
</fieldset>
</form>
</div>
it's hard to answer this without knowing what your style sheet is looking like. Even your font / font size will affect this to some degree. For instance, just pasting your code into a blank html file and bringing it up in a browser alignment is slightly off because it's using Times for the font for me, but then if i change the body font to arial it lines up great. Just having only this snipped with no associated css makes it hard to answer the question as clearly as you might need.
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/