1. 1 Chapter 05: Creating Your Form

2. What is a Form? When you visit some websites you see a form. With this form, you are asked to complete, for example, your personal information, your credit card number, your interest, etc. Try to sign up for an email account, you will see the form. How do they create such a form?

3. How to Create a Form? The form tag goes in pair: … Sample:

4. How to Create a Form?  Sets up a container for a form tag. Within the tags, you can place form input tags such as,, and.  Sample:

5. How to Create a Form? METHOD={POST,GET}  Changes how form data is transmitted to the form processor.  When you use METHOD=GET, the form data is given to the form processor in the form of an environment variable (QUERY_STRING).  When you use METHOD=POST, the form data is given to the form processor as the standard input to the program.

6. How to Create a Form?

7. NAME: Assigns the form a name accessible by bookmark, script, and applet resources.

8. How to Create a Form? STYLE: Specifies Style Sheet commands that apply to the contents within the tags.

9. How to Create a Form? OTHER ATTRIBUTES: Many other attributes are available. Those include: Onsubmit, onreset, onClick, onDblClick, onMouseDown, onMouseUp, nMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes.

10. FORM: Identifies several input methods for form. This tag must appear between the opening and closing tags. Sample:

11. FORM: With the code in previous slide, Firefox displays:

12. FORM: The type of can be:  Type = {image, submit, button, text, checkbox, file, password, radio, reset, hidden}  See the following slides.

13. FORM: 13

14. FORM: With the codes in previous slide, the browser Firefox displays:

15. FORM: Defines a multiple-line text input field within a form. Place the tags inside the tags. To specify a default value in a field, place the text between the tags.

16. FORM: The has many attributes, for example, ID, style, name, etc. See the example on how to use these attributes next slide.

17. FORM:

18. Specifies a selection list within a form. Use the tags to specify items in the selection list.

19. HOMEWORK Go to Gmail account sign-up page. Design the same webpage using your own techniques. Try again with Yahoo sign-up form.