This page explains the basics of creating HTML forms.
HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.
An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options.
In HTML, a form is defined using the
<form></form> tags. The actual form elements are defined between these two tags.
<form> ... (form elements go here) ... </form>
This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.
Text fields are used for when you want the user to type short amounts of text into the form.
<form> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form>
Radio buttons are used for when you want the user to select only one option from a pre-determined set of options.
Note that the user can select one option only. If they click another option, the new option will be selected and the first option will be deselected.
To enable the user to make multiple selections, use checkboxes (below).
<form> <input type="radio" name="lunch" value="pasta"> Pasta <input type="radio" name="lunch" value="risotto"> Risotto </form>
Checkboxes are similar to radio buttons, but they enable the user to make multiple selections.
Checkboxes should be used when you want to allow the users to make more than one selection.
<form> <input type="checkbox" name="technology" value="HTML"> I know HTML <input type="checkbox" name="technology" value="CSS"> I know CSS </form>
The submit button allows the user to actually submit the form.
<form action="/html/tags/html_form_tag_action.cfm"> <input type="checkbox" name="technology" value="HTML"> I know HTML <input type="checkbox" name="technology" value="CSS"> I know CSS <input type="submit"> </form>
A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.
<form> <select> <option value="sydney">Sydney</option> <option value="melbourne">Melbourne</option> <option value="cromwell">Cromwell</option> <option value="queenstown">Queenstown</option> </select> </form>
It's often a good idea to use the
maxlength attribute to restrict the user's input to a certain number of characters. You can also use the
rows attributes to adjust the width and height.
<form> <textarea maxlength="100" rows="5" cols="30">Enter comments here.</textarea> </form>
Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.
Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.
You nominate an action page with the
<form action="/html/tags/html_form_tag_action.cfm" method="get"> First name: <input type="text" name="first_name" value="" maxlength="100"> Last name: <input type="text" name="last_name" value="" maxlength="100"> <input type="submit" value="Submit"> </form>
You may have noticed the above example uses a
method attribute. This attribute specifies the HTTP method to use when the form is submitted.
Possible values are:
- The form data is appended to the URL when submitted. This means you can actually see the form variables in your browser's address bar when the form is submitted. This can be handy for non-sensitive data such as a search engine's results page. It also allows you to bookmark the page and even link to it from another web page.
- The form data is not appended to the URL.
Providing this attribute is optional. If you don't provide it, the method will be post.