Creating Web Forms in HTML

mobdescriptiveΛογισμικό & κατασκευή λογ/κού

28 Οκτ 2013 (πριν από 3 χρόνια και 10 μήνες)

58 εμφανίσεις

1

Creating Web Forms in HTML


Web forms

collect information from customers


Web forms include different
control elements

including:


Input boxes


Selection lists


Drop
-
down lists boxes


Option buttons or radio buttons


Check boxes


Group boxes


Text areas


Form buttons

2

Forms Interact with Server
-
Based Programs


While HTML supports the creation of
forms, it does not include tools to
process the information


The information can be processed
through a program running on a Web
server


The earliest and most commonly used
are
Common Gateway Interface
(CGI) scripts

that are written in
perl


Other popular languages include:


Python


-

PHP


ASP


-

Java/ JSP


ColdFusion


-

the Unix shell


C/C++


-

Visual Basic


3

Creating the Form Element


Forms are created using the
form

element,
created as follows:





<form name=“name” id=“id”>





input

elements




</form>



-

elements

are elements places within the form.


-

name

is the name of the form and
id

is the id of




the form. They should have the same value.


4

Creating Input Elements Inside a Form


A list of input elements go inside the form tags.



The general syntax of input elements is as follows:


<input type=“
type
” name=“
name
” id=“
id
”/>



-

type

specifies the type of input field,


-

name

and
id

are the field’s name and id.


5

Input Types



6

Creating a Text Input Field


To create a text input field:


<input type=“text” name=“
name
” id=“
id




value=“
value
” size=“
value




maxlength
=“
value
’ />





name

and
id

identify the field,


value

assigns the field’s default value,


size

defines the width of the input box in characters,


maxlength

specifies the maximum number of



characters that a user can enter into the field.

7

Adding a Form Label


You can expressly link a label with an associated
input element for scripting purposes.



The syntax for creating a form label is as follows:

<label for=“
id
”>label
text
</label>


id

is the value of the id attribute for a field on the form

label text

is the text of the label

8

Creating a Password Field


A
password field

is an input box where characters
typed by the user are displayed as bullets or
asterisks to protect private or sensitive information on
a Web site


The syntax for creating a Password field is as follows:



<input type=“password” />

9

Creating Hidden Fields


Hidden fields

are added to a form, but not
displayed in the Web page. They are used to pass
information to the server script that the user need
not enter. The syntax is as follows:


<input type=“hidden” name=
“name”

id=
“id”


value=
“value”

/>


10

Creating Option Buttons


Option buttons
, or
radio buttons

allow users to make selections (only
one button is selected at a time).



To create a radio button, use:




<input type=“radio” name=
“name”

id=
“id”
value=
“value”

/>



name

and
id

attributes identify the field


value

is what’s sent to the server if the



radio button is selected



All option buttons belonging to the same
field share a common name

Labels are matched to the id values of the option buttons

11

Creating Check Boxes


To create a check box, use:


<input type=“checkbox”
name=
“name”

id=
“id”
value=
“value”

/>

name

and
id

attributes identify the field

value

is what’s sent to the server if the

check box is selected



To specify that a check box (or
radio button) be selected by
default, use the
checked

attribute as follows:


<input type=“checkbox”
checked=“checked


/>


12

Creating Form Buttons


File buttons

are used to select files so that their contents can
be submitted for processing to a program.



<input type=“file” value=
“text”

/>



Submit buttons

submit forms to the server for processing when
clicked. Syntax is as follows:

<input type=“submit” value=
“text”

/>



Reset buttons

reset forms to their original (default) values.
Syntax is as follows:

<input type=“reset” value=
“text”

/>



Command buttons

are useful for user
-
defined actions:

<input type=“button” value=
“text”

/>



Image buttons

let you use an image as a button:

<input type=“image”
src
=

url


/>





13

How a File Button Behaves


File buttons

are used
to select files so that
their contents can be
submitted for
processing to a
program.


The Web page then
only displays the file’s
location, not the file’s
contents.

14

Designing Your Own Custom Buttons


Use the
button

tag for greater artistic control over the
appearance of a button

<button name=“
name
” id=“
id
” value=“
value
” type=“
type
”>


content

</button>


content

is the HTML that displays the button.

15

Creating a Selection List


A
selection list

is a list box from which a user
selects a particular value or set of values


Selection lists are useful when there are a fixed
set of possible responses from the user


<select name=“list” id=“list”>



<option>Choice1</option>


</select>




Add the
multiple

attribute to the
select

element to create multiple selections. Add
the
selected

attribute to the
option

element
to create a default preselected item.

<select … multiple=“multiple”>

<option … selected=“selected”>

16

Modifying the Appearance of a Selection List


You can change the number of
options displayed in the
selection list by modifying the
size

attribute. The syntax is as
follows:


<select … size= “value”>…
</select>

17

Creating Option Groups in Selection Lists


Use
option groups

to organize
selection lists into distinct groups.


<select
attributes
>

<
optgroup

label=
“label1
”>


<option>
itema1
</option>


<option>
itema2
</option>




<
optgroup

label=
“label1
”>


<option>
itema1
</option>


<option>
itema2
</option>



</
optgroup
>




</select>

18

Creating Text Area Boxes


Text areas are good for long, multi
-
line text input:


<
textarea

name=
“name”

id=
“id”
rows=

value”
cols
=
“value”
>
default text
</
textarea
>


rows

and
cols

define the dimensions of the input box and
the rows attribute indicates the number of lines


19

Additional Data Types in HTML5

Example:

20

Some New HTML5 Attributes


placeholder


hint for how the input should look.



autocomplete



currently only works in Firefox and Opera



required


syntax is
required = “required”



pattern


used to require input in the format of a regular expression


Example:





21

Organizing Input Elements into a Field Set


HTML and XHML allow you to
organize input elements into a
group of fields called
field sets

Most browsers place a
group box

around a field set to indicate that
the fields belong to a common
group



<
fieldset

id=“
idname
”>




fields


</
fieldset
>

fields

are the individual fields within a
set.



To add a caption to a field set, add
the following tag after the opening
<
fieldset
> tag:



<legend>
text
</legend>


22

Some Important Form Attributes


After adding the elements to your form, you’ll need to specify
where to send the form data and how to send it. Use the
following attributes:


<form action=
“url”
method=
“type”
enctype=
“type”
>… </form>


-

action

specifies the filename and location of the program that


processes the form


-

method

attribute specifies how your Web browser sends


data to the server.

-
enctype

attribute specifies the format of the data stored in the form’s field.
The default
enctype

is the value




application/x
-
www
-
form
-
urlencoded
.

23

The Action Attribute in a Form


The action attribute indicates what
program to run when the form is
submitted:


<form
action=“http://www.lh.org/cgi
-
bin/donate” method=“post”


id=“
donateform
”> … </form>



The
mailto

action is a special action that
accesses the user’s own e
-
mail
program for mailing form information to
a specified e
-
mail address:


<form action=“mailto:adavis@langear.com” method=“post”


id=“
donateform
”> … </form>


24

The Method Attribute in a Form


The
method

attribute can have one of two values:

-

The
get

method is the default; get appends the form data to the
end of the URL specified in the action attribute








The
post

method sends form data in a separate data stream,
allowing the Web server to receive the data through “standard
input”