HTML FORMS GETPOST METHODS HTML FORMS HTML Forms

  • Slides: 18
Download presentation
HTML FORMS GET/POST METHODS

HTML FORMS GET/POST METHODS

HTML FORMS • HTML Forms • HTML forms are used to pass data to

HTML FORMS • HTML Forms • HTML forms are used to pass data to a server. • A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.

HTML FORMS • The <form> tag is used to create an HTML form: •

HTML FORMS • The <form> tag is used to create an HTML form: • <form>. input elements. </form>

The Input Element • • HTML Forms - The Input Element The most important

The Input Element • • HTML Forms - The Input Element The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. • The most used input types are described below.

Textfields • Text Fields • <input type="text" /> defines a one-line input field that

Textfields • Text Fields • <input type="text" /> defines a one-line input field that a user can enter text into: • <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> </form>

Password • Password Field • <input type="password" /> defines a password field: <form> Password:

Password • Password Field • <input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form>

Radio Buttons • <input type="radio" /> defines a radio button. Radio buttons let a

Radio Buttons • <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: • <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form>

Checkboxes • <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE

Checkboxes • <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. • <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

Submit Button • <input type="submit" /> defines a submit button. • A submit button

Submit Button • <input type="submit" /> defines a submit button. • A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

Submit Button • <form name="input" action="html_form_action. asp" method="get"> Username: <input type="text" name="user" /> <input

Submit Button • <form name="input" action="html_form_action. asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>

GET AND POST METHODS • We can send data to the data processing page

GET AND POST METHODS • We can send data to the data processing page by both the GET and POST methods of a form. Both methods are used in form data handling where each one has some difference on the way they work.

GET • In GET method data gets transferred to the processing page in name

GET • In GET method data gets transferred to the processing page in name value pairs through URL, so it is exposed and can be easily traced by visiting history pages of the browser. So any login details with password should never be posted by using GET method.

GET <form name="input" action="object. html" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit"

GET <form name="input" action="object. html" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> Data is send thru the URL http: //127. 0. 0. 1/cms/misc/object. html? user=thismyuser name

Difference of GET and POST • As you have seen there is a character

Difference of GET and POST • As you have seen there is a character restriction of 255 in the URL. This is mostly the old browsers restriction and new ones can handle more than that. But we can't be sure that all our visitors are using new browsers. So when we show a text area or a text box asking users to enter some data, then there will be a problem if more data is entered. This restriction is not there in POST method.

POST • The Post method is more powerful request. By using Post we can

POST • The Post method is more powerful request. By using Post we can request as well as send some data to the server. We use post method when we have to send a big chunk of data to the server, like when we have to send a long enquiry form then we can send it by using the post method.

PHP POST and GET POST <form action=“article. php" method=“POST"> <input name=“content" type="text" /> </form>

PHP POST and GET POST <form action=“article. php" method=“POST"> <input name=“content" type="text" /> </form> GET <form action=“article. php" method=“GET"> <input name=“content" type="text" /> </form>

PHP POST • This HTML code specifies that the form data will be submitted

PHP POST • This HTML code specifies that the form data will be submitted to the "form. php" web page using the POST method. The way that PHP does this is to store all the "posted" values into an associative array called "$_POST". Be sure to take notice the names of the form data names, as they represent the keys in the "$_POST" associative array. • $ content = $_POST[‘content '];

 • The get method is different in that it passes the variables along

• The get method is different in that it passes the variables along to the “article. php" web page by appending them onto the end of the URL. The URL, after clicking submit, would have this added on to the end of it: • “article. php"? %93 content%22=foofoofoo • The question mark "? " tells the browser that the following items are variables. Now that we changed the method of sending information on "order. html", we must change the “article. php" code to use the "$_GET" associative array.