HTML Forms - Revision history

Zach: /* HTTP Headers */

2023-08-28T17:15:14Z

HTTP Headers

2017-02-11T15:55:51Z

Added HTTPS to links where appropriate.

2014-09-02T02:22:24Z

Code Example

2013-08-29T05:51:51Z

HTTP Request Methods: Adding notes about POST variable transmission and CRUD

2013-08-27T05:30:13Z

Code Example

2013-04-15T06:05:41Z

Input Types

2013-03-19T09:10:45Z

HTTP Headers

2013-03-17T07:43:04Z

2013-03-17T06:37:47Z

2013-03-16T19:57:52Z

@@ Line 37: / Line 37: @@
 === HTTP Headers ===
-Whenever you request a page on the http:// protocol, your browser sends a ''request header''.  Your browser responds with a ''response header'' followed by the content of your page.  You never see the request or response headers unless you have tools that let you see them.
+Whenever you request a page on the http:// protocol, your browser sends a ''request header''.  Your server responds with a ''response header'' followed by the content of your page.  You never see the request or response headers unless you have tools that let you see them.
 To let you have an idea, here are the request and response headers when I visit http://www.w3.org/ in Firefox:

@@ Line 1: / Line 1: @@
-The contents of a web page often changes depending on how you requested that page.  For example, when you perform a web search, the contents of the search list changes depending on your query.  This is done by way of HTTP request variables (aout which you will learn more in Module 2).
+The contents of a web page often changes depending on how you requested that page.  For example, when you perform a web search, the contents of the search list changes depending on your query.  This is done by way of HTTP request variables (about which you will learn more in Module 2).
 The most fundamental way to make a web page sent HTTP request variables to another page is by using HTML Forms.  This article describes this process and how to implement it in your code.
@@ Line 104: / Line 104: @@
 * '''file:''' allows for file uploads.  (We will deal with this more in module 2.)
-For a complete list, see [http://www.w3.org/TR/html5/forms.html#the-input-element section 4.10.7 of the HTML5 spec].
+For a complete list, see [https://www.w3.org/TR/html5/forms.html#the-input-element section 4.10.7 of the HTML5 spec].
 [[Category:Module 1]]

@@ Line 19: / Line 19: @@
 <source lang="html4strict">
 <form action="http://example.com/search" method="GET">
-	<label>Search Query: <input type="text" name="searchText" /></label>
+	<label>Search Query: <input type="text" name="q" /></label>
 	<input type="submit" value="Search" />
 </form>

@@ Line 84: / Line 84: @@
 * If the data you are transmitting is large (over about 200 bytes), you need to use '''POST''', since some browsers will truncate the URL string after 256 characters.
 * If the destination page takes the information from the form and modifies something in a database, it is best practice to use '''POST'''.
 == Input Types ==

@@ Line 19: / Line 19: @@
 <source lang="html4strict">
 <form action="http://example.com/search" method="GET">
-	<label>Search Query: <input type="text" name="q" /></label>
+	<label>Search Query: <input type="text" name="searchText" /></label>
 	<input type="submit" value="Search" />
 </form>

@@ Line 92: / Line 92: @@
 * '''password:''' allows for text to be hidden while typed.
 * '''number:''' like a text box, but forces the content to be numerical.
 * '''checkbox:''' a yes-or-no checkbox.
 * '''radio:''' a multiple-choice question.  Use multiple input fields, all with the same ''name'' but different ''value''.

@@ Line 74: / Line 74: @@
 </source>
-You can see that in the request header, information is sent about what browser I'm using (my ''user agent''), what language I prefer (in my case, ''en-US''), and the like.  If you have cookies for a site, they get transfered via a request header.  In the response header, we can see that the request was successful (HTTP code 200), that I am receiving an HTML document with the UTF-8 charset (in ''Content-Type''), and other various information.
+You can see that in the request header, information is sent about what browser and operating system I'm using (my ''user agent''), what language I prefer (in my case, ''en-US''), and the like.  If you have cookies for a site, they get transfered via a request header.  In the response header, we can see that the request was successful (HTTP code 200), that I am receiving an HTML document with the UTF-8 charset (in ''Content-Type''), and other various information.  All of these headers are standard; you can implement less-common headers as well.
 === When to use GET vs. POST ===

← Older revision		Revision as of 07:43, 17 March 2013
Line 97:		Line 97:

	For a complete list, see [http://www.w3.org/TR/html5/forms.html#the-input-element section 4.10.7 of the HTML5 spec].		For a complete list, see [http://www.w3.org/TR/html5/forms.html#the-input-element section 4.10.7 of the HTML5 spec].
		+
		+	[[Category:Module 1]]

@@ Line 5: / Line 5: @@
 == HTTP Request Variables ==
-Visit your favorite search engine, and search for "QUERY".  Now, look at your address bar.  Can you find your query "QUERY" somewhere up there?
+Visit your favorite search engine, and search for "QUERY".  Now, look at your address bar.  Can you find your query "QUERY" somewhere in the URL?
 Your search engine probably used an HTTP Request Variable to send your desired query to the search page.  Here is how it might have worked:
@@ Line 15: / Line 15: @@
 === Code Example ===
-The syntax for making a form in HTML is relatively straightforward:
+The syntax for making a form in HTML is relatively straightforward.  The HTML for the above example could be:
 <source lang="html4strict">
-<form action="ACTION" method="GET">
+<form action="http://example.com/search" method="GET">
 	<input type="text" name="q" />
 	<input type="submit" value="Search" />
@@ Line 24: / Line 24: @@
 </source>
-where '''ACTION''' is the URL of your destination page, with no query strings.  (
+== HTTP Request Methods ==