• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Services
    • WordPress Websites
    • WordPress Maintenance Package
    • WordPress Security Package
    • WordPress Turbo Tune‑Up
    • For Designers & Agencies
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Forms / HTML Forms

HTML Forms

1 November 2001 / Leave a Comment

This series of tutorials shows how to create HTML forms in your Web pages. Forms allow you to make your site interactive — your visitors can use the forms on your site for giving you feedback via email, navigating your site, posting messages and other content to your site, voting and polling, and almost anything else you can dream of!

In this tutorial, you start by looking at the HTML form element, the basic building block of Web forms. You then learn how to use disabled and read-only controls to enhance your forms. Finally, you’ll look briefly at ways to process the results of your forms after they’ve been submitted.

The remaining tutorials in the series look at 8 different types of form fields that you can place in an HTML form, including text fields, checkboxes, radio buttons, menus, text areas, hidden fields, password fields and file upload fields. You’ll also learn how to create submit, image and reset buttons, and how to create generic form buttons. Buttons are needed to “activate” your Web form — for example, to enable the user to send the form after they’ve filled it in.

The HTML form element

HTML forms are created using the form element:


<form method="xxxx" action="xxxx">

(form fields in here)

</form>

The method attribute controls how the information that the user enters in the form is sent to the server. The two options are:

GET
Sends the form data as part of the URL (e.g. "script.pl?name=Joe& email=joe@joe.com"). This is the default option. It’s useful and efficient for small amounts of data (e.g. a search engine query) and it’s easy for the user to refresh the results of the form by just pressing the browser’s refresh button. However it cannot be used for large amounts of data (more than a few hundred bytes).
POST
Sends the form data encoded in the HTTP data stream. This is recommended for most types of forms (e.g. feedback forms and form mailers). The user will not see the form data in the URL. Large amounts of data can be sent this way. Unlike the GET method, the user cannot easily refresh the form results page — they usually see a dialog asking if they want to resend the form data — but this is often a good thing!

The action attribute specifies where the form data submitted by the user will be sent. Usually this is the URL of a script on the server — for example, http://www.yoursite.com/cgi-bin/feedback.cgi or http://www.yoursite.com/poll.asp.

Form fields and buttons

Now that you understand the basic form tag, it’s time to put some fields and buttons in your form!

Form fields include things like text boxes, checkboxes, radio buttons, and menus. Each form field has a name and a value. The name is used by the server-side script or other program to identify the field, and the value is the data that is entered by the user.

Form buttons are used to send the form to the server after it’s filled in, amongst other things.

The following tutorials look at each of the available HTML form field and button types in turn, and show examples in each case:

  • Text and textarea fields
  • Checkboxes, radio buttons and select fields
  • Hidden fields, password fields and file upload fields
  • Form buttons

Disabled and read-only controls

You can prevent user interaction with your form fields and buttons to various degrees with the disabled and readonly attributes — for example:


<select name="myfield" disabled="disabled" /> ... </select>
<input type="text" name="myfield" value="Hi there!" readonly="readonly" />

Here’s a summary of the differences between these two attributes:

disabled
This totally locks the control and prevents the user from interacting with it in any way. The control cannot receive focus. The value of the field is also not sent when the form is submitted. disabled can be used on button, input, optgroup, option, select and textarea controls.
readonly
Only the value of the field is locked, so the user can’t change it. The user can still interact with the control – for example, if it’s a checkbox the user can still check/uncheck it (which makes readonly a bit pointless for checkboxes and radio buttons!). The control can also receive focus, and the value of the field is sent when the form is submitted. readonly can only be used on input and textarea controls.

Examples

Try clicking on each of these fields to see what happens (if anything!):







Processing the form results

An HTML form on its own is pretty useless — it needs some code to process the form results!

Once your visitor fills in the form and clicks the form’s submit button, the form data is sent to the target specified in the action attribute of the form tag. Usually this will be a server-side script (for example, a form mailer), maybe a CGI script written in Perl, or a PHP or ASP page.

You can find links to some great free form processing CGI scripts over at the CGI Resource Index. These include form mailers (to send the form results to you via email), guestbooks and poll scripts. Usually they come with instructions and a sample HTML form to get you going.

You can also use JavaScript to process the form on the browser without it being sent to the server (or before it is sent). Commonly this is used to check that the user has filled in the form correctly. Here’s a tutorial that shows how to validate a form with JavaScript.

Accessible HTML forms

There are many things you can do to make your HTML forms more accessible. For example, you can use fieldsets, field labels and access keys to make forms easier to use. To find out more, read the Creating accessible forms tutorial.

Other useful info

For more detail on HTML forms and form elements you might like to refer to the W3C HTML 4.01 specification for HTML forms. Finally, if you’d like to make your forms look great, check out my Styling forms with CSS tutorial.

Filed Under: HTML Forms Tagged With: buttons, fields, form fields, form tag, get, html forms, post, processing, web form, web page

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2021 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits