0

I am new to forms and copy and pasted this sample code for a login snippet:

              <div class="login-form-1">
                <form id="login-form" class="text-left">
                    <div class="main-login-form">
                        <div class="login-group">
                            <div class="form-group">
                                <label for="lg_username" class="sr-only">Username</label>
                                <input type="text" class="form-control" id="lg_username" name="lg_username" placeholder="username">
                            </div>
                            <div class="form-group">
                                <label for="lg_password" class="sr-only">Password</label>
                                <input type="password" class="form-control" id="lg_password" name="lg_password" placeholder="password">
                            </div>
                            <div class="form-group login-group-checkbox">
                                <input type="checkbox" id="lg_remember" name="lg_remember">
                                <label for="lg_remember">Stay logged in?</label>
                            </div>
                        </div>

                        <button type="submit" class="login-button"><i class="fa fa-sign-in fa-2x"></i></button>
                    </div>
                </form>
            </div>

When the user hits submit on the button the URL of the webpage changes from:

http://localhost:52303/Src/Main/index.html

to

http://localhost:52303/Src/Main/index.html?username=whatever&password=whatever

What causes this and how can I prevent this behavior?

Pipeline
  • 1,029
  • 1
  • 17
  • 45
  • GET is the default form `method`, so it makes a get request with the given form fields as params. – Hunan Rostomyan Dec 12 '15 at 04:49
  • @Pipeline, learn about GET and POST parameters. But copying code snippets without understanding and handling log-in data is a recipe for disaster. – benjamin Dec 12 '15 at 06:21

2 Answers2

2

Use POST method for the form submission.

<form id="login-form" method="post" class="text-left">

By default, it uses GET method,which will send the form data via query string values. In your example, username and password are two form fields( the name values of the form fields) and they are being send when you submit the form.

From MDN,documentation about the method property of form,

The HTTP method that the browser uses to submit the form. Possible values are:

post: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server.

get: Corresponds to the HTTP GET method; form data are appended to the action attribute URI with a '?' as separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

Submitting form data via GET method is not ideal as number of characters in query strings has a limit.

Shyju
  • 214,206
  • 104
  • 411
  • 497
0

Thats what happens when you submit the form, the form details i.e the textbox or any other controls are posted

Check this link for more answers

How to prevent buttons from submitting forms

Community
  • 1
  • 1
MaxPayne999
  • 184
  • 1
  • 2
  • 10