Chateau Chien Dog Training

Outcomes in this case study:

1. Set up an input form in html.

2. Set up a variety of input types with appropriate edits, placeholders and initial values
3. Create a submit button that uses an ACTION to send/receive data
4. Style a responsive form appropriately to fit in with the overall look and feel of the site
5. Embed simple javascript commands in an html page
6. Invoke a simple javascript function that is in an external .js file.

Hands-On Practice Case Study

Task 1: Set up the Contact Page for server-side processing. (FIRST MAKE IT WORK! )

1. On your “contact” html page revise the “placeholder” heading text to say something like
“Let us know how to contact you with the answers you need.” Follow this with a short
short introductory paragraph that informs the user that this is how to get the business a
message so they can answer questions or call you back at a convenient time.

2. Next, add a <form> element that uses the “post” method and the action attribute to
invoke server-side processing. Configure the action attribute to send the form data to
https://webdevbasics.net/scripts/demo.php . This is a server-side site set up for the Felke-
Morris text book. It will just return a “mirror” of what the user entered. You can learn
how to create one of your own in ITC3150.

3. Create labels and input controls for the following:

Label Input type Quick reference

Name Text https://www.w3schools.com/tags/att_input_type_text.asp

User input is REQUIRED

E-Mail Email https://www.w3schools.com/TAGS/att_input_type_email.asp

(required) Use a PLACEHOLDER value to suggest the format

Phone Phone https://www.w3schools.com/Tags/att_input_type_tel.asp

(required) (you should set the phone number format to the common US
format (999-999-9999 ) if you can. Look at the pattern
attribute and see if you can do it! )
Preferred Select https://www.w3schools.com/tags/tag_select.asp
contact (dropdown
list)
 Choices:
 Email me
 Phone me between 1pm – 4pm
 Phone me between 6pm – 9pm

Set the initial value to “Email me”

Question textarea https://www.w3schools.com/tags/tag_textarea.asp
or
Concern?
Send submit https://www.w3schools.com/tags/att_input_type_submit.asp
Now!

4. Test your page and see that the response you get from the demo server gives you back the
form items with the user input you entered.

Task 2: Style your Form with CSS (THEN MAKE IT “PRETTY”)

There are a few different approaches to styling the input forms. Briefly review them
with the w3schools links below and decide which you will use. The most
straightforward is probably the w3schools Stacked Form because it will have only one
column for both the Large or Small screen. The w3schools In-Line Form example is also
simple, but it uses flexbox to manage vertical vs horizontal placement for the two screen
sizes. The most comprehensive is the w3schools Responsive Forms example, which uses
Grid View techniques. We haven’t covered Gridview, but it is very effective for layout,
and will get you extra points! Choose the approach you are most comfortable with.

Instructions for all approaches:

1. You will have only ONE <form> tag, and ONE submit button on your page. Be
careful if you are doing copy/paste so that you do not accidentally pick up extra
<form> or <input type = submit> tags!. All input controls and the submit are
inside a SINGLE <form> .
2. Give your form area a background color compatible with the rest of your site.
3. Adjust text font and size if needed to be consistent with the other pages.
4. Be sure all your input boxes will have borders in a color that also goes with your
site color palette.
5. Choose one of the following approaches for layout:

 STACKED FORM. Use a single column with the label ABOVE the user input field for
both large and small screen. Things to pay attention to:
  The <input> selector needs to include the attribute that specifies whether it is for
text, tel, checkbox, etc. The syntax is:
o selector [attribute = value]
o Example: input[type=text]
 Other kinds of input like textarea and select do not need this special syntax.
Combine any of the input selectors together in one set if they use the same
rules. See: https://www.w3schools.in/css3/group-selector
 You can apply the hover pseudoclass to a submit input selectors just like you can
to the <a> anchor/link tag!
 Here is example CSS for a stacked form:
https://www.w3schools.com/howto/howto_css_stacked_form.asp

 IN-LINE FORM. Practice your flexbox skills and have a different look for large and
small screens. Things to pay attention to:
 W3schools has the small screen rules AFTER the @media query instead of
above it!! If you have been following previous instructions and putting the
small screen at the top of your CSS file, and the Large screen rules at the
bottom, remember to reverse what you see in w3schools to fit your existing
code.
 The w3schools example uses a .form-input class for the form itself, and then
uses this class for every label and input selector. This is good practice for a
site with multiple forms. It is not strictly necessary on a site as simple as this
one. If you are typing by hand, save yourself the keystrokes. If you prefer to
copy/paste from w3schools, you might want to stick with their convention.
 W3schools uses the <button> element for the “submit” instead of <input type
= submit> . They are different, but not by much. You may use either one.
 Here is the example code:
https://www.w3schools.com/howto/howto_css_inline_form.asp

 RESPONSIVE FORM. First, find out about Grid View at:

https://www.w3schools.com/Css/css_grid.asp
 Things to think about: How does this compare to flexbox, or using floats and
positioning without a grid? Can you use a grid on a part of a page or must it
be used on the whole page? Can you combine grid view and flexbox
techniques? There isn’t a quiz on these questions, but if you like to ponder
how to do different things in html/css, this is a good exercise!
 Next, look at the code at:
https://www.w3schools.com/howto/howto_css_responsive_form.asp

 Notice that with this approach, every label and every control must be
positioned into the appropriate “row” and “column”. Make sure to plan this
out before working on the coding.
 As with the Stacked Form, the <input> selector needs to include the

attribute that specifies whether it is for text, tel, checkbox, etc. The syntax
is:
o selector [attribute = value]
o Example: input[type=text]

 As with the In-Line form, W3schools has the small screen rules AFTER the
@media query instead of above it!! If you have been following previous
instructions and putting the small screen at the top of your CSS file, and the
Large screen rules at the bottom, remember to reverse what you see in
w3schools to fit your existing code.

6. Test your much nicer-looking screen to make sure it still works!

TASK 3: Add Javascript to the page

Those who have a programming background will be able to do quite a bit with javascript.
But this course does not have programming as a pre-requisite, so this assignment will not
require you to do a lot of “programming”. You do have to demonstrate you can integrate
javascript into your pages. You will use javascript to display the current date on your pages,
and to display a welcome popup message when the user accesses the index.html page ( Yes,
I hate popups too.)
1. Add the current date to the footer area of your pages with the javascript
“Date( );” function You may use the <script> tag directly in the html <footer>
element for this step. The script is short, and short scripts are often embedded
directly where it is needed in the html.
https://www.w3schools.com/js/js_whereto.asp (the first example)
https://www.w3schools.com/js/tryit.asp?filename=tryjs_date_current
Test this to see that the date shows up in any reasonable date format.

2. Create a .js file SEPARATELY from your html file. You can do this in Dreamweaver,
VS Code or Brackets. Your new file must have the .js file extension. (Each tool
does this a bit differently but it should not be hard to figure out. ASK if you can’t
get it to work!) In your root folder, you may already have a “scripts” folder set
up. If not, make one. Put your .js file in it.

3. In your .js file, code a function for a simple “Alert” message that says: “Welcome
pets of all ages, sizes and skills”. Give your function a descriptive name with NO
SPACES OR SPECIAL CHARACTERS.
https://www.w3schools.com/js/js_functions.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_alert

4. Add the <script src ….> tag in the html for your index.html page. You may put it
at the bottom of the html file, just before the </body> tag, or in the <head>
element, just like the link to your css file:
 https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_external
(second example)

5. CHECK YOUR PATH TO THE EXTERNAL JS FILE: It should be

“script/Examplescript.js” or possibly “../script/Examplescript.js” depending on
how you organized your site folder structure.

6. Now it is time to associate the Alert message script with an EVENT so the
browser will know WHEN to find and execute the script for the Alert message.
Often the EVENT for a function is associated with a button click. But for this
assignment, you will use the ONLOAD event for your index.html page.
https://www.w3schools.com/jsref/event_onload.asp

7. Test your index.html page to see that the message pops up (yes, it is an
annoying alert message!)

8. Load your site, including your new script folder and .js file to the server and
upload your work to Canvas.