When someone do not fill all fields in my formular the site is showing error and it is refreshing so that someone must fill it again.
How to make the site remember correctly filled fields?
When the form is submitted, then on page refresh the $_POST data is still intact. So what you can do is something like this:
<input type="text" name="field_name" value="<?php echo (isset($_POST['field_name']) ? $_POST['field_name'] : ''); ?>">
What it does is that if the $_POST data for the field field_name is set, then echo its value.
Use of autocomplete can preserve your previous inputs.
Autocomplete ON will preserve the value and OFF will prevent the input box from remembering. In sample code, email have off as autocomplete.
<input autocomplete="on|off">
OR
<form action="/action" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Related
Suppose:
There's
First Name : (box for input first name)
Requirement: i cannot left this field empty,error message should generate if i left it empty.
Solve this only through HTML
<form>
first name <input type="text" name="firstname" required>
<input type="submit">
</form>
<input> has a required attribute, as such:
<input type="text" name="username" required>
This will raise an error if the user tries to submit the form without first filling out the input. That being said, please google this next time.
W3Schools Page
I have a very basic form where I ask user's name, mobile, email. I have enabled autocomplete provision in these fields using the following code:
<label for="frmNameA">Name</label>
<input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">
Here is the fiddle. Currently, the user has to focus on these elements and then it displays the suggestions. Is there any way by which we can prefill this data once the form is loaded? We want to prefill the 1st suggestion that comes in the autocomplete and not some hard coded value.
Also, I saw websites like facebook, twitter etc. using only autocomplete and not prefilling the data - is there any specific reason to not prefill the things?
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
<form action="/action_page.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
You can store user values into the localStorage at completion, then load this values on page load.
This way, no need to hardcode datas, neither store server side.
// Store
localStorage.setItem("userconfig",mail.value)
// Fill data
onload = (function(){
mail.value = localStorage.getItem("userconfig")
})
<form action="/subsite/" method="GET">
<input type="text" name="" placeholder="Your Nick">
<input class="button" type="submit" />
</form>
I want to redirect I mean it should looks like
www/subsite/text
What should I use ? POST ?
The method="get" means that the parameters (and values) will be sent in the query string (the stuff after the question mark in the URL). eg.
/subsite?input_field_name=input_field_value
In your case, the input field doesn't have a name, which will cause problems. You probably want something like this:
<input type="text" name="nickname" placeholder="Your Nick">
So if you submit this form:
<form action="/subsite" method="get">
<input type="text" name="nickname" placeholder="Your Nick">
</form>
Then after submitting, the browser will go to:
/subsite?nickname=value_of_nickname_variable
If you use a method="post", then the form data (variables) will be sent along in the request body, not the query string. There are other differences between get/post, but that's one of them :)
If you just want to do a simple redirect when clicking the button, you could use javascript instead, eg.: window.location.href='/my_url_path_here'
I have a form like this. I want to know that will the form submission work if the is placed in the middle of the text fields?
For example:
<input type="text" name="fname"> // First Name
<input type="text" name="lname"> // Last Name
<form method="post" action=""> // Post
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
Will the submission work for First Name and Last Name field as the is after them so they do not come inside the form.
Your form elements (like your input boxes) have to be between an opening <form> and a closing </form> tag. So your fname and lname will be ignored. (Your closing </form> is missing, too.)
Why do you have to add your form elements between form tags? This allows you to add multiple forms to one page. To identify which element contains to which form, they have to be between the form tags.
Example "Login & register on the same site":
<form method="POST" action="login.php">
User: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" value="Login">
</form>
<form method="POST" action="register.php">
Mail: <input type="text" name="email">
User: <input type="username" name="username">
Password: <input type="password" name="password">
Repeat password: <input type="password" name="pwdagain">
<input type="submit" value="Register">
</form>
Refer this site for further information: http://www.w3schools.com/html/html_forms.asp
First name and last name will not post. Username and password will post but u have to close form tag first.
If you transform you code like this it will post all :
<input type="text" name="fname" form="my_form_id"> // First Name
<input type="text" name="lname" form="my_form_id"> // Last Name
<form id="my_form_id" method="post" action="#"> // Post
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
</form>
#shubham-jha If you want multiple submit buttons under a single form, you may use AJAX.
Create a JavaScript function on click, decide to which URL you want to send this data and then change form action using jQuery, then submit using JavaScript.
Jquery to change form action
There is some news on this front, it seems.
MDN has this for you to review
form HTML5
"The form element that the input element is associated with (its form owner). The value of the attribute must be an id of an element in the same document. If this attribute is not specified, this element must be a descendant of an element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements."
Perhaps you can still achieve what you wished for. Only question then, is what browser support you must have.
I am trying to make a login form. But the text and password field of that form is not working properly. I have tested the code in all major browsers but different browser's giving different output. Firefox shows my password field is already filled, chrome shows both of the input fields are filled but IE shows it perfectly. I have already used "autocomplete" attribute. But it didn't change anything. Can anyone help me to get rid of this annoying problem? My html code-
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20">
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"><br><br>
<input type="submit" name="submit">
</form>
screen shots:- [firefox,chrome,IE]
In terms of chrome:
You've saved the username and password. It's prepopullated by chrome. That's why its showing that way.
Regarding firefox
I guess you've saved password here again. Because i've tested it in firefox and it's rendering properly. Else you've set the value attribute.
From settings, remove saved password for your page and try.
The HTML you have written is invalid and has unclosed elemens, your input fields should end with \> making your code look as follows:
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20"/>
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"/><br><br>
<input type="submit" name="submit"/>
</form>
Since you were not closing the input fields, your browser would automatically close them on your behalf, I would imagine that it has closed them after the <br> tags and therefore rendering them as the value of the input field.