HTML Form submit buttons - html

I know, this might be a very basic question but I am not 100% sure on the topic.
When submitting forms, is there a precise value that needs to be passed in order to inform that a certain button was pressed...
or can any value be passed in relation to the submit button's name?
Any ideas?
Edit:
Thank guys! I found out how to deal with the problem.
As variables are passed to the servers and are pretty much open to interpretation, depending on how they are read by the server,
I just decided to check the data being posted on various forms and just decided to mimic them.
Everything works now, thanks for your help!

You could pass any value and you can check based on various possibilities whether form was submitted. For example, this is how we check in php whether or not form was submitted:
<input type="submit" name="submit" value="whatever" />
if (isset($_POST['submit']))
{
// form was submitted !!
}

You should pass the <input type="submit">'s value attribute.
For example, if the user clicks the following submit button, the browser must send GoNext=Next+Step
<input type="submit" name="GoNext" value="Next Step" />
For more information, read the specification

Related

What is required to make browsers send "submit"-input names to the server?

I need to debug missing data in some from POSTed to the server and after reading lots of tutorials and following other examples about that aspect, I still can't find my problem. The use case is pretty simple in theory: Have one form with two submit buttons to trigger different implementation on the server side.
According to lots of tutorials and examples, the submit-buttons should send their name if they have a name-attribute, while values should not be sent at all. The naming thing seems to differ according server side programming languages, sometimes it's some_name and sometimes some_name[], but that doesn't make any difference for me currently.
My problem is that whatever HTML I create, inputs of type submit are never part of the POSTed data. OTOH, pretty much the same HTML as button works as expected: If the button is used to submit the form, its name and even value are part of the POSTed data. When other inputs are clicked to submit, no names of any submit-input are available in the data.
So, with the exact same form, reaching the exact same endpoint, using same browser etc., the following DOES NOT provide any hint to the clicked button in the POSTed data:
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
While the following OTOH does:
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
So, should the input work the same way like the button does in theory? Or is the HTML wrong and I'm not able to spot the error? Sending the form itself works in both cases, though. So the browser obviously knows about the submit-input and its purpose.
Or have something changed the last years in modern browsers and submit-inputs are not part of POSTed data at all anymore for some reason? I can't remember the need to have multiple submits on a form for years.
How does a minimal example using a submit-input sending its name look like and tested to work for you? And in which browser? I tested an up-to-date Chromium based Opera and IE 11 and neither did include submit names.
Thanks!
OPINION: I would personally NEVER use more than one word in the name of a submit button
FACT: If that word is "submit" or you have id="submit" then you will not be able to programmatically submit the form using .submit()
FACT if you have script that disables the form element, it will not be sent to the server
Conclusion
In my experience and according to documentation - If you have the following
<form>
...................
<button type="submit"
name="whatever you want here but I would only use one name and NOT submit">Whatever</button>
</form>
OR
<form>
...................
<input type="submit"
name="whatever you want here but I would only use one name and NOT submit" value"Whatever">
</form>
your server will receive the button as name=value in the POST array if method = post and in the GET if nothing or method=get AND in the REQUEST array in either case (assuming PHP)
TEST PAGE
<form method="post" action="testsubmit.php">
Did not work according to OP<br/>
But it actually DOES work if not disabled from elsewhere <br/>
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
<hr/>
<input type="text" name="sentField" value="This WILL be sent to the server" style="width:300px"/>
<hr/>
<input type="text" name="disField" disabled value="This will NOT be sent to the server" style="width:300px"/>
<hr/>
Does work
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
</form>

What is the difference between method="post" and type="submit" (HTML)?

Are they completely different things? I don't really get forms yet and many of the guides I found online don't really use type="submit" so I thought I would ask.
method is a form attribute. It specifies the method for requesting the server. It has only two options, either GET or POST. Use GET if your form has not sensitive data, while use POST when you are trying to submit sensitive data like user login. You can refer for more information here: https://www.w3schools.com/tags/att_form_method.asp#:~:text=The%20method%20attribute%20specifies%20how,URL%20in%20name%2Fvalue%20pairs
type is the attribute for input which specifies what the input is gonna be. It's options are text, email, password, checkbox, submit and many more. The type submit tells the input to submit the form when the user clicks the input which has this type on it. Have a look at it https://www.w3schools.com/tags/att_input_type.asp.
Example:
<form action="to/the/action" method="POST">
<input type="text" placeholder="Enter user name" />
<input type="submit" value="submit your form" />
</form>
Here is the simple form which tells the browser to show an input of text telling the user to enter user name. The action is the path where you want to send the form data, while type=submit is defining that submit this form when user clicks me.

How to design form tags button in html

I have a button that is this <button id="btnSubmit">Submit</button> the problem is, I want the form tags to use this id so that is designed the way I want. And also this code, I have a few questions.
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
what is the action="demo_form.php",input type="submit" do? And does the input type has any other "What do you call this stuff" besides submit?
The action="demo_form.php" sets the action, in this case, "navigate to file demo_form.php and send it the data".
<input type="submit" (...) > creates and element which submits the form e.g. executes the "action".
The method sets the way the data is submitted to the target of the action ("form_demo.php"), in this case get, which allows you to refer to the submitted data as $GET["name"] in PHP.
Possible input types are listed here.
You either give your <input type="submit" (...) > the id="btnSubmit" property or use javascript to submit the form after an event has been triggered.
MOr info on that is available here (i short: document.<get_the_form_element>.submit();).
I suggest you to take a look at this link. It describes all the basic concepts about how using forms. And you can also find a lot of information by Googling it.
The action attribute
The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
The input attribute
<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
If i understand your question correctly, these are my answers.
action
The action attribute describes the page to which the contents of the form are sent to. So if you have a sign up form with an input for an email, the text that is typed will be sent to the action path. It will be sent using the method described in the method attribute. So you can find your values in either the $_POST variable, or the $_GET variable, get is easy for being able to share the url and post is great for private information.
input
The input element is the actual way to input information (who guessed it). You've got an input of the type text for just text input, you've got checkbox for a true or false input and way way more see: w3schools
why don't you use
<input type="submit" value="Submit" id="btnSubmit">
Or if you want to use a button
<button id="btnSubmit">Submit</button>
Then from jquery or js you can submit the form.
And for this question,
what is the action="demo_form.php",input type="submit" do?
You should probably google it out. This is so basic.
Anyway, just a concise explanation:
action is the attribute where you will specify the code that will handle the form data submitted and input type="submit" will display a button in the page, clicking on it will submit the form.
There are a lot of types in input, the most common ones are
text
password
submit

Any way to force a form to submit fields differently without using Javascript?

I have a form:
<form method="GET">
<input type="text" value="hello" name="myname" />
</form>
If this form is submitted, I will end up at:
example.com/?myname=hello
What I would prefer is that when this gets submitted, I end up at:
example.com/hello
Is this possible?
No, you cannot change the way form submission works in HTML. (Using JavaScript, you can do transactions in a different way, without using HTML form submission.) When using method="GET", the URL gets constructed in a specific way; when using method="POST", the URL does not contain submitted data at all (it is sent outside the URL).
There is a trick that changes form submission in one way, but not quite the way you want. If the name of a control is isindex, then the control name and the equals sign are omitted; but the question mark is still there. That is, <input type="text" value="hello" name="isindex" /> would result in http://www.example.com/?hello. And Chrome has broken this when they removed the remainders of support to the isindex element.
If, for some special reason, you really need to make a form create requests like http://example.com/hello, then the simplest way is to set up a very simple server-side script that accepts normal requests that result from HTML forms and just passes them forward after modifying the URL in a simple way.

html forms - why do I often see <input name="next" />? Clarification on what the 'name' attribute does

I was always confused about what the 'name' attribute did in html forms. From the textbook I read (html and css, design and build webpages by John Duckett), this is what it said about the 'name' attribute.
When users enter information
into a form, the server needs to
know which form control each
piece of data was entered into.
(For example, in a login form, the
server needs to know what has
been entered as the username
and what has been given as the
password.) Therefore, each form
control requires a name attribute.
The value of this attribute
identifies the form control and is
sent along with the information
they enter to the server.
From reading this, I always thought that, say in the database there is a field called "theUsersPasswordField" and a field called "theUsersUsernameField". I thought that, suppose there is a registration form, then the form would be like:
<form action="aURL" method="post">
<p>Please enter what you want your Username to be:</p>
<input type="submit" name="theUsersUsernameField" />
<p>Please enter what you want your Password to be:</p>
<input type="password" name="theUsersPasswordField" />
</form>
and then this way, when the information is sent to the database, it will know which information to put in the 'theUsersPasswordField" and which information to put in the "theUsersUesrnameField". Am I wrong?
What does name="next" mean? I see it often when I look at html forms, for example, here in this Django tutorial I am doing:
<form method="post" action=".">
<p><label for="id_username">Username:</label></p>
<p><label for="id_password">Password:</label></p>
<input type="hidden" name="next" value="/" />
<input type="submit" value="login" />
</form>
In the tutorial I am doing, it says that
The html form contains a submit button and a hidden
field called next. This hidden variable contains a URL that tells the view where to
redirect the user after they have successfully logged in
now, how is 'next' a url? When I run the code, the form does in fact successfully redirect to the main page, but how does it know to redirect to the main page? Why does name='next'?
And how does the server know which information to treat as the username and which information to treat as the password? I though that that is what the 'name' attribute is used for?
The name attribute in a control element like input assigns a name to the control. It has two basic effects: 1) a control needs a name in order to be “successful”, which means that a name=value pair from it will be included into the form data when the form is submitted; and 2) the attribute specifies what will be included as the first part of the name=value pair.
It is entirely up to the server-side form handler what (if anything) it will do with the name=value pairs in the form data. They might have a simple correspondence in some database, but that’s just one possibility. And form handling need not be database-based at all.
The name attribute values have no predefined meaning in HTML. They are just strings selected for use in this context, and they may be descriptive or mnemonic, or they may not.
However, the choice of name attribute values may have side effects. Browsers may give the user a menu of previously entered data so that if you fill e.g. several forms (possibly in different sites) that have a control named email, you might be able to enter your email address just once and then accept whatever the browser suggests as input. This may be seen as a convenience or as a threat to data security. There is proposed set of “standard” names for many purposes in HTML5 CR.
For completeness, it needs to be added that in browser practice and according to HTML5 CR description of name, two names have a special meaning: _charset_ and isindex.
The name next is in no way special, but in this context, it appears to specify the next page to move to. It is defined for a hidden field, so it takes effect independently of user input.
and then this way, when the information is sent to the database, it will know which information to put in the 'theUsersPasswordField" and which information to put in the "theUsersUesrnameField". Am I wrong?
You have to write a script (for example in php) that will put the right values from your form (they are in the $_POST array) into the databse.
in your example $_POST['theUsersUsernameField'] will hold the username
<form method="post" action=".">
<p><label for="id_username">Username:</label></p>
<p><label for="id_password">Password:</label></p>
<input type="hidden" name="next" value="/" />
<input type="submit" value="login" />
</form>
how is 'next' a url?
next is not the url.
the action="." is the url to wich the form redirects.
/ is the value that the script will evaluate to see what it has to do. (Normally you will have to change this into something else like 'check password')
In the $_POST[] array there will be a key $_POST['next'] and the value will be /
I am not familiar with Django but I hope this helps