when I click the 'save new post' button and the title and body content are provided then the action of sending a request is successfull, but if I leave one field blank, than the request isn't even made.
this is my code:
<form action="/create-post" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"></textarea>
</div>
<button class="btn btn-primary">Save New Post</button>
</form>
And this is what I get when I leave a field blank:
form behavor after submitting empty field
in the image, 'Compila questo campo' just means 'Fill in this field'
Edit:
thank you for reminding me that it’s because of the required field, but then why is that in this example i can't submit if the title field is empty but can if the body is empty?
<form class="mt-3" action="/post/<%= post._id %>/edit" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" value="<%= post.title %>" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"><%= post.body %>
</textarea>
</div>
<button class="btn btn-primary">Save Changes</button>
Note that this is a ejs template, so that's why it as <% and <%=
You have required attribute both of your inputs. So you can't submit this form in this way.
See here for details
For example in this example you can submit the form:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="#" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
But in this example you can't:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Good luck.
You explicitly said that the user was required to fill in a value.
Don't do that if the field is optional.
Because your <input> and <textarea> tags have required attribute. Remove that attribute if you want to make them optional.
You are using required attribute with textbox and text area.
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
This is client side (browser side validation).
Reference
Related
My Formsubmit doesn't work.
Even using the simple example on the site my submit button doesn't send. I can't even send the verification to my email.
I'm using Angular.
<form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method="POST">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">Send</button>
</form>
EDIT: he problem is the button seems to have no function, it doesn't work at all.
I know it is a little late, but try this:
<form #form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method='POST'>
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit" (click)="form.submit()">Send</button>
</form>
Try replace
<button type="submit">Send</button>
by:
<input type="submit" value="Send"/>
Complete Code:
<html>
<body>
<form action="https://formsubmit.co/matheusproencaescola#hotmail.com" method="POST">
<input type="text" name="name" required/>
<input type="email" name="email" required/>
<input type="submit" value="Send"/>
</form>
</body>
</html>
Edited: Right! I used button tag and it works too.
When I click on button, it redirects to:
https://formsubmit.co/matheusproencaescola#hotmail.com
What happen in your case ?
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>
<form class="user" action="code_user.php" method="POST">
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>
<button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>
In HTML input validation , i have set the pattern of alphebetic only. When testing with numeric input in it , it shows
However, if i correct the input into the alphabets ,it will shows invalid again
I have to refresh the page again to input the correct format only it will not show
invalid. Is this normal?
This is my code:
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>
You don't clear your setCustomValidity(). If you set a value with setCustomValidity() then the field is invalid. Just add such attribute to your input tag:
oninput="setCustomValidity('')"
Fixed in your code:
<form class="user" action="code_user.php" method="POST">
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" oninput="setCustomValidity('')" type="text" name="name" autocomplete="off" required />
</div>
<button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>
I am making a html page where you login to see links but I cant get the enter key working
<form name = "myform">
<p style="text-align:center">ENTER USERNAME <input type="text" name="username"></p>
<p style="text-align:center">ENTER PASSWORD <input type="password" name="pword"></p>
<p style="text-align:center"><input type="button" value="Check In" name="Submit" onclick= "validate()">
</p></center>
For your enter button to work, you need to change your button input type to submit.
<!DOCTYPE html>
<html>
<body>
<form action="action_page">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="pword">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I upvoted Darkhouse's answer but wanted to post this most simple version of your code that should also work just fine:
<form name = "myform">
<input type="text" name="username" placeholder="Enter Username">
<input type="password" name="pword" placeholder="Enter Password">
<input type="submit" value="Check In" name="Submit">
</form>
Here is simple form which collects a user's info and sends that info to a specified email address. But whenever I am extracting those info into mail & appears between inputs. Like
email=some%40gmail.com&password=asdf&password-repeat=asdf
How can I remove this? Please help
Here is my HTML form:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="post" action="mailto:somebody#gmail.com">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<label for="password-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="password-repeat" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</body>
</html>
There are two ways to do this:
1) Add enctype="text/plain" to your <form> tag, e.g.:
<form method="post" enctype="text/plain" action="mailto:alice#example.com">
2) Add formenctype="text/plain" to your <button> tag, e.g.:
<button type="submit" formenctype="text/plain" class="registerbtn">Register</button>
Both approaches will produce a body like:
email=bob#example.com
password=asdf
password-repeat=asdf
This is necessary because the default MIME type for the form is application/x-www-form-urlencoded. You can read more on this at Mozilla.org. I've quoted enctype below but provided links for both.
enctype
When the value of the method attribute is post, enctype is the MIME type of content that is used to submit the form to the server. Possible values are:
application/x-www-form-urlencoded: The default value if the attribute is not specified.
multipart/form-data: The value used for an <input> element with the type attribute set to "file".
text/plain (HTML5)
This value can be overridden by a formenctype attribute on a <button> or <input> element.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype
Here's your code (with demo email address) as a running example with enctype:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="post" enctype="text/plain" action="mailto:alice#example.com">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<label for="password-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="password-repeat" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</body>
</html>