How to Make HTML Forms

In HTML, a form is the part of a document that contains controls and their labels. An HTML control is an element that lets a user interact with the form. HTML defines several control types, including buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls and object controls. This tutorial covers the most common elements with limited use of their attributes.

Things You'll Need

• Text Editor, such as Notepad
• HTML book, such as "The HTML 4.0 Sourcebook" by Ian Graham

Instructions

1. Define the form using the "form" and "input" tags on the text editor of your choice. The "input" tag is the most frequently used tag inside forms. Its "type" attribute allows the specification of the type of control:

   < form > < input > < /input > < /form >

2. Create a text input, which allows users to type in letters and numbers. This example creates a username/password pair:

   < form > Username: < input type="text" name="username" > Password: < input type="text" name="password" > < /form >

3. Make radio buttons. Radio buttons are controls that let a user select one out of a few choices:

   < form > < input type="radio" name="status" value="single" > Single < br > < input type="radio" name="sex" value="married" > Married < /form >

4. Add some checkboxes. Unlike radio buttons, checkboxes allow more than one option out of a limited number of choices:

   < form > Red: < input type="checkbox" name="color" value="Red" /> < br /> Green: < input type="checkbox" name="color" value="Green" /> < br /> Blue: < input type="checkbox" name="color" value="Blue" /> < /form >

5. Use the form's "action" attribute and create a "Submit" button. Clicking a "Submit" button sends the data residing in the controls described in Steps 2 to 4 to a server that will process the form. The place where the data is sent to is specified in the "action" attribute:

   < form name="input" action="destination_file.asp" method="get" > Sender: < input type="text" name="user" > < input type="submit" value="Submit" > < /form >

Tips & Warnings

• HTML stands for HyperText Markup Language.

• In addition to HTML, Web design involves CSS, XHTML, HTTP, URLs, Internet Protocols and CGI, servlets.

• HTML is a fast-changing language. Many of the original tags are deprecated.

Resources

• Reference, tutorials and examples in HTML.
• Guide to Style sheets, forms, frames and JavaScript coding.