Interactive Forms in Web Development: An Introduction to JavaScript, Slides of Introduction to Computing

Download Interactive Forms in Web Development: An Introduction to JavaScript and more Slides Introduction to Computing in PDF only on Docsity!

CS101 Introduction to Computing

Lecture 15

More on Interactive Forms

(Web Development Lecture 5)

Focus of the last lecture was on Interactive Forms

• We looked at the utility of forms on Web pages
• We found out about the various components that are used in a form
• We became able to build a simple, interactive form

But first lets review the tags that are

used in forms

<FORM

name=“name” method=“get” or “post” action=“URL”

Elements of the form

Password Input Field

<INPUT

type=“password” name=“name” size=“widthInCharacters” maxlength=“limitInCharacters” value=“initialDefaultValue”

Hidden Input

<INPUT

type=“hidden” name=“name” value=“value”

Radio Button Input Element

<INPUT

type=“radio” name=“name” checked value=“selectedValue”

File Upload Input Element

<INPUT

type=“file” name=“name” value=“nameOfSelectedFile” enctype=“fileEncodingType”

Submit Button Input

<INPUT

type=“submit” name=“name” value=“buttonLabel”

8 Possible Values for the “type” Attribute

of tag

1. text
2. password
3. hidden
4. checkbox
5. radio
6. file
7. reset
8. submit

Select from a (Drop Down) List

<SELECT name=“name” size=“numberOfDisplayedChoices” multiple

text text text … … (^) Docsity.com 16

End of the Review of Tags Used in Forms

Now let’s take a look at a form that we constructed last time, and see how we can make it better