Scribd
Upload
90 views

Project 7 Handout

The document describes how to create HTML forms using various input controls such as text boxes, checkboxes, dropdown menus, radio buttons, and text areas. It also covers how to add submit and reset buttons, and how to group related form elements using fieldsets. The <form> tag is used to designate an area as a form, with attributes like action to specify where the data is submitted, and method to define how it is sent. The <input> tag creates the various controls, specifying types like text, checkbox, radio, and names to identify the fields.

Uploaded by

angela_edel
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
90 views

Project 7 Handout

The document describes how to create HTML forms using various input controls such as text boxes, checkboxes, dropdown menus, radio buttons, and text areas. It also covers how to add submit and reset buttons, and how to group related form elements using fieldsets. The <form> tag is used to designate an area as a form, with attributes like action to specify where the data is submitted, and method to define how it is sent. The <input> tag creates the various controls, specifying types like text, checkbox, radio, and names to identify the fields.

Uploaded by

angela_edel
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Project 7

Creating Forms
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<form> Designates an area of a Web page as a form

action The next tag specifies the action that is taken


when the form is submitted
 Information sent by: e-mail
 Information sent to: a database
o processed by CGI script

method This tag specifies the manner in which the data is


sent to the server to be processed
 Get method—sends the name-value pairs to
the end of the URL indicated in the action
attribute
 Post method—sends a separate data file with
the name-value pairs to the URL (or e-mail
address) indicated in the action attribute
</form>

<form method=”post”
action=”mailto:[email protected]”>
Project 7
Creating Forms
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<form> Designates an area of a Web page as a form

action The next tag specifies the action that is taken when the form is submitted
 Information sent by: e-mail
 Information sent to: a database
o processed by CGI script

method This tag specifies the manner in which the data is sent to the server to be processed
 Get method—sends the name-value pairs to the end of the URL indicated in the action attribute
 Post method—sends a separate data file with the name-value pairs to the URL (or e-mail address)
indicated in the action attribute
</form>

<form method=”post” action=”mailto:[email protected]”>

<input> tag Creates an input control (see table for types of input controls)

type= “ “ attribute of the <input> tag


 Specifies the type of input control

name=” “ attribute of the <input> tag


 Describes the information to be entered
 The name is used to distinguish the value associated with that field from other fields when the form is submitted

size=” “ attribute of the <input> tag


 Indicates the size of the input control (number of characters allowed)
type= “ “ attribute of the <input> tag
 Specifies the type of input control

Adding a text box control:

name: <input name=”name” type=”text” size=”25”

Adding a checkbox control: (by default, all checkboxes are deselected)

<input name=”pictype” (used to distinguish the values associated with these checkbox fields from other fields)
type=”checkbox”
value=”choice1“Choice One (indicates the value submitted in the file if this checkbox is selected)

Adding a selection menu control: (See pages 306-307 for advanced menus)

<Select name=”payment”>
<option>Visa</option>
<option>Discover</option>
</select>

Adding a radio control:

<input name=” ” (used to distinguish the values associated with these checkbox fields from other fields)
type=”radio” value=”yes“>Yes
Adding a textarea control:

<textarea name=”other” rows=”6” cols=”20”> </textarea>

SUBMIT AND RESET buttons

<input type=”submit” value=”Submit”>


<input type=”reset” value=”Reset”>

FORM GROUPINGS
 Group similar information on a form
 Useful for designating which information is required and which is optional

<fieldset> <legend align=”left”> (text that displays and its alignment—optional)


Required Information</fieldset>

</fieldset>

<form method="post" action="mailto:[email protected]"> <br /><fieldset><legend align="right">Additional


Comments</legend>
<p><b><font color="#000099">
If you would like to order any pictures from the Bill Thomas Would you like to receive our e-mail newsletter?
Illustrations <input name="newsletter" type="radio" value="yes">Yes
Web site, please make your selection on the order form below and <input name="newsletter" type="radio" value="no">No
click the
Submit button to process the order.</b></p> <p>What other types of illustrations, in addition to those shown,
<fieldset><legend align="left">Required Information</legend> would you be
interested in purchasing?
<br />Name: <input name="name" type="text" size="25"> <br /><textarea name="other" rows="6"
<br />Street Address: <input name="address" type="text" cols="50"></textarea></p>
size="25"> </fieldset>
<br />City, State, ZIP: <input name="citystatezip" type="text"
size="25"> <p><input type="submit" value="Submit">
<br />E-mail Address: <input name="email" type="text" <input type="reset" value="Reset"></p>
size="25">
<p><b><font color="#000099">Thank you for your order!
<p>Select the picture(s) that you are interested in purchasing: <br />Bill Thomas Illustrations</font></b></p>
<br /> </form>
<input name="pictype" type="checkbox"
value="cross">Cross Hatch
<input name="pictype" type="checkbox"
value="fullcolor">Full Color
<input name="pictype" type="checkbox" value="ink">Ink
Wash
</p>

<br />Credit card type:


<select name="payment">
<option>Visa</option>

<option>MasterCard</option>
<option>American Express</option>
</select>

<br />Credit card number:


<input name="cardnum" type="text" size="20"
maxlength="20">
Expiration date:
<input name="cardexp" type="text" size="4"
maxlength="4">
Project 7
Creating Forms
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<form method= “post”


action=mailto:[email protected]>

Insert the different input controls here

<input type=″submit″ value=″Submit″>


<input type=″reset″ value=″Reset″>
</form>

</body>
</html>
Types of Input Controls:

type=

radio radio button (option button)


checkbox checkbox
text fill-in with text
textarea fill-in with a lot of text
select makes a selection menu

Use the <input> tag: (no ending tag)

<input name= type= (value= or size=) >

<input name=″prom″ type=″radio″ value=″yes″>Yes


<input name=″prom″ type=″radio″ value=″no″>No

A name must be assigned in order to identify the


field when the form is submitted.

<fieldset> Used to group similar information on the


</fieldset> form
Project 7
Creating Forms
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<form method= “post” action=mailto:[email protected]>

<fieldset>

<input name=″ ″ type=″text″>

<input name=″ ″ type=″checkbox″ value=″ ″>

<select name=″ ″>


<option> </option>
</select>

<input name=″ ″ type=″ submit″ value=″Submit″>


<input name=″ ″ type=″reset″ value=″Reset″>

</form>
</body>
</html>
<input> tag
Creates an input control (see table for types of
input controls)

type= “ “ attribute of the <input> tag


 Specifies the type of input control

name=” “ attribute of the <input> tag


 Describes the information to be
entered
 The name is used to distinguish the
value associated with that field from
other fields when the form is
submitted

size=” “ attribute of the <input> tag


 Indicates the size of the input
control (number of characters
allowed)
type= “ “ attribute of the <input> tag
 Specifies the type of input control

Adding a text box control:

name: <input name=”name”


type=”text” size=”25”

Adding a checkbox control: (by default, all


checkboxes are deselected)

<input name=”pictype” (used to distinguish


the values associated with these checkbox fields from
other fields)
type=”checkbox”
value=”choice1“Choice One
(indicates the value submitted in the file if this
checkbox is selected)
Adding a selection menu control:

<Select name=”payment”>
<option>Visa</option>
<option>Discover</option>
</select>

See pages 306-307 for advanced menus

Adding a radio control:


Use same name to limit the users to select only one of the o

<input name=” ” (used to distinguish the


values associated with these checkbox fields from
other fields)
type=”radio”
value=”yes“>Yes
Adding a textarea control:

<textarea name=”other” rows=”6”


cols=”20”> </textarea>

SUBMIT AND RESET buttons

<input type=”submit” value=”Submit”>


<input type=”reset” value=”Reset”>

FORM GROUPINGS
 Group similar information on a form
 Useful for designating which
information is required and which is
optional

<fieldset> <legend align=”left”> (text


that displays and its alignment—optional)
Required Information</fieldset>

You might also like