I am using placeholders for all my form elements and it's showing up in them all apart from the textarea. Just looked at it in safari now, and have realised that my input of type="number" isn't showing the placeholder either.
The page is here and you need to click the 'book now' link at the top of the page.
My html:
<form id="booking" action="single-workshops.php">
<input type="text" required="required" placeholder="name"/><br />
<input type="text" required="required" placeholder="your phone number"/><br />
<input type="email" required="required" placeholder="email"/><br />
<input type="number" required="required" placeholder="how many in your party" /><br />
<textarea rows="5" cols="30" placeholder="enter optional message">
</textarea><br />
<input type="button" value="submit"/>
</form>
Because you have something as text in your textarea with a linebreak in it.
<textarea rows="5" cols="30" placeholder="enter optional message">
</textarea><br />
Should be:
<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />
Related
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.
enter image description here
Why this % is showing inside the email, it should Please enter your email
The code look something like this:
<form method="post">
<input type="email" placeholder="Please Enter Your Email" />
<input type="password" placeholder="Password" />
</form>
Use this method
<html>
<body>
<input required type="email" placeholder="Enter Your Email" />
<input required type="password" placeholder="Enter Password" />
<input type="submit" value="submit" />
<body>
</html>
<form id="contact_form" action="/contact-verzenden" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" value="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" value="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" value="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required >Vraag/opmerking</textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
When I click submit, the data sends regardless of whether something has been entered or not.
Even though it's exactly the same as the W3 schools example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required
What am I doing wrong?
Because you still have value in every input elements.
Try using placeholder to make it look like your design.
<input class="textbox" type="text" name="name" id="name" placeholder="test" required/>
check this code:
<!DOCTYPE html>
<form id="contact_form" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" placeholder="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" placeholder="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" placeholder="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required ></textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
</html>
Because you are already giving him value (value="Jouw naam") and also onblur you are giving it a value ("Naam"). So the value is never empty. That`s why it is submitting the form.
Add placeholder="Jouw naam" instead of value = "Jouw naam"
Hope it helps !!
I have a honeypot ('Work Phone') field in a simple contact form. I am hiding (hacking) the element by positioning it fixed and -1000% off the screen.
The form HTML:
<aside class="enquiry-form">
<h3 class="heading">Enquire Now</h3>
<form id="EnquiryForm_EnquiryForm" action="/products/filtered-water-taps/EnquiryForm" method="post" enctype="application/x-www-form-urlencoded">
<div class="inputs">
<input type="text" name="Name" class="text" id="EnquiryForm_EnquiryForm_Name" required="required" aria-required="true" placeholder="Name" />
<input type="email" name="Email" class="email text" id="EnquiryForm_EnquiryForm_Email" required="required" aria-required="true" placeholder="Email" />
<input type="text" name="Work Phone" class="text" id="EnquiryForm_EnquiryForm_Work-Phone" style="position: fixed; left: -1000%;" tabIndex="-1" />
<input type="text" name="Phone" class="text" id="EnquiryForm_EnquiryForm_Phone" required="required" aria-required="true" placeholder="Phone" />
<input type="text" name="Product" value="Filtered Water Taps" class="product" id="EnquiryForm_EnquiryForm_Product" placeholder="Product" />
</div>
<div class="message">
<textarea name="Message" class="textarea" id="EnquiryForm_EnquiryForm_Message" required="required" aria-required="true" placeholder="Message" rows="5" cols="20"></textarea>
</div>
<input class="button dark" type="submit" value="Send" />
</form>
</aside>
The problem is, in ie8 the whole page breaks and I get a white screen, I cannot inspect the element using dev tools which makes debugging very dfficult.
My gut feel is that it has something to do with html5shiv.
Any help is appreciated.
I would suggest this method:
#EnquiryForm_EnquiryForm_Work-Phone {
position: absolute;
top: -9999px;
left: -9999px;
}
By the way, I think its better to use a "website" as honeypot field. This is something a spambot allways want's to fill out.
When the user hits submit, it will show a different text in the box based on user input. For example: "www.link.com/page".
Here is the HTML:
<form method="post" action="">
<textarea name="comments" cols="25" rows="5">
page
</textarea><br>
<input type="submit" value="Submit" />
</form>
Try this (if this is what you are trying to do) :
<input type="text" id="txtInput" value="" />
<input type="button" value="Submit" onclick=" javascript: document.getElementById('comments').value = document.getElementById('txtInput').value;" /><br />
<textarea name="comments" id="comments" cols="25" rows="5">
page
</textarea>
If you are trying to do something else, please provide more details. :)