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>
Related
When I click to submit button nothing happens. Can someone help me?
<form name="Personal_Contact" method="POST" netlify>
<input type="text" class="inputs" placeholder="Name... *" required>
<input type="email" class="inputs" placeholder="Email...">
<textarea name="" id="" cols="30" rows="10" class="textarea" placeholder="Your message... *" required minlength="10"></textarea>
<button type="submit" class="rightbutton"> SEND </button>
</form>
You might need to add an action to fix the problem.
<form name="Personal_Contact" method="POST" netlify action="/">
<input type="text" class="inputs" placeholder="Name... *" required>
<input type="email" class="inputs" placeholder="Email...">
<textarea name="" id="" cols="30" rows="10" class="textarea" placeholder="Your message... *" required minlength="10"></textarea>
<button type="submit" class="rightbutton"> SEND </button>
</form>
I've fixed it. I deployed the site again and add name="" to my inputs and it works now.
I'm using FormSubmit to create a contact form in my static website (hosted on a server).
My form looks like this:
<div id="contact-area" class="container">
<h1>~$ contactme</h1>
<br>
<form action="https://formsubmit.co/c379c266434ca1a039bdf03209919395" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Your name..." required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Your e-mail" required>
</div>
</div>
</div>
<div class="form-group">
<textarea maxlength="1000" placeholder="Your message..." class="form-control" name="message" rows="10" required></textarea>
</div>
<input type="hidden" name="_template" value="table">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="message_sent.html">
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit</button>
</form>
</div>
My email is verified. When the user clicks on submit button, this message appears in a new page:
" Make sure your form has the method="POST" attribute "
However, I receive the message. That's weird. Anyone know why it says my form should have POST attribute while my form actually has the post attribute.
Your code snippet is all okay. I have tested it, forms are getting submitted, and nothing wrong except the way you implement the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or file, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
Please change the hidden filed in your form to:
<input type="hidden" name="_next" value="https://yourdomain.co/message_sent.html">
and that should probably work fine.
Additional information:
FormSubmit documentation: https://formsubmit.co/documentation
I guess you have gone wrong in the action of the form.
Try using this:
<form action="https://formsubmit.co/your#email.com" method="POST">
<!-- Your form inputs here -->
</form>
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.
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.