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.
Related
How would I fix this code for it to be validated in html 5 correctly? When I test my page in Chrome, it shows the page correctly, but I am validating with errors...
<div class="form">
<form action="#">
<div class="flexBox">
<input type="text" name="" id="" placeholder="Your name">
<input type="email" name="" id="text" placeholder="Your email">
</div>
<input type="text" name="" id="" placeholder="Your subject">
<textarea "name" id="" cols="30" rows="8" placeholder="Your message">
</textarea>
<button type="submit">Send</button>
</form>
</div>
There are multiple errors in your HTML code.
Firstly, you need to remove the name string on the <textarea> element.
I think you wanted to set the name attribute to something. In that case, you can use the code below.
<textarea name="name"></textarea>
Secondly, you have to remove all of the empty name and id attributes. So, all of these:
<input name="" id="" />
Can simply be removed.
<input />
So, in summary, you need to:
Change the "name" text on the <textarea> element to be an attribute (and have a value).
Remove all empty name and id attributes.
All the issues that have been pointed out are right. I strongly recommend you to use a linter within your IDE
Or check out sites like validator.w3.org where you can paste/upload/urled your code and it will analyze it.
Here is my corrected code which validates perfectly. Just in case someone runs into a similar issue in the future. Thanks everyone.
<div class="form">
<form action="#">
<div class="flexBox">
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
</div>
<input type="text" placeholder="Your subject">
<textarea cols="30" rows="8" placeholder="Your message">
</textarea>
<button type="submit">Send</button>
</form>
</div>
I am creating a form using html and css.
But when I keep multiple buttons inside the form tag, they act as a submit button even though one out of it was used for going back. If I keep the another button outside the form tag then the button is placed at the new line but I want both the buttons in the same line.
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
</form>
<button>Back</button>
Help me in this.
by default buttons in a form is type submit, so all you need to do is change the type of the button to button (<button type="button">Back</button>).
like this:
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
<button type="button">Back</button>
</form>
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
I'm trying to make a "contact" button that doesn't allow you to submit until the required fields are filled, then redirects you to another html site. It currently doesn't allow you to submit correctly, but when the fields are filled it just resets the page instead of redirecting it. I think it's ignoring the "form action" part.
Also the reset button just doesn't work at all.
Does anyone see anything that might be the reason?
Thanks!
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<form action="contact2.html" method="post">
<input type="submit" value="Contact" />
</form>
<form action="contactus.html">
<input type="reset">
</form>
</form>
Here's an image of what it looks like when you click contact without filling in the fields
https://i.gyazo.com/dc3a77b5eed0dbad2d6f6e2da1cf3075.png
Below is working code
<form method="post" action="/abc.html">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<input type="submit" value="Contact"/>
<input type="reset">
</form>
Explanation:
All form-elements buttons, textarea, input should be wrapped in one form element.
you need to add form method as post and in action pass the URL of the page where you want to redirect after successful form submission.
This is my html
<form action="" id="form">
<label for="name">NAME:</label>
<input class="inputfield" type="text" name="name" placeholder="Full name">
<br>
<label for="email">E-MAIL:</label>
<input class="inputfield" type="email" name="email" placeholder="Email adress">
<br>
<label for="subject">SUBJECT:</label>
<input class="inputfield" type="text" name="subject" placeholder="Subject">
<br>
<label for="message">MESSAGE:</label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"></textarea>
<br>
<input class="submitform" type="submit" name="submit" value="Send">
</form>
and it linked to bootstrap. and to another simple css file.
It works good in all the other sizes. I tried some things but nothing works.
Thanks.
Chances are you're additional stylesheet is overriding the Bootstrap CSS because of a media query you may have added to it.
Or have you done anything to the Bootstrap CSS itself instead of using a new stylesheet to override it?
Check your stylesheet and if your stylesheet isn't too large you should post it if you still need help.