(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{590:function(t,a,s){"use strict";s.r(a);var e=s(56),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"html-forms-sending-form-data"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#html-forms-sending-form-data"}},[t._v("#")]),t._v(" HTML forms: sending form data")]),t._v(" "),s("p",[t._v("Let's continue the Microblog project by working on the form users will submit to create new entries.")]),t._v(" "),s("p",[t._v("HTML forms have 3 main parts to them:")]),t._v(" "),s("ul",[s("li",[t._v("The "),s("code",[t._v("<form>")]),t._v(" element itself, which describes how the form behaves in terms of sending data.")]),t._v(" "),s("li",[t._v("A button used to submit the form, and send data as described in the "),s("code",[t._v("<form>")]),t._v(" element.")]),t._v(" "),s("li",[t._v("Form inputs, each of which is comprised of a label and a field.")])]),t._v(" "),s("p",[t._v("Let's begin by talking about the "),s("code",[t._v("<form>")]),t._v(" element itself.")]),t._v(" "),s("h2",{attrs:{id:"the-form-element"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-form-element"}},[t._v("#")]),t._v(" The form element")]),t._v(" "),s("p",[t._v("There are two ways of submitting data in forms: using a "),s("code",[t._v("GET")]),t._v(" request (the default), or using a "),s("code",[t._v("POST")]),t._v(" request. This is called the "),s("strong",[t._v("method")]),t._v(".")]),t._v(" "),s("p",[t._v("In addition to the method, we can specify an "),s("strong",[t._v("action")]),t._v(", which is the URL that will receive the form data.")]),t._v(" "),s("p",[t._v("This form uses "),s("code",[t._v("GET")]),t._v(", and the form data is sent to "),s("code",[t._v("/entry")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/entry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("If we don't specify an "),s("code",[t._v("action")]),t._v(" attribute, then data is sent to the "),s("em",[t._v("current URL")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("We can manually specify the method (with or without an action):")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("GET"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/entry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("And we can use "),s("code",[t._v("POST")]),t._v(" instead of "),s("code",[t._v("GET")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("POST"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/entry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"sending-data-with-a-form"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sending-data-with-a-form"}},[t._v("#")]),t._v(" Sending data with a form")]),t._v(" "),s("p",[t._v("But what are the differences between "),s("code",[t._v("GET")]),t._v(" and "),s("code",[t._v("POST")]),t._v("? To understand this, let's add a text field and a submit button to our form:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sample-field"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Sample:"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sample-field"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("submit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Submit"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("If we open an HTML file containing this with our browser, we'll see something like this:")]),t._v(" "),s("p",[t._v("IMAGE")]),t._v(" "),s("p",[t._v("Let's type something in our field, and press Submit:")]),t._v(" "),s("p",[t._v("IMAGE")]),t._v(" "),s("p",[t._v("Now notice that the page seemingly refreshes. The form is emptied. That's because the form sent the data to the URL defined in the "),s("code",[t._v("action")]),t._v(" attribute. But since we didn't add an "),s("code",[t._v("action")]),t._v(" attribute, the default is the "),s("em",[t._v("current URL")]),t._v(".")]),t._v(" "),s("p",[t._v("However, notice that the URL changed slightly. We ended up with "),s("code",[t._v("?sample=Bob")]),t._v(' at the end (if you typed "Bob" in the field).')]),t._v(" "),s("p",[t._v("That is the form data that the form sent to the current URL.")]),t._v(" "),s("p",[t._v("So the form sent the data to the current URL, which means that it made another request to our HTML file. Our HTML file doesn't "),s("em",[t._v("use")]),t._v(" the form data for anything (we'll learn how to do that later), so all that happened is the browser loaded the HTML contents and painted them again.")]),t._v(" "),s("h3",{attrs:{id:"get-requests-and-query-string-parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get-requests-and-query-string-parameters"}},[t._v("#")]),t._v(" GET requests and query string parameters")]),t._v(" "),s("p",[t._v("Whenever we send form data using "),s("code",[t._v("GET")]),t._v(", the data will be appended to the URL as query string parameters.")]),t._v(" "),s("p",[t._v("Query string parameters are key-value pairs appended at the end of a URL. They are a standard way of sending non-sensitive data in web requests.")]),t._v(" "),s("p",[t._v("If you have more than one, they'll be separated by ampersands:")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("?sample=Bob&last_name=Smith\n")])])]),s("h3",{attrs:{id:"post-requests"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#post-requests"}},[t._v("#")]),t._v(" POST requests")]),t._v(" "),s("p",[t._v("If we change the form's "),s("code",[t._v("method")]),t._v(" to "),s("code",[t._v('"POST"')]),t._v(", reload the page, and submit again, you'll see no query string parameters.")]),t._v(" "),s("p",[t._v("When we send data with "),s("code",[t._v("POST")]),t._v(", data is included in the "),s("strong",[t._v("body")]),t._v(", a different part of the request, instead of being part of the URL.")]),t._v(" "),s("p",[t._v("Data in the body is a bit more secure because it's not visible in the URL. For sensitive information, we should use "),s("code",[t._v("POST")]),t._v(".")]),t._v(" "),s("p",[t._v("Also, there are limits to the size of URLs which means that for very long forms, "),s("code",[t._v("GET")]),t._v(" might not be viable.")]),t._v(" "),s("h2",{attrs:{id:"conclusion"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#conclusion"}},[t._v("#")]),t._v(" Conclusion")]),t._v(" "),s("p",[t._v("We've learned how to send data using HTML forms. In a later section, after we learn about back-end development with Flask, we'll learn about how to receive and use form data!")])])}),[],!1,null,null,null);a.default=n.exports}}]);