The <form> element is a container for controls. It is used to create web forms such as Contact Forms, Registration, Login, etc. The form element has two main attributes:
You can also use the global attributes. The form element can contain text, and form controls will be explained in later tutorials. The <form> element only provides a GUI (Graphical User Interface) so users can enter data; it will not handle and validate the submitted data.
The method attribute takes either of the following values:
Get: This will show the form data in the URL; the requested document and data are separated by ? and then for any additional values the ampersand symbol [ & ] is used.
Post: The data is passed in the body of the form, and it is not visible to the user. Post is ideal for large amounts of data as there is no limitation.
The get method is commonly used in database searches, while the post method is used when adding data to a database.
For example, this is a simple job search using indeed.co.uk (the method is get):
http://www.indeed.co.uk – This is your protocol (HTTP) and domain name.
jobs – This is the page you requested
? – This separates the requested info and the data you submitted.
q=web+developer&l=London – These are the values you entered, where q likely means query and l is the location. As you can see, they come in pairs with the name and value. You can see how the ampersand separates the data.
This is generally referred to as query string, and the q and l are parameters. The script at the other end looks for the parameter q and l and reads their value. If you view the source of the search page on indeed.co.uk you will see that the two text fields have a name attribute with the value q and l. If you changed it, the script would not run as the parameters are incorrect.
The action attribute is used to specify a value for an eternal script which will handle the data.
How forms work
- You request the document and the server responds and sends it to you (for example, this page).
- You enter the data and submit the form.
- The server passes the data to the correct form handler (the script which will process this information).
- The script performs its part, usually validation and so on.
<form action="/content/html/html_forms.cshtml" method=”get” target="_blank"> Enter your name:<input maxlength="20" name="FullName" placeholder="Enter Your Name" type="text" /> Select your age: <select name="age"> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19+</option> </select> <input class="tryit" type="submit" value="Submit Form" /> </form>
Later tutorials will address the <input> and <select> elements.