Web Design: AD550
COURSE CALENDAR | WEEK 12 CLASS OUTLINE | Homework |
Topics covered in class:
- Projects page REVIEW student work
- FORMS:
- Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email.
- On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. We are creating a self-processing form that includes a php script.
- Unfortunately, the ADGA FTP server does not allow scripts to execute, so our forms will not actually function. However, you can save the script should you decide to put your site on a web server with php enabled, in the future.
- HTMLDOG Forms Tutorials:
- Form tags in XHTML: Below are some of examples of tags
used in HTML form creation.
- Form tag defines the form. Within this tag there is generally one required
action attribute that tells the form where its contents
will be sent to when it is submitted.
<form action="processingscript.php" method="post">
</form> - Input tag can take ten forms, the ones we will use are outlined below. (Note that the input tag closes itself with a '/>' at the
end.)
- <input type="text" /> is a standard
textbox. This can also have a value attribute, which sets the text
in the textbox.
<input type="text" value="This is a text input" />.
- <input type="checkbox" /> is a
checkbox, which can be toggled on and off by the user. This can
also have a checked attribute, which would be used in the format
<input type="checkbox" checked="checked" />.
-
<input type="radio" /> is similar
to a checkbox, but the user can only select one radio button in
a group. This can also have a checked attribute, used in the same
way as the checkbox.
<input type="radio" checked="checked" /
-
<input type="submit" /> is a button
that when selected will submit the form. You can control the text
that appears on the submit button with the value attribute, for
example .
<input type="submit" value="Submit this form." />.
- <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.
- <input type="text" /> is a standard
textbox. This can also have a value attribute, which sets the text
in the textbox.
- Textarea tag is a large textbox. It requires a rows and cols attribute.
<textarea rows="5" cols="30">A big load of text here</textarea>
- Select tag works with the option tag to make drop-down select
boxes
<select>
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select> - Option tag can also have a selected attribute, which would be
used in the format:
<option value="first option" selected="selected">Option 1</option>
- Name attribute needs to be added to all the form fields mentioned above. Without
it all the fields will be ignored when you hook up your form to a
form-handling program. For example:
<input type="text" name="yourEmail" />
- Id attribute should also be added to each form field in
order to use labels and can be used for CSS styling.
<input type="text" name="yourEmail" id="email" />
- Label tag is used to help improve
the accessibility
of forms.
<label for="email">Enter Your Email</label> <input type="text" name="yourEmail" id="email"
- Form tag defines the form. Within this tag there is generally one required
action attribute that tells the form where its contents
will be sent to when it is submitted.
- Adding a form to your contact page using PHP | Sample
page
- Set up the PHP page by renaming your file contact.html to contact.php - INSIDE OF DREAMWEAVER.
- View this page's source. Copy and paste the PHP code into your contact page, just below your <h2>Contact</h2>.
- Now we will add the form controls based on the sample page. The tags used in this form are form, input, textarea, select, option, and label. The attributes include id, name, value, type, rows, cols, and for.
- Using CSS to style your form
- Try adding the following rules to your CSS page
form { border: thin dotted #CCCCCC; width: 80%; margin-left: 10px; padding: 10px; }
#email, #name, #state, #textmessage { background-color: #FED8D5; color: #333333; }
#submitbutton { color: #FFFFFF; background-color: #666666; border: thin outset #666666; }
#submitbutton:hover { background-color: #C73149; }
- Try adding the following rules to your CSS page
- References
Finish portfolio sites!!
In Photoshop or Illustrator finalize your alternate color scheme, graphic style and layout for your portfolio site. We will begin work on an alternate stylesheet next class. We will be using the same divisions (a two column layout). Please keep these divisions in mind when designing your alternate mockup, but consider how you can hide these divisions using smart visual design (rounded corners, organic lines- using pattern tiles and other background images)
- header
- content
- main-content
- sidebar-content
- footer
- wrapper
By next class you should have completed your first web site. If your website is well-styled and includes the following pages it will be included in the upcoming student show.
- index.html
- resume.html
- bio.html
- projects.html (plus second and third level navigation to project sections)
- contact.php
- main stylesheet (with images)
For students interested in creating horizontal navigation, review this tutorial (using a separate stylesheet file). I will demonstrate it next week.
- http://css.maxdesign.com.au/listamatic2/horizontal05.htm
- Also, here is a list of different types of navigation lists:
http://www.cssjuice.com/30-free-css-based-navigation-menus/