HTML Post #6: Forms

An HTML form is pretty much anything that requests the user for information. They can be used for just about anything from leaving a comment on a blog to uploading a picture to facebook. Even logins are very simple HTML forms.

Here’s an example login, in html:

<p>Please log in.</p>
<form action="" method="post">
Username: <input name="username" /><br />
Password: <input name="password" type="password" /><br />
<input type="submit" value="Log In" />

The form tag is where the magic happens. It has an action attribute which is where the form sends the information. The form can use one of two methods to send the information: post or get. Post is more secure, and prefered when doing logins.

There are three inputs. The name attribute of the input is sent back to the web server as the name of the data. The type is the type of input, text being the default. You can also use “password”, “submit”, “file”, “checkbox”, “hidden”, or “radio”.

Also, note that all inputs for the form are contained in the form element.

The previous code makes this form:

Please log in.



Get Vs. Post

The main difference between Get and Post is how the data is sent. Get data is encoded into the URL. For example, is the URL when searching for “compguyaug” on google. This makes get form results bookmarkable, in most cases. Therefore, get works great for searches and data lookups.

Post sends the data separate from the URL. This makes it more secure and should be used for logins and adding/editing/updating any data. That way, the end user can’t bookmark adding a certain customer and keep opening that bookmark and unintentionally adding that customer.

Note on Files

When creating a form for file uploads, make sure you use post. Also, a special encoding type must be specified:

<form enctype="multipart/form-data" method="post"

Also, some servers have a limit as to how large of a file can be uploaded.