Problem loading INPUT fields in HTML form in IE.
I upload aspx form,
The form is fully loaded, including the content I submitted to the fields.
At this point everything is fine in chrome,
But in IE and Edge the fields that contain content are unmarkable. It is only after about two minutes that the fields are allowed to select and mark the text.
My client copies information from this form, so the fields should be open for text markup and copying.
Does anyone have an idea why they don't open immediately and how to solve it?
when i debuging the code, everything seems to load properly.
In the Network tab of IE Developer Tools, Everything seems to end up charging pretty quickly.
What else should I check?
The problem was solved when I replaced one field of type "text" to type "textarea".
It seems to have enabled the page to load properly in IE.
Does anyone know how to explain this phenomenon?
Previous Code:
<div>
<div>
<label>first name</label>
<input type="text" value="" tabindex="1" maxlength="50" data-fv-notempty="true" disabled />
</div>
<div>
<label >last name</label>
<input type="text" value="" tabindex="2" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
<div>
<div>
<label>Address</label>
<input type="text" value="" tabindex="3" maxlength="50" data-fv-notempty="true" disabled />
</div>
<div>
<label>Locality</label>
<input type="text" value="" tabindex="4" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
New Code:
<div>
<div>
<label>first name</label>
<div style="overflow: hidden; background-color:#eee; padding:0;" ><textarea style="width: 120%;border:none;box-shadow:none;" rows="1" tabindex="1" maxlength="50" data-fv-notempty="true" disabled></textarea></div>
</div>
<div>
<label >last name</label>
<input type="text" value="" tabindex="2" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
<div>
<div>
<label>Address</label>
<input type="text" value="" tabindex="3" maxlength="50" data-fv-notempty="true" disabled />
</div>
<div>
<label>Locality</label>
<input type="text" value="" tabindex="4" maxlength="50" data-fv-notempty="true" disabled />
</div>
</div>
Related
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
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>
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.
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
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.