PrimitiveType

HTML Form

An HTML form on a web page usually comprises a set of input fields for the user to fill in and submit to the website. HTML defines a tag, <form>, which is used to place a form on a page. Within the form you can place <input>, <select> and other tags to obtain data from the user. There are several types of widgets that can be placed on a form to obtain user input, including text fields, radio buttons, check boxes and drop down boxes. A form is usually submitted by clicking on a submit button, but can often also be submitted by pressing enter when editing one of the fields.

The form tag has an attribute called "action" which is used to specify where the form will post the contents of its fields to. Another attribute of the form tag is "method", which can take the values "get" and "post". When using the "get" method, the values in the form fields are appended to the URL of the target script as such: scriptname.php?name=Bob&age=30. When using the "post" method, the values are passed in the header of the request to the server and will not be visible on the URL.

Forms are often used to collect personal data when registering for a service on a website, and usually these forms contain many input fields. However, forms can be very short too; for example, the form on most search engines' home pages, which have a keywords input field and a submit button only.

Although most form elements are visible and intended to be filled in by users, forms can also contain hidden inputs to pass information on to the script on the server that the user does not define themselves, or that was passed to the current page earlier.

Below is an example login form and the HTML markup used to create it (note that the form simply posts to a non-existent page on this site):

The form:


User type:

Name:

Password:




The source markup:

<form action="/not_found.php" method="post">
User type: <select name="user_type">
  <option value='1'>Admin</option>
  <option value='2'>Standard user</option>
</select><br />
Name: <input type="text" name="name" /><br />
Password: <input type="password" name="pwd" /><br />
<input type="submit" value="Login" />
</form>

See ALL glossary entries