1 chapter 05: creating your form. what is a form? when you visit some websites you see a form. with...

1

Chapter 05: Creating Your Form

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?

How to Create a Form?

The form tag goes in pair:<FORM> …</FORM>Sample:<FORM>

<INPUT TYPE=BUTTON VALUE=“Search”>

</FORM>


Sets up a container for a form tag. Within the <FORM> tags, you can place form input tags such as <INPUT>, <SELECT>, and <TEXTAREA>.

Sample:

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.


NAME:

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


STYLE:

Specifies Style Sheet commands that apply to the contents within the <FORM> tags.


OTHER ATTRIBUTES:

Many other attributes are available. Those include: Onsubmit, onreset, onClick, onDblClick, onMouseDown, onMouseUp, nMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes.

FORM: <Input>

Identifies several input methods for form.

This tag must appear between the opening and closing <FORM> tags.

Sample:<FORM METHOD=POST>

<INPUT TYPE=“TEXT” NAME=“qty” SIZE=5>

<INPUT TYPE=“submit” VALUE=“Order”>

</FORM>

FORM: <Input>

With the code in previous slide, Firefox displays:

FORM: <Input>

The type of <input> can be: Type = {image, submit, button,

text, checkbox, file, password, radio, reset, hidden}

See the following slides.

FORM: <Input>

13

FORM: <Input>

With the codes in previous slide, the browser Firefox displays:

FORM: <TEXTAREA>

Defines a multiple-line text input field within a form.

Place the <TEXTAREA> tags inside the <FORM> tags.

To specify a default value in a <TEXTAREA> field, place the text between the <TEXTAREA> tags.

FORM: <TEXTAREA>

The <textarea> has many attributes, for example, ID, style, name, etc. See the example on how to use these attributes next slide.

FORM: <TEXTAREA>

FORM: <SELECT>

<SELECT>Specifies a selection list within a

form. Use the <OPTION> tags to

specify items in the selection list.

HOMEWORK

Go to Gmail account sign-up page. Design the same webpage using your own techniques.

Try again with Yahoo sign-up form.

1 chapter 05: creating your form. what is a form? when you visit some websites you see a form. with...

Documents