Skip to content

Commit 89efce5

Browse files
christinatruongchristinatruong
committed
How to submit a form, extra lesson.
1 parent 1683ce7 commit 89efce5

File tree

2 files changed

+128
-96
lines changed

2 files changed

+128
-96
lines changed

‎framework/extras-form-submission.html

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>Ladies Learning Code: Intro to HTML & CSS</title>
7+
<!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
8+
<link rel="stylesheet" href="css/slideshow.css">
9+
10+
<!-- Theme-specific styles -->
11+
<link href='http://fonts.googleapis.com/css?family=Quicksand|Pacifico|Open+Sans:400,300' rel='stylesheet' type='text/css'>
12+
<link rel="stylesheet" href="css/font-awesome.css">
13+
<link rel="stylesheet" href="css/highlightjs-themes/monokai.css">
14+
<link rel="stylesheet" href="css/theme-llc.css">
15+
<link rel="shortcut icon" href="img/favicon.ico">
16+
17+
<!-- Workshop-specific styles -->
18+
<link rel="stylesheet" href="css/workshop.css">
19+
</head>
20+
21+
<body>
22+
23+
<base target="_blank">
24+
<main>
25+
<section class="slide" data-markdown>
26+
##Submitting a form
27+
28+
Forms are used to capture information from a user. The information processing and form submission usually requires the use of a server-side language such as PHP, Ruby or Python. But there are different services available to help do the processing for us without writing any of these languages.
29+
30+
Let's first look at what each of these form controls do.
31+
32+
* `input` tag are used to allow the user to type in their information and is used with a `type` attribute to determine the kind of information it is.
33+
* The `label` tags are used to label the input or else the user would not know what information to enter.
34+
* The `name` attribute is used to label the fields when sending the form data to the server.
35+
* The `for` and `id` attributes associate the label to the input and should have matching values.
36+
37+
A form can contain any HTML markup (paragraphs, lists, etc.) in addition to form specific HTML tags. [Each part of a form is considered a paragraph](http://dev.w3.org/html5/spec-LC/forms.html#forms) and can be separated using `&lt;p>` elements.
38+
39+
**Further reading: ** [MDN forms](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms)
40+
</section>
41+
42+
<section class="slide" data-markdown>
43+
##3rd Party services
44+
45+
There are many services that help with form submission. Let's look at [FORMS by Brace](http://forms.brace.io/).Through this service, the information will be forwarded to your email. Simple!
46+
47+
Remember, all forms begin with the `form` element and requires two attributes, `method` (defines how the form will communicate with the web server) and `action` (provides the file path to where the form script is processed after the form is submitted.
48+
49+
Since we're using a 3rd party service, the `action` value is *their* url *and* the email you want the form to be submitted to.
50+
51+
```xml
52+
&lt;form method="POST" action="http://forms.brace.io/myemail@hello.com">
53+
...
54+
&lt;/form>
55+
```
56+
</section>
57+
<section class="slide" data-markdown>
58+
##3rd Party services
59+
60+
Brace.io requires that you verify your email first. The verification email will be sent on the first form submit so make sure you test your form first!
61+
62+
Also note, this service only works on a *server* so you can't test it *locally*, meaning, just from your computer. You'll need to upload it to a server or run a local server to test it.
63+
64+
See [getting your site online](../index.html#slide89) or [how to run a local server](http://mac.appstorm.net/reviews/internet-reviews/running-a-local-server-with-mamp/).
65+
See further documentation here: [http://forms.brace.io/](http://forms.brace.io/)
66+
67+
Another services to check is [Wufoo](http://www.wufoo.com/).
68+
69+
You can even use Google Docs to create a form that will add the form submissions into a spreadsheet. View these sources here:
70+
71+
* https://www.youtube.com/watch?v=wwf72lwPLVY
72+
* http://morning.am/tutorials/how-to-style-google-forms/
73+
</section>
74+
</main><!-- cls main section -->
75+
76+
<footer>
77+
<p class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="img/cc-by-nc.svg" /></a> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
78+
<p class="instructions">Use the left <i class="fa fa-arrow-left"></i> and right <i class="fa fa-arrow-right"></i> arrow keys to navigate</p>
79+
</footer>
80+
81+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
82+
<script src="scripts/slideshow.js"></script>
83+
84+
<!-- Uncomment the plugins you need -->
85+
<script src="scripts/plugins/css-edit.js"></script>
86+
<script src="scripts/plugins/css-snippets.js"></script>
87+
<script src="scripts/plugins/css-Ctrls.js"></script>
88+
<!-- <script src="plugins/code-highlight.js"></script>-->
89+
90+
<script src="scripts/plugins/markdown/marked.js"></script>
91+
<script src="scripts/plugins/markdown/markdown.js"></script>
92+
<script src="scripts/plugins/highlight/highlight.js"></script>
93+
<script>hljs.initHighlightingOnLoad();</script>
94+
95+
<!-- Prettify -->
96+
<script src="scripts/plugins/prettify.js"></script>
97+
<script src="scripts/plugins/lang-css.js"></script>
98+
<script src="scripts/plugins/prism.js"></script>
99+
100+
<script>
101+
var slideshow = new SlideShow();
102+
103+
// Grabs all the .snippet elements
104+
var snippets = document.querySelectorAll('.snippet');
105+
for(var i=0; i<snippets.length; i++) {
106+
new CSSSnippet(snippets[i]);
107+
}
108+
109+
// Opens all links in a new window
110+
var links = document.getElementsByTagName("a");
111+
for (var i = 0; i < links.length; i++) {
112+
var link = links[i];
113+
link.addEventListener(function() {
114+
window.open(this.href);
115+
});
116+
}
117+
118+
jQuery(document).ready(function(){
119+
jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
120+
});
121+
</script>
122+
</body>
123+
</html>

‎index.html

Lines changed: 5 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1808,106 +1808,15 @@ <h2>Class Exercise #9 - Contact Form</h2>
18081808

18091809
Here are some additional lessons you can try:
18101810

1811-
* [Sticky Footer]()
1811+
* [Sticky Footer](framework/extras-sticky-footer.html)
18121812
* [Contact page](framework/extras-form-styles.html) - adding background images & form styling
1813-
* [Forms, pt 2]() - how to submit a form
1813+
* [Forms, pt 2](framework/extras-form-submission.html) - how to submit a form
18141814
* [Home page: additional styles]() - this includes using icon fonts.
1815-
* [Add a favicon]()
1815+
* [Add a favicon](http://blog.teamtreehouse.com/how-to-make-a-favicon)
1816+
* Use the [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) to add your social icons to the footer. See **final** folder files for examples.
18161817
</div>
1817-
1818-
<section class="slide" data-markdown>
1819-
##Getting ready Final Exercise #12
1820-
1821-
Before creating the home page drop down menu, we'll need to talk about icon fonts and pseudo class first.
1822-
1823-
###Icon fonts
1824-
Icon fonts are an easy way to add imagery to your web page but still have the flexibility of styling properties like size and colour using CSS since they *are* fonts!
1825-
1826-
There's many to choose from but today we'll use Font Awesome:
1827-
[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)
1828-
1829-
Under **Getting Started**, there are different options for adding the font files. If using the CDN, remember to add the "http" to make it work when you run your page "locally" (on your computer).
1830-
1831-
Simple to use, pick an icon you'd like to use and copy the supplied markup and class and that's it!
1832-
1833-
###Pseudo Class
1834-
A CSS pseudo-class is a selector that specifies a specific *state* of the selected element. Today we will be using `:hover` to apply a style only when the user hovers over the element specified by the selector.
1835-
1836-
More about pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
1837-
</section>
1838-
<section class="slide" data-markdown>
1839-
##Exercise #12 - Home Page Drop down menu
1840-
1841-
1. Add [Font Awesome's CSS file](http://fortawesome.github.io/Font-Awesome/get-started/) to the `head` of your document and the markup for the [three-bar icon](http://fortawesome.github.io/Font-Awesome/icon/bars/) to the navigation.
1842-
```
1843-
&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
1844-
```
1845-
```xml
1846-
&lt;nav&gt;
1847-
&lt;i class=&quot;fa fa-bars&quot; title=&quot;menu&quot;&gt;&lt;/i&gt;
1848-
&lt;ul&gt;
1849-
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
1850-
&lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
1851-
&lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
1852-
&lt;/ul&gt;
1853-
&lt;/nav&gt;
1854-
```
1855-
It should look like this:
1856-
![](framework/img/workshop/menu-with-icon.png)
1857-
</section>
18581818
<section class="slide" data-markdown>
1859-
##Exercise #12 - Home Page Drop down menu
1860-
1861-
The next step is to override the horizontal navigation styles that are shared among the other pages and make it specific to the home page. There is already a class of `home` in the body so we can use that to make our selector more specific.
1862-
1863-
1. Set the list items to display block so they line up on top of each other.
1864-
1865-
```
1866-
.home nav li {
1867-
display: block;
1868-
}
1869-
```
1870-
1871-
1. Right align the icon and the list items. This can be added to the `nav` selector so icon and list items will inherit the styles. Change the font size to make it bigger too. The icon will also need a little bit of padding to make the hover target a little bigger and for alignment.
1872-
```
1873-
.home nav {
1874-
text-align: right;
1875-
font-size: 25px;
1876-
}
1877-
.fa-bars {
1878-
padding: 15px;
1879-
}
1880-
```
1881-
1882-
1. Now we need to hide the navigation list and show it when you hover over the icon. Hide the list first.
1883-
```
1884-
.home nav ul {
1885-
display: none;
1886-
}
1887-
```
1888-
1889-
1. With CSS, you can apply a hover on a parent element and use the descendant selector to change the style of it's children!
1890-
1891-
```
1892-
.home nav:hover ul {
1893-
display: block;
1894-
}
1895-
.home a:hover {
1896-
color: black;
1897-
}
1898-
```
1899-
1900-
Your home page should now look similar to [example 12](project/examples/exercise12-home.html).
1901-
</section>
1902-
1903-
<section class="slide" data-markdown>
1904-
##Next steps & "Homework"
1905-
1906-
Though we've covered a lot of material today, there are still lots of things to add to give your web page that extra personalization and polish.
1907-
1908-
Take a look at the files in the **final** folder for some ideas. Use the Font Awesome icons to add your social icons to the footer or try adding a [favicon](http://blog.teamtreehouse.com/how-to-make-a-favicon).
1909-
1910-
There are also plenty of online resources available such as:
1819+
##Online resources
19111820

19121821
* [A Beginners Guide to HTML & CSS](http://learn.shayhowe.com/html-css/)
19131822
* [Code School](https://www.codeschool.com)

0 commit comments

Comments
 (0)