–– workshop home ––

Workshops

Forms 1 Exercises

Preliminary

  1. Download form1.html to your desktop
  2. Load FileZilla
  3. Get connected to websandbox.boisestate.edu using your web account and password. Be sure you enter Port 22.
  4. Navigate to /WebSites/workshops/forms1
  5. Navigate to your personal directory there
  6. Launch Groupwise and get logged in. Form results will go to your email.

You will edit your desktop copy, upload it to your directory on websandbox, and will view it there.

1. Form

<form method="post" action="SendEmail.php">
</form>

2. Text Field

<form method="post" action="SendEmail.php">

	<p><input type="text" /></p>

</form>

3. Submit Button

<form method="post" action="SendEmail.php">
	<p>
		<input type="text" />
	</p>

	<p>
		<input type="submit" value="Send" />
		<input type="reset" />
	</p>

</form>

4. More Fields, plus prompts

<form method="post" action="SendEmail.php">
	<p>

		First Name <input type="text" />
		Last Name <input type="text" />
	</p>
	<p>
		Department or Office <input type="text" />

	</p>
	<p>
		<input type="submit" value="Send" />
		<input type="reset" />
	</p>
</form>

5. Radio Buttons

From here on, I'll include only the new code.

	<p>
		Year<br />
		<input type="radio" /> Freshman<br />
		<input type="radio" /> Sophomore<br />
		<input type="radio" /> Junior<br />
		<input type="radio" /> Senior<br />
		<input type="radio" /> Graduate<br />
	</p>

6. Checkboxes

	<p>
		Areas of Interest<br />
		<input type="checkbox" /> Humanities<br />
		<input type="checkbox" /> Fine Arts<br />
		<input type="checkbox" /> Science<br />
		<input type="checkbox" /> Engineering<br />
		<input type="checkbox" /> Business<br />
		<input type="checkbox" /> Social Science<br />
	</p>


7. select


	<p>
		<label for="interest">
		Select your level of interest in Boise State University
		</label><br />
		<select id="interest" name="level">
			<option>I will attend</option>
			<option>Among my final choices</option>
			<option>Interested</option>
			<option>Not very interested</option>
			<option>No interest</option>
		</select>
	</p>





8. textarea


	<p>
		Comment<br />
		<textarea></textarea>
	</p>




9. Add name= to all fields


This will cause each of your results lines to have an identifying name. Makes the results much easier to read.



10. Options


    
	
  1. set first and last name fields to 30
    2. 
	
  2. set maxlength on first name to 20 and see what happens. Remove it.
    3. 
	
  3. set width of Department to 90. What happens if you shrink your browser too much?
    4. 
	
  4. on the textarea set cols to 50 and rows to 7
    5. 
	
  5. Make "Idaho resident" Yes checked
    6. 
	
  6. Add multiple to the select
    7. 




11. Fieldset


Add fieldset and legend to group the Year and the Areas of Interest. Don't worry about styling yet.



12. Labels


Add labels to all form controls.



13. Styling


I'm just going to list the style steps here, one after the other.


    
	
  1. Size the entire form to 60% of the viewport
    2. 
	
  2. Float it right
    3. 
	
  3. Add a background color to the form
    4. 
	
  4. Make the font sans-serif
    5. 
	
  5. Add a border to the whole form
    6. 
	
  6. Put in a heading2 with the text "Interest Query Form"
    7. 
	
  7. Add a background color for the two fieldsets
    8. 
	
  8. Float the fieldsets so they are next to each other rather than one underneath the other
    9. 
	
  9. Set a different background on the legends
    10. 
	
  10. Experiment with borders on the fieldsets and legends
    11. 
	
  11. Make it so the form control doesn't separate from its prompt when you shrink the window
    12. 




Data Validation


No exercises, only demonstration