CS6-Summer1-Formsx

cabbagewheatInternet and Web Development

Nov 13, 2013 (3 years and 11 months ago)

77 views


Lets visitors interact with your site


Changes the nature of your site from a
presentation or brochure oriented site to
an interactive site


Collect important information



Input


Text (small text fields and large
“comment” fields)


Radio Buttons / Check boxes


Pull
-
down lists


Action (usually taken by server)


Pass the data entered to another
“action” (e.g., save to a database,
send via email to someone, another
form that accepts additional data etc.)



<form> and </form> surround the form
elements


Form elements (which we’ll learn about
soon) can only be used inside a form


Most other XHTML elements can also be
used. Examples:


Tables


Paragraphs


action


identifies a server (URL) and the
program to be run on it. Can also be
mailto:address


method


describes how form’s data is
sent to server (see next slide)


enctype



describes how the form input is
encoded before being sent

Post

Get

Form data are encoded into a
message sent to the server.

Form data is encoded by the
browser into a URL. Example:
URL?name=value&name=value

Better functionality: Can retrieve,
store, and update data, modify
databases, etc.

Best used for retrieving data.

No restriction on amount or type of
data sent

URL max length of 100 and ASCII
characters only

More secure

Less secure

<form method="post"

action
="
mailto:gshankar@babson.edu
"


enctype
="text/plain">

Your Name: <input type=“text” name=“Name” size=“20” />

Your Phone:(xxx)xxx
-
xxxx

<input type=“text” name=“Phone” size=“13” />

<input type=“submit” name=“
sb
” value=“Send” />

<input type=“reset” name=“
rb
” value=“Clear” />

</form>


Text line: <input type="text" />


Password: <input type="password" />


Radio buttons: <input type="radio" />


Check boxes: <input type="checkbox" />


Files: <input type="file" />


Hidden info: <input type="hidden" />


type



the type of input


name



names the input tag. Names
and the user
-
entered data are passed
as pairs to the server


id



identifies the tag uniquely


very
useful when writing JavaScript functions


and for formatting with CSS

<p>
Last Name

<input
type= "text" name="
lastname
"
maxlength
=
"
100
"

size=
"
20
"
/>
</p>

Password

type works the same way, except that
value appears asterisked out as it is entered

<p>Gender:

Male <input type="radio" name="gender"
value="male" />

Female <input type="radio" name="gender"
value="female" checked="checked" /></p>


Note: Same name implies that

only one of these radio buttons

can be true at a time.

Note: optional checked

attribute indicates if one

of the buttons should be

checked initially

<p>Which products do you own (Select all that apply)<
br

/>


<input type="checkbox" name="Q1" value="PDA" />
PDA<
br

/>


<input type="checkbox" name="Q1" value="
DeskC
" />
Desktop computer<
br

/>


<input type="checkbox" name="Q1" value="
LapC
" />
Laptop computer</p>

Optional attribute: checked="checked"


<select>


Allows users to select from a
menu


<textarea>


Lets user enter multi
-
line text
with optional wrapping


<button>


Lets users select an action

<p>In which state do you live?

<select name="D1">


<option value="MA">MA</option>


<option value="ME">ME</option>

</select></p>

Optional attribute for select: multiple="multiple"

Optional attribute for select: size="#" sets number of choices visible

Optional attribute for option: selected="selected"


<
textarea

name="comments" rows="5"
cols="29">

Any further
comments?</
textarea
>

<input type="submit" value="Submit"
name="Submit" />


<input type="reset" value="Reset" name="Reset" />


Pre
-
defined

Values for
specific actions

<button type="submit" name="submit"
value="submit">


SUBMIT <
img

src
="mailbox.gif" height="40"
width="30" alt="
submit_button
" />

</button>


Input tags must be placed inside the same
types of tags that text is placed:


<p>


<h#> (# can be 1 through 6)


<table>


Placing a form in a table makes the
form look better organized & aligned
.


Allows user to move through the form in
an order that makes sense by tabbing
after each entry


Use
tabindex
="#" as attribute of tag


Example:


<input type="text" name="age"
tabindex
="3" />


Allow user to move to a particular element
with an ALT
-
letter combo


Use
accesskey
="letter" as attribute of tag


Example:


<input type="text" name="age"
accesskey
="a" />


Defined by “action” attribute of the form tag


May be


mailto:address


Name of program file on server


Program processes the data submitted by
form


Programs are written typically written
using PHP, ASP.NET, ColdFusion, or Java


Tells browser how to format data when
method is
post


Attribute is
enctype
=
"
value
"


Use for value:


text/plain

for mailto


multipart/form
-
data

if form uploads files


application/x
-
www
-
form
-
urlencoded

for
most other form applications



When you submit, a server
-
side program takes
over.


Perl or CGI Scripts


ASP or dot
-
NET Scripts


Cold
-
Fusion Scripts


Java
Servlets


Server
-
side JavaScript

Web Server
Script
Database or Mail Server
Web Page
SUBMIT
POST

Can use the mailto as the form action


<form method="post"


action="mailto:gshankar@babson.edu"


enctype
="text/plain">


Sends the content of the form fields to
an
eMail

address


Remember: it is NOT what your laptop (the client)
can do, it is what the Server (e.g., our Web server)
can do



Create this form,
which mails the data
to you when Submit
is clicked


Save it as CS6
-
TryThis1.htm

<form action="" method="post">


<h1>MIS 3690 Survey Form
-

CS 6


Summer 2010</h1>


<p>


Last Name: <input type="text" name="
lname
"
maxlength
="20"/>


&
nbsp
; &
nbsp
; &
nbsp
;


First Name: <input type="text" name="
fname
"
maxlength
="20"/>


</p>


<p>


Gender: <input type="radio" name="gender" value="male"/> Male


&
nbsp
; &
nbsp
;


<input type="radio" name="gender" value="female"/>

Female


</p>

<p>


What grade do you expect in MIS3690 &
nbsp
;



<select name="grade">




<option>Select One </option>




<option value="A">A</option>




<option value="A
-
">A
-
</option>




<option value="B+">B+</option>




<option value="B">B</option>




<option value="B
-
">B
-
</option>



</select>

</p>

<p>


What Topics Do Like (select all that apply) &
nbsp
;


<input type="checkbox" name="topic" value="
xhtml
">XHTML</input>


<input type="checkbox" name="topic" value="images">Images</input>


<input type="checkbox" name="topic" value="tables">Tables</input>


<input type="checkbox" name="topic" value="forms">Forms</input>

</p>

<p>


Additional Comments: <
br
/>


<
textarea

name="comments" rows="4" cols="30"></
textarea
>

</p>

<p>


<input type="submit" name="go" value=“Send" />


&
nbsp
;&
nbsp
;&
nbsp
;


<input type="reset" name="clear" value="Clear">

</p>




<p>&
nbsp
;</p>


</form>


Save as CS6
-
TryThis2.htm as
ForminTable.htm


Use a table to modify
the layout of
niceform.htm to look
like the screen on the
right

`
This is NOT an in
-
class
exercise. Submission is
optional.


4 questions


total
out of 100 points.


Questions will not be
equally weighted.


Questions will be 2
or three parts to
each.


Form


not included


You will need to link
Q1
-
Q2, Q2
-
Q3, and
Q3
-
Q4.


Practice questions are
very indicative of what
you will see on the
exam.


Use these as exercises
to practice for the
exam.


Open computer, open
notes, open web


individual effort only


no collaboration
permitted.


Coverage: XHTML (tags), Images, Lists,
Tables, and CSS (formatting, positioning,
background images)


Start time is 6:15 pm on Tuesday 8/Jun/2010


End time is 7:45 pm on Tuesday 8/Jun/2010


Exam will be about 75 minutes long. Extra
time is to upload the materials to the server
and test each.


After exam, starting 8:00 pm until 8:40 pm


Internet (video), Web 2.0 (videos), and
discussion on how businesses use Web 2.0.


Upload CS6
-
TryThis2.htm to server and
test it.


Good luck


If you have questions between now and Tuesday:


Email


gshankar@babson.edu


Phone


781 239 4470 (Monday)


Will be in office between 10 am and 2 pm on Monday.