You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: framework/extras-form-styles.html
+80-15Lines changed: 80 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -16,33 +16,98 @@
16
16
17
17
<!-- Workshop-specific styles -->
18
18
<linkrel="stylesheet" href="css/workshop.css">
19
-
20
-
<!-- Takes care of CSS3 prefixes! -->
21
-
<scriptsrc="scripts/prefixfree.min.js"></script>
22
19
</head>
23
20
24
21
<body>
25
22
26
23
<basetarget="_blank">
27
-
28
24
<main>
29
-
<sectionclass="slide" data-markdown>
30
-
##Form controls: putting it all together
31
-
32
-
`input` elements 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.
25
+
<sectionclass="slide" data-markdown>
26
+
##Contact Page: Add a background image
33
27
34
-
The `label` tags are used to label the input.
28
+
Add a class of `contact` to the `body` tag in the HTML. Just like for the home page, we'll use this to apply a background image to the `body` only for the **Contact** page.
35
29
36
-
The `name` attribute is used to label the fields when sending the form data to the server.
37
-
38
-
The `for` and `id` attributes are used to associate the label to the input and should have matching values.
30
+
```
31
+
<body class="contact">
32
+
```
39
33
40
-
A form can contain any HTML markup (paragraphs, lists, etc.) in addition to form specific HTML tags.
34
+
Add a new comment block to organize your page specific styles.
41
35
42
-
[Each part of a form is considered a paragraph](http://dev.w3.org/html5/spec-LC/forms.html#forms) and can be separated using `<p>` elements.
<p>The margin property can also be used to center align block level elements. First, a width needs to be set. Then, setting the left & right values to <code>auto</code> will find the center of the page. The <code>0</code> just refers to the top and bottom value.</p>
52
+
53
+
<p>If the css looked like this:</p>
54
+
55
+
<pre><code>.box {
56
+
background-color: lightblue;
57
+
height: 100px;
58
+
width: 600px;
59
+
margin: 0 auto;
60
+
}</code></pre>
61
+
62
+
<p>The element would render like this example below. Notice how it always stays in the middle of the page, even if you minimize or maximize the browser.</p>
In the markup for the form, a class of `contact-form` was included in the `form` tag to be used for styling since all the form elements are contained within it.
71
+
72
+
Set a width for the form and center align it on the page. Also add a background colour to see the text more clearly over the image.
73
+
74
+
```
75
+
.contact-form {
76
+
width: 600px;
77
+
margin: 10px auto;
78
+
background: white;
79
+
}
80
+
```
81
+
82
+
Add some padding to `contact-form` to keep the text from going right up to the edge. Also try adding the CSS property `border-radius` to add some rounded corners.
83
+
84
+
```
85
+
.contact-form {
86
+
width: 600px;
87
+
margin: 10px auto;
88
+
background: white;
89
+
padding: 20px;
90
+
border-radius: 4px;
91
+
}
92
+
```
93
+
94
+
To get the input and textarea to span all the way across the form, we can set the width to 100% so it takes up the entire width of the form. It's also possible to override the default border styles too. Add height to the textarea just to give more room for the user to type a message.
95
+
96
+
```
97
+
input,
98
+
textarea {
99
+
width: 100%;
100
+
border: 1px solid #ccc;
101
+
padding: 5px;
102
+
}
103
+
textarea {
104
+
height: 100px;
105
+
}
106
+
```
107
+
Your form should look similar to the [contact-page-styles.html](../project/examples/contact-page-styles.html) example.
108
+
109
+
There's so much more you can do with forms. Check out this project's final css file to see what other changes you can add or take a look at this resource: http://code.tiffbits.com/css3-form-styling-cheat-sheet/
<p>Your contact page and form should look similar to <ahref="project/examples/exercise9-contact.html">Example 9</a>.</p>
1788
1788
1789
1789
<divclass="presenter-notes">
1790
-
<p>Give an general overview of what each from control is used for as you are adding in the code. There's further resources available in the next slide.</p>
1790
+
<p>Give a general overview of what each from control is used for as you are adding in the code. There's further resources available in the homework/next steps section.</p>
1791
1791
1792
-
<p>This will be the official last exercise for the day. Though there are plenty of other lessons in the next steps/homework section. If you find yourself with extra time, congratulate the class on picking up the concepts so well and either give them free time to tweak their projects, pick one of the homework assignments to go through together. Save some time to briefly cover the next steps.</p>
1792
+
<p>This will be the official last exercise for the day. If you find yourself with extra time, congratulate the class on picking up the concepts so well and either give them free time to tweak their projects or pick one of the homework assignments to go through together. Save some time to briefly cover the next steps.</p>
1793
1793
</div>
1794
1794
</section>
1795
1795
1796
-
<!-- <section class="slide" data-markdown>
1797
-
##Forms
1798
-
1799
-
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!
1800
-
1801
-
Today we're going to use http://forms.brace.io/ to submit our form info. Through this service, the information will be forwarded to your email. Simple!
1802
-
1803
-
All forms begin with the `form` element and requires
1804
-
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.
1805
-
1806
-
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.
<p>On your contact page, under the header, create a new <code><section></code> tag. Add the below markup <em>in between</em> the <code>section</code> element.</p>
1819
-
<p>Brace.io requires that you verify your email first. The verification email will be sent on the <strong>first</strong> form submit so make sure you test your form first!</p>
<p>Your contact page and form should look similar to <a href="project/examples/exercise9-contact.html">Example 9</a>.</p>
1844
-
<p>For more information about forms, <a href="framework/extras-form-controls.html">go here</a>.</p>
1845
-
1846
-
<div class="presenter-notes">
1847
-
<p>Give an general overview of what each from control is used for as you are adding in the code. There's further resources available in the link provided in this slide.</p>
1848
-
</div>
1849
-
</section> -->
1850
-
1851
-
<sectionclass="slide">
1852
-
<h2>Center aligning with margin</h2>
1853
-
<p>The margin property can also be used to center align block level elements. First, a width needs to be set. Then, setting the left & right values to <code>auto</code> will find the center of the page. The <code>0</code> just refers to the top and bottom value.</p>
In the markup for the form, a class of `contact-form` was included in the `form` tag to be used for styling since all the form elements are contained within it.
1866
-
1867
-
1. Set a width for the form and center align it on the page. Also add a background colour to see the text more clearly over the image.
1868
-
1869
-
```
1870
-
.contact-form {
1871
-
width: 600px;
1872
-
margin: 10px auto;
1873
-
background: white;
1874
-
}
1875
-
```
1801
+
Ok, not quite done. Let's talk about some next steps.
1802
+
</div>
1803
+
1804
+
<divclass="slide" data-markdown>
1805
+
##Next Steps & "Homework"
1876
1806
1877
-
1. Add some padding to `contact-form` to keep the text from going right up to the edge. Also try adding the CSS property `border-radius` to add some rounded corners.
1878
-
1879
-
```
1880
-
.contact-form {
1881
-
width: 600px;
1882
-
margin: 10px auto;
1883
-
background: white;
1884
-
padding: 20px;
1885
-
border-radius: 4px;
1886
-
}
1887
-
```
1888
-
1. To get the input and textarea to span all the way across the form, we can set the width to 100% so it takes up the entire width of the form. It's also possible to override the default border styles too. Add height to the textarea just to give more room for the user to type a message.
1889
-
1890
-
```
1891
-
input,
1892
-
textarea {
1893
-
width: 100%;
1894
-
border: 1px solid #ccc;
1895
-
padding: 5px;
1896
-
}
1897
-
textarea {
1898
-
height: 100px;
1899
-
}
1900
-
```
1901
-
Your form should look similar to [example 11](project/examples/exercise11-contact.html).
1902
-
1903
-
There's so much more you can do with forms. Check out this project's final css file to see what other changes you can add or take a look at this resource: http://code.tiffbits.com/css3-form-styling-cheat-sheet/
1904
-
</section>
1807
+
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, finalize some styles and add some polish.
1905
1808
1809
+
Here are some additional lessons you can try:
1810
+
1811
+
* [Sticky Footer]()
1812
+
* [Contact page](framework/extras-form-styles.html) - adding background images & form styling
1813
+
* [Forms, pt 2]() - how to submit a form
1814
+
* [Home page: additional styles]() - this includes using icon fonts.
0 commit comments