forms part 1 explained

During the next week we learn about developing forms.

Read part of Chapter 10 - pages 237-249 & 252-253

Form Overview

Form tag and Text box

Submit & reset

Checkbox and Radio Button

Select & option elements

Textarea element

For Credit

---

Form Overview

As you watch each demonstration you will see me create the form shown in htis video.

---

Form element and input element that creates a text box

When you want to create a form start with this code:

<form action="http://www.santarosa.edu/cgi-bin/misc/formmail.pl" method="post">
...all the form tags we will learn aobut in this lesson
</form>

After entering this code we bgin to add areas where folks can enter data into the form, and create a submit button which will allow folks to send you that data. Please note that the video does not have the id attribute, it has been added to this code below and the sample file. Here is my form code in it's early stage

<form action="http://www.santarosa.edu/cgi-bin/misc/formmail.pl" method="post">
<p>Please enter the information requested, if you have a problem with the form <br>
feel free to send me a note: lhemenway@santarosa.edu </p>
<p>First Name:<input name="first" type="text" id="first" size="40" /></p>
<p>Last Name:<input name="last" type="text" id="last" size="40" /></p>
<p>Email:<input name="email" type="text" id="email" size="40" /></p>
<p>Web page address: <input type="text" name="url" id="url" size="40" />
</p>
</form>

Here is the sample file at this stage of the class

---

Submit and reset elements

After adding this code I now see buttons which the visitro can use to send me the form. Please note, at this stage of the class the form will not work, that is to be expected.

Here is the new HTML code

<input name="Submit" type="submit" value="Submit Feedback" />
<input name="" type="reset" value="Clear Form" />

Here is the form with the submti and reset button added

---

Check box and radio buttons

 

When you want to have visitors choose only one option, use a radio button, it will toggle to alow only one choice per question.

If you want to allow folks to choose more than one answer from a list of items use a checkbox.

Here is the code for a pair of radio buttons

<p>Gender:<input name="gender" id="genderM" type="radio" value="male" /> Male
<input name="gender" id="genderF" type="radio" value="female" /> Female</p>

Now the HTML for checkboxes

<p>Select all types of plants that are in your yard:<br>
<input type="checkbox" name="annuals" id="annuals" value="yes" />
Annuals<br />
<input type="checkbox" name="perennials" id="perennials" value="yes" />
Perennials<br />
<input type="checkbox" name="roses" id="roses" value="yes" />
Roses<br />
<input type="checkbox" name="grasses" id="grasses" value="yes" />
Native Grasses <br />
<input type="checkbox" name="succulents" id="succulents" value="yes" />
Succulents
</p>

Please note: the radio buttons all have the same value for the "name" attribute. The checkboxes each have a unique value.

Here is the form with the radio buttons and checkboxes.

---

Select element and option element

When you want to ask visitors choose one option, from a long list you provide use the <select> and <option> tags to create a pull down meu.

Here is the HTML code:

<p>What USDA hardiness zone do you live in? <br>
<select name="zone" id="zone">
<option value="zones1-5">-50F to -10F</option><br>
<option value="zones6-8">-10F to 20F</option><br>
<option value="zones9-10">25F to 40F </option><br>
<option value="zone11">Above 40 F</option>
</select>
<p>

Form with select and option code added

---

Textarea

If you need folks to enter more than just a single line of thext, you can use the textarea elemnt to create a box which displays several paragraphs of text.

Here is the HTML code:

<p>List a few of your favorite plants, and explain why you like them so much:<br>
<textarea name="textarea" id="textarea" rows="15" cols="50"></textarea>
</p>

Final form at the end of this lesson

For Credit:

Develop an HTML page which has the following requirements (40 points total):

• <form></form>
• <input type="text" />
• <input type="radio" />
• <input type="checkbox" />
• <input type="submit" />
• <input type="reset" />
• <select><option></select>
• <textarea></textarea>
  

You do not need to submit a URL this week since the student work page has a link to your homework page, and I will grade your work from there.

http://www.santarosa.edu/~lhemenw/html2/student-work.html