How to post and store data - html

I've coded a simple form using HTML5 and CSS3 with a submit button.
My questions are:
Where is sent the form-data when the form is submitted by a client?
What data gets sent to the server?
And finally, do I need the <form> action attribute in the HTML5 markup?

1.
<form> has attribute action and here you can describe where your data will be send for example:
<form action="/something_action_on_your_server">
2.
Data which will be send is located in name attriubte of <input>, for example:
<form action="/something_action_on_your_server">
<input name="first_name" >
</form>
and if you submit your form, something action get data like: {name: 'something value from input'}
3.GET is HTTP method, which is used to visit page or send something public information, if you want send something private information you have to use POST method instead GET
for example:
<form action="/something_action_on_your_server" method='get' >
4. You don't have to set action attribute, but if you will not do it, your form will be send to your current page :)

Related

Sending additional parameters via form using POST: hidden fields or query parameters

I have some HTML forms and I need to provide additional parameters which the user will not fill up in the form UI. I understand I can do it using query parameters or hidden form fields. Examples :
a form whose data must be submitted to the server together with an option chosen in the previous web page
Ex: URL /createImage?option=option_value (accessible via GET by user) would contain the HTML code below
Query parameter
<form action='/createImage?option=option_value'>
<input type='textfield1' name='var1'>
</form>
Hidden field
<form action='/createImage'>
<input type='hidden' name='option' value='option_value'>
<input type='textfield1' name='var1'>
</form>
(in this case, I suppose a third solution would be to use a HTTP session variable instead)
a fake form used to associate a POST HTTP request with a image.
Query parameter
<form action='/createContainer?image=image1'>
<input type='image' src='container.png'>
</form>
Hidden field
<form action='/createContainer'>
<input type='hidden' name='image' value='image1'>
<input type='image' src='container.png'>
</form>
(in this case, I suppose a third solution would be to use a standard img HTML tag and use Javascript to send the POST request to the server on its click() event)
Are there any upsides/downsides in each one of those approaches or is it just a matter of personal preference?

How to prevent URL encoding while using FORM and INPUT

How can I prevent the URL I put in my forms and inputs from being encoded?
Code (JADE):
form(method="get" action="http://whateverdomain.com/blabla?")
input(type="text" name="action=basic&searchstr" size="31" value)
^That spits out this:
"http://whateverdomain.com/blabla?action%3Dbasic%26searchstr=mySearchQuery"
And that doesn't work — Which is why I'm asking for help here.
Context:
I'm trying to make myself a custom 'New Tab' page with search boxes connected to the sites (forums, etc) I often use.
Thanks in advance!
When using a form with methot="get", all your form elements' names and values will be appended to the query string of the action URI for the request that is issued when you submit the form.
When building the query string, the browser will percent-encode the names of the form fields.
If you have any query string parameters that you want to hardcode in the request URI, either add them as hidden form fields:
<form action="blabla">
<input type="hidden" name="action" value="basic" />
...
Or add them to the query string of the action URI:
<form action="blabla?action=basic" ...>

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

What does an entry "action='?'" in html form mean?

I have found an entry in html file
'<form action="?" ... '
I do not understand what it does.
Search in Google returned no results. Actually it is a Django template file, but I didn't find anything in django template documentation.
It uses the current URL with an empty query string as the action of the form. An empty query string. Empty. Meaning no query string at all. The query string will be no more. It will not be used. It will be gone. There will be no more query string after submitting the form. The query string will have vanished. Disappeared. Gone away. Become no more.
The action= atrribute has only value. i.e URL.
In simple english once your form is processed and you hit a submit button or enter you will be redirected to the URL you give to the action attribute
Example:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
In the case of you question, if the action is "?" then the returned hash-string will be current URL plus "/?" appended which will take you back to the same page you were on.
action="" will resolve to the page's address. action="?" will resolve to the page's address + ?, which will mean an empty fragment identifier.
Doing the latter might prevent a navigation (new load) to the same page and instead try to jump to the element with the id in the fragment identifier. But, since it's empty, it won't jump anywhere.
Usually, authors just put # in href-like attributes when they're not going to use the attribute where they're using scripting instead. In these cases, they could just use action="" (or omit it if validation allows).
'<form action="?" ... ' strips the query string off of the URL when submitting the form, and submits the form to the current document address (i.e. itself).
Here is what that means:
Let's use the following URL as example:
ExampleSite.com**?SearchTerm1=chocolate&SearchTerm2=cake**
This URL contains the query string
'?SearchTerm1=chocolate&SearchTerm2=cake'
and sends that query string to the web site server, attached to the URL.
Sometimes, you want to ensure that the URL being passed to the server is stripped of any query strings (i.e. the query is string is removed completely) and only the URL is passed.
Let's say you bookmarked the page, using the full URL and query string ExampleSite.com?SearchTerm1=chocolate&SearchTerm2=cake****
Now you get to that page, and there is a search form.
You decide to use the search form to search for something new...
'<form action="?" ... ', as used above, removes the query string from the URL when the form is submitted, and submits the form to the same page that it came from (usually a 'controller' (a page with programming that determines what to do with the information sent to it by the user) ).
<form name="test" action="process.php" method="get">
<input type="submit" value="Submit">
The action used here will take you to the process.php page after clicking the submit button.
In short the action= is used to go to the specified page(mentioned in the action=) after filling the form and submitting.
When we don't know the url to go by submit the form we can specify
like this, It will reload the same page by appending question mark(?)
to url.
I.e, Form is submitted for same page itself. It identifies
form is reloaded.
Note: We can leave action property blank, even though it will work!
action is an attribute used in forms to specify the URL of the file that will process the input control when form is submitted

Paste html form data into url

Assuming i have resource with 2 methods :show and :index. I need :index contain simple form with text field and submit button, when user insert data into text field, this data must be inserted into url as :id of resource for :show method.
for example page url looks like /s and when user type 123 into field in the form and press submit he must be redirected to /s/123. Can it be done with rails or html forms ?
Do you mid having s?id=123 I can't comment that is why I am posting if so then use this code
<form method="get">
<input type="text" name="id">
<input type="submit">
</form>
Remember always the name of the textbox will appear in the textbox now it is id so it should be s?id=value and when the name is changed for example to usd then the url will be s?usd=value.
Remember to perform a function with these urls use the below code.
if($_GET['textbox_name'] == true){//things to do}