├── ch04 ├── css │ ├── images │ │ ├── bg-ccc.gif │ │ ├── bg-body.png │ │ ├── bg-form.gif │ │ ├── bg-form-btm.png │ │ ├── bg-form-fieldset-div.png │ │ └── ir-submit-create-profile.png │ ├── screen.css │ ├── reset.css │ ├── layout.css │ └── fancyforms.css ├── source_files │ ├── field-icons.psd │ ├── field-icons-color.psd │ └── search-field-grunge.psd ├── examples │ ├── css │ │ ├── images │ │ │ ├── bg-body.png │ │ │ ├── bg-ccc.gif │ │ │ ├── bg-form.gif │ │ │ ├── bg-form-btm.png │ │ │ ├── bg-input-icons.png │ │ │ ├── bg-input-search.png │ │ │ ├── bg-input-gradient.png │ │ │ ├── bg-form-fieldset-div.png │ │ │ ├── bg-input-icons-focus.png │ │ │ └── bg-input-search-submit.png │ │ ├── screen.css │ │ ├── reset.css │ │ ├── layout.css │ │ └── fancyforms.css │ ├── fieldset.html │ ├── styling-form-elements-search.html │ ├── styling-form-elements.html │ ├── fields-across-environments.html │ ├── ugly-checkbox.html │ └── label-positioning.html ├── template.html ├── change-password.html ├── advanced-search.html ├── feedback.html ├── fields-across-environments.html ├── sign-up.html └── edit-profile.html ├── ch05 ├── css │ ├── images │ │ ├── bg-ccc.gif │ │ ├── bg-body.png │ │ ├── bg-form.gif │ │ ├── bg-form-btm.png │ │ ├── bg-form-input.gif │ │ ├── ui-form-select.png │ │ ├── bg-form-messages.gif │ │ ├── ir-submit-search.png │ │ ├── bg-form-messages-li.gif │ │ ├── bg-form-fieldset-div.png │ │ ├── bg-password-strength.png │ │ ├── bg-form-messages-success.gif │ │ ├── ir-submit-create-profile.png │ │ ├── ir-submit-edit-profile.png │ │ ├── ir-submit-privacy-settings.png │ │ ├── ir-submit-submit-feedback.png │ │ └── ir-submit-submit-save-password.png │ ├── screen.css │ ├── ie.css │ ├── reset.css │ ├── layout.css │ └── fancyforms.css ├── images │ ├── icon-error.gif │ └── icon-valid.gif ├── js │ ├── jquery.validate.pack.js │ ├── jquery.passroids.min.js │ ├── jquery.selectbox.min.js │ └── init.js ├── Validation │ ├── jquery.validate.pack.js │ └── init.js ├── source_files │ ├── password-strength-sprite.psd │ ├── jquery.passroids.js │ └── jquery.selectbox-0.5.js ├── examples │ ├── email-availability.php │ ├── ajax-submit.html │ └── conditional-sections.html ├── change-password.html ├── feedback.html ├── advanced-search.html ├── markup-conditional-questions.html ├── privacy-settings.html ├── edit-profile.html └── sign-up.html └── ch03 ├── template.html ├── change-password.html ├── advanced-search.html ├── feedback.html ├── fields-across-environments.html ├── sign-up.html └── edit-profile.html /ch04/css/images/bg-ccc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/css/images/bg-ccc.gif -------------------------------------------------------------------------------- /ch05/css/images/bg-ccc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-ccc.gif -------------------------------------------------------------------------------- /ch05/images/icon-error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/images/icon-error.gif -------------------------------------------------------------------------------- /ch05/images/icon-valid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/images/icon-valid.gif -------------------------------------------------------------------------------- /ch04/css/images/bg-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/css/images/bg-body.png -------------------------------------------------------------------------------- /ch04/css/images/bg-form.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/css/images/bg-form.gif -------------------------------------------------------------------------------- /ch05/css/images/bg-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-body.png -------------------------------------------------------------------------------- /ch05/css/images/bg-form.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form.gif -------------------------------------------------------------------------------- /ch04/css/images/bg-form-btm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/css/images/bg-form-btm.png -------------------------------------------------------------------------------- /ch05/css/images/bg-form-btm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form-btm.png -------------------------------------------------------------------------------- /ch05/js/jquery.validate.pack.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/js/jquery.validate.pack.js -------------------------------------------------------------------------------- /ch04/source_files/field-icons.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/source_files/field-icons.psd -------------------------------------------------------------------------------- /ch05/css/images/bg-form-input.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form-input.gif -------------------------------------------------------------------------------- /ch05/css/images/ui-form-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ui-form-select.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-body.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-ccc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-ccc.gif -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-form.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-form.gif -------------------------------------------------------------------------------- /ch05/css/images/bg-form-messages.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form-messages.gif -------------------------------------------------------------------------------- /ch05/css/images/ir-submit-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ir-submit-search.png -------------------------------------------------------------------------------- /ch04/source_files/field-icons-color.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/source_files/field-icons-color.psd -------------------------------------------------------------------------------- /ch05/Validation/jquery.validate.pack.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/Validation/jquery.validate.pack.js -------------------------------------------------------------------------------- /ch05/css/images/bg-form-messages-li.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form-messages-li.gif -------------------------------------------------------------------------------- /ch04/css/images/bg-form-fieldset-div.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/css/images/bg-form-fieldset-div.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-form-btm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-form-btm.png -------------------------------------------------------------------------------- /ch04/source_files/search-field-grunge.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/source_files/search-field-grunge.psd -------------------------------------------------------------------------------- /ch05/css/images/bg-form-fieldset-div.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form-fieldset-div.png -------------------------------------------------------------------------------- /ch05/css/images/bg-password-strength.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-password-strength.png -------------------------------------------------------------------------------- /ch04/css/images/ir-submit-create-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/css/images/ir-submit-create-profile.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-input-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-input-icons.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-input-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-input-search.png -------------------------------------------------------------------------------- /ch05/css/images/bg-form-messages-success.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/bg-form-messages-success.gif -------------------------------------------------------------------------------- /ch05/css/images/ir-submit-create-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ir-submit-create-profile.png -------------------------------------------------------------------------------- /ch05/css/images/ir-submit-edit-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ir-submit-edit-profile.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-input-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-input-gradient.png -------------------------------------------------------------------------------- /ch05/css/images/ir-submit-privacy-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ir-submit-privacy-settings.png -------------------------------------------------------------------------------- /ch05/css/images/ir-submit-submit-feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ir-submit-submit-feedback.png -------------------------------------------------------------------------------- /ch05/source_files/password-strength-sprite.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/source_files/password-strength-sprite.psd -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-form-fieldset-div.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-form-fieldset-div.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-input-icons-focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-input-icons-focus.png -------------------------------------------------------------------------------- /ch04/examples/css/images/bg-input-search-submit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch04/examples/css/images/bg-input-search-submit.png -------------------------------------------------------------------------------- /ch05/css/images/ir-submit-submit-save-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/FORMS1/HEAD/ch05/css/images/ir-submit-submit-save-password.png -------------------------------------------------------------------------------- /ch04/css/screen.css: -------------------------------------------------------------------------------- 1 | /* 2 | Fancy Form Design 3 | @author Jina Bolton, Tim Connell & Derek Featherstone 4 | ----------------------------------------------- 5 | */ 6 | 7 | @import "reset.css"; 8 | @import "layout.css"; 9 | @import "fancyforms.css"; 10 | 11 | -------------------------------------------------------------------------------- /ch05/css/screen.css: -------------------------------------------------------------------------------- 1 | /* 2 | Fancy Form Design 3 | @author Jina Bolton, Tim Connell & Derek Featherstone 4 | ----------------------------------------------- 5 | */ 6 | 7 | @import "reset.css"; 8 | @import "layout.css"; 9 | @import "fancyforms.css"; 10 | 11 | -------------------------------------------------------------------------------- /ch04/examples/css/screen.css: -------------------------------------------------------------------------------- 1 | /* 2 | Fancy Form Design 3 | @author Jina Bolton, Tim Connell & Derek Featherstone 4 | ----------------------------------------------- 5 | */ 6 | 7 | @import "reset.css"; 8 | @import "layout.css"; 9 | @import "fancyforms.css"; 10 | 11 | -------------------------------------------------------------------------------- /ch05/examples/email-availability.php: -------------------------------------------------------------------------------- 1 | $output = array(); 2 | $email = $_GET['username']; 3 | 4 | $taken = db_result(db_query("SELECT COUNT(u.email) FROM {users} u WHERE u.email = '%s'", $email)); 5 | 6 | if ($taken) { 7 | $output = true; 8 | ) 9 | else { 10 | $output = false; 11 | } 12 | 13 | print $output; -------------------------------------------------------------------------------- /ch05/css/ie.css: -------------------------------------------------------------------------------- 1 | /* !IE Hacks --------------------- */ /* Fix random positioning of labels within IE8 */ fieldset div { zoom: 1; } /* Adjust positioning of JS driven select fields */ fieldset span.selectbox-input-wrapper input { margin-top: -1px; } /* Has layourt fix */ fieldset div label { display: inline; } /* Adjust vertical align for labels */ fieldset label abbr { vertical-align: inherit; } -------------------------------------------------------------------------------- /ch03/template.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design Template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch04/template.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design Template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch04/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, blockquote, pre, abbr, acronym, address, code, 2 | em, img, dl, dt, dd, ol, ul, li, 3 | fieldset, form, label, legend, 4 | table, caption, tbody, tfoot, thead, tr, th, td { 5 | margin: 0; 6 | padding: 0; 7 | border: 0; 8 | vertical-align: baseline; 9 | } 10 | 11 | /* Unordered lists for good not evil */ 12 | ul { 13 | list-style: none; 14 | } 15 | 16 | /* Tables still need 'cellspacing="0"' in the markup. */ 17 | table { border-collapse: separate; border-spacing: 0; } 18 | caption, th, td { text-align: left; font-weight: normal; } 19 | table, td, th { vertical-align: middle; } 20 | 21 | /* Remove possible quote marks (") from ,
. */ 22 | blockquote:before, blockquote:after, q:before, q:after { content: ""; } 23 | blockquote, q { quotes: "" ""; } 24 | 25 | /* Remove annoying border on linked images. */ 26 | a img { border: none; } -------------------------------------------------------------------------------- /ch05/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, blockquote, pre, abbr, acronym, address, code, 2 | em, img, dl, dt, dd, ol, ul, li, 3 | fieldset, form, label, legend, 4 | table, caption, tbody, tfoot, thead, tr, th, td { 5 | margin: 0; 6 | padding: 0; 7 | border: 0; 8 | vertical-align: baseline; 9 | } 10 | 11 | /* Unordered lists for good not evil */ 12 | ul { 13 | list-style: none; 14 | } 15 | 16 | /* Tables still need 'cellspacing="0"' in the markup. */ 17 | table { border-collapse: separate; border-spacing: 0; } 18 | caption, th, td { text-align: left; font-weight: normal; } 19 | table, td, th { vertical-align: middle; } 20 | 21 | /* Remove possible quote marks (") from ,
. */ 22 | blockquote:before, blockquote:after, q:before, q:after { content: ""; } 23 | blockquote, q { quotes: "" ""; } 24 | 25 | /* Remove annoying border on linked images. */ 26 | a img { border: none; } -------------------------------------------------------------------------------- /ch04/examples/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, blockquote, pre, abbr, acronym, address, code, 2 | em, img, dl, dt, dd, ol, ul, li, 3 | fieldset, form, label, legend, 4 | table, caption, tbody, tfoot, thead, tr, th, td { 5 | margin: 0; 6 | padding: 0; 7 | border: 0; 8 | vertical-align: baseline; 9 | } 10 | 11 | /* Unordered lists for good not evil */ 12 | ul { 13 | list-style: none; 14 | } 15 | 16 | /* Tables still need 'cellspacing="0"' in the markup. */ 17 | table { border-collapse: separate; border-spacing: 0; } 18 | caption, th, td { text-align: left; font-weight: normal; } 19 | table, td, th { vertical-align: middle; } 20 | 21 | /* Remove possible quote marks (") from ,
. */ 22 | blockquote:before, blockquote:after, q:before, q:after { content: ""; } 23 | blockquote, q { quotes: "" ""; } 24 | 25 | /* Remove annoying border on linked images. */ 26 | a img { border: none; } -------------------------------------------------------------------------------- /ch03/change-password.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Change Password 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |

Change Password

15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 |
38 | 39 |
40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /ch04/change-password.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Change Password 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |

Change Password

15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 |
38 | 39 |
40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /ch03/advanced-search.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Advanced Search 7 | 8 | 9 | 10 | 11 |
12 | 13 |

Advanced Search

14 |
15 |
16 | 17 |
18 | 19 | 23 | 24 | 25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | 37 |
38 | 39 | 40 | 41 |
42 | 43 |
44 |
45 |
46 | 47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /ch03/feedback.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Fancy Form Design: Feedback 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

17 | Feedback 18 |

19 |
20 |
21 | 22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 | 32 |
33 |
34 | 35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /ch04/css/layout.css: -------------------------------------------------------------------------------- 1 | /* 2 | ----------------------------------------------- 3 | Example Defaults 4 | ----------------------------------------------- 5 | + Layout 6 | + Base Typography 7 | */ 8 | 9 | /* !Layout 10 | --------------------- */ 11 | html { 12 | background: #eee; 13 | } 14 | 15 | body { 16 | background: #eee url(images/bg-body.png); 17 | color: #333; 18 | font: 75%/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; 19 | padding: 20px; 20 | } 21 | 22 | #container { 23 | background: url(images/bg-form-btm.png) no-repeat 100% 100%; 24 | padding-bottom: 18px; 25 | width: 600px; 26 | } 27 | 28 | #container-inner { 29 | background: #fff url(images/bg-form.gif) repeat-x; 30 | border: 1px solid #fff; 31 | border-color: #fff #fff #ababab; 32 | padding: 20px; 33 | } 34 | 35 | 36 | /* !Base Typography 37 | --------------------- */ 38 | a { 39 | text-decoration: none; 40 | color: #26808c; 41 | } 42 | 43 | a:hover, 44 | a:focus { 45 | text-decoration: underline; 46 | } 47 | 48 | p { 49 | margin: 1em 0; 50 | padding: 0; 51 | } 52 | 53 | strong { 54 | font-weight: bold; 55 | } 56 | 57 | h1 { 58 | border-bottom: 1px solid #fff; 59 | background: url(images/bg-ccc.gif) 0 100% repeat-x; 60 | color: #666666; 61 | font-size: 2.5em; 62 | font-weight: normal; 63 | line-height: 1; 64 | margin: 0 0 0.7em; 65 | padding: 0 0 28px; 66 | } 67 | 68 | input, 69 | textarea, 70 | select { 71 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 72 | } -------------------------------------------------------------------------------- /ch05/css/layout.css: -------------------------------------------------------------------------------- 1 | /* 2 | ----------------------------------------------- 3 | Example Defaults 4 | ----------------------------------------------- 5 | + Layout 6 | + Base Typography 7 | */ 8 | 9 | /* !Layout 10 | --------------------- */ 11 | html { 12 | background: #eee; 13 | } 14 | 15 | body { 16 | background: #eee url(images/bg-body.png); 17 | color: #333; 18 | font: 75%/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; 19 | padding: 20px; 20 | } 21 | 22 | #container { 23 | background: url(images/bg-form-btm.png) no-repeat 100% 100%; 24 | padding-bottom: 18px; 25 | width: 600px; 26 | } 27 | 28 | #container-inner { 29 | background: #fff url(images/bg-form.gif) repeat-x; 30 | border: 1px solid #fff; 31 | border-color: #fff #fff #ababab; 32 | padding: 20px; 33 | } 34 | 35 | 36 | /* !Base Typography 37 | --------------------- */ 38 | a { 39 | text-decoration: none; 40 | color: #26808c; 41 | } 42 | 43 | a:hover, 44 | a:focus { 45 | text-decoration: underline; 46 | } 47 | 48 | p { 49 | margin: 1em 0; 50 | padding: 0; 51 | } 52 | 53 | strong { 54 | font-weight: bold; 55 | } 56 | 57 | h1 { 58 | border-bottom: 1px solid #fff; 59 | background: url(images/bg-ccc.gif) 0 100% repeat-x; 60 | color: #666666; 61 | font-size: 2.5em; 62 | font-weight: normal; 63 | line-height: 1; 64 | margin: 0 0 0.7em; 65 | padding: 0 0 28px; 66 | } 67 | 68 | input, 69 | textarea, 70 | select { 71 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 72 | } -------------------------------------------------------------------------------- /ch04/examples/css/layout.css: -------------------------------------------------------------------------------- 1 | /* 2 | ----------------------------------------------- 3 | Example Defaults 4 | ----------------------------------------------- 5 | + Layout 6 | + Base Typography 7 | */ 8 | 9 | /* !Layout 10 | --------------------- */ 11 | html { 12 | background: #eee; 13 | } 14 | 15 | body { 16 | background: #eee url(images/bg-body.gif); 17 | color: #333; 18 | font: 75%/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; 19 | padding: 20px; 20 | } 21 | 22 | #container { 23 | background: url(images/bg-form-btm.png) no-repeat 100% 100%; 24 | padding-bottom: 18px; 25 | width: 600px; 26 | } 27 | 28 | #container-inner { 29 | background: #fff url(images/bg-form.gif) repeat-x; 30 | border: 1px solid #fff; 31 | border-color: #fff #fff #ababab; 32 | padding: 20px; 33 | } 34 | 35 | 36 | /* !Base Typography 37 | --------------------- */ 38 | a { 39 | text-decoration: none; 40 | color: #26808c; 41 | } 42 | 43 | a:hover, 44 | a:focus { 45 | text-decoration: underline; 46 | } 47 | 48 | p { 49 | margin: 1em 0; 50 | padding: 0; 51 | } 52 | 53 | strong { 54 | font-weight: bold; 55 | } 56 | 57 | h1 { 58 | border-bottom: 1px solid #fff; 59 | background: url(images/bg-ccc.gif) 0 100% repeat-x; 60 | color: #666666; 61 | font-size: 2.5em; 62 | font-weight: normal; 63 | line-height: 1; 64 | margin: 0 0 0.7em; 65 | padding: 0 0 28px; 66 | } 67 | 68 | input, 69 | textarea, 70 | select { 71 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 72 | } -------------------------------------------------------------------------------- /ch04/advanced-search.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Advanced Search 7 | 8 | 9 | 10 | 11 |
12 | 13 |

Advanced Search

14 |
15 |
16 | 17 |
18 | 19 | 23 | 24 | 25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | 37 |
38 | 39 | 40 | 41 |
42 | 43 |
44 |
45 |
46 | 47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /ch04/feedback.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Fancy Form Design: Feedback 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

17 | Feedback 18 |

19 |
20 |
21 | 22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 | 32 |
33 |
34 | 35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /ch05/change-password.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Change Password 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Change Password

23 |
24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 | 41 |
42 | 43 | 44 |
45 | 46 |
47 |
48 |
49 | 50 |
51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ch05/feedback.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Feedback 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Feedback

23 |
24 |
25 |

Tell us what you think about the site. What is working for you? What would you like to see inproved? Your opinion is very valuable to us. All fields are required.

26 | 27 |
28 | 29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 |
37 | 38 | 39 |
40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /ch05/examples/ajax-submit.html: -------------------------------------------------------------------------------- 1 | Fancy Form Design: Sign Up
Feedback

Tell us what you think about the site. What is working for you? What would you like to see inproved? Your opinion is very valuable to us.

-------------------------------------------------------------------------------- /ch05/advanced-search.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Advanced Search 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Advanced Search

23 |
24 |
25 | 26 |
27 | 28 | 32 |
33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 | 41 |
42 | 43 | 48 |
49 | 50 | 51 |
52 | 53 |
54 |
55 |
56 | 57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /ch04/examples/fieldset.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 | 63 |
64 |
65 | Sign Up 66 | 67 |

Hi there! We’re excited to have you as a part of our community. To get started, please create an account. All fields are required.

68 | 69 |

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

70 |
71 |
72 | 73 |
74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /ch05/js/jquery.passroids.min.js: -------------------------------------------------------------------------------- 1 | jQuery.fn.passroids=function(o){var o=jQuery.extend({main:'#password',verify:null,button:null,minimum:0},o);jQuery(o.main).after('
');if(o.verify!=null){jQuery(o.verify).after('
');} 2 | if(o.button!=null){jQuery(o.button).after('
');} 3 | if(o.button!=null){jQuery(o.button).attr('disabled','true');} 4 | function testPass(v){var s=0 5 | if(v.length<5){s=(s+3);} 6 | else if(v.length>4&&v.length<8){s=(s+6);} 7 | else if(v.length>7&&v.length<16){s=(s+12);} 8 | else if(v.length>15){s=(s+18);} 9 | if(v.match(/[a-z]/)){s=(s+1);} 10 | if(v.match(/[A-Z]/)){s=(s+5);} 11 | if(v.match(/\d+/)){s=(s+5);} 12 | if(v.match(/(.*[0-9].*[0-9].*[0-9])/)){s=(s+5);} 13 | if(v.match(/.[!,@,#,$,%,^,&,*,?,_,~]/)){s=(s+5);} 14 | if(v.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){s=(s+5);} 15 | if(v.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){s=(s+4);} 16 | if(v.match(/([a-zA-Z])/)&&v.match(/([0-9])/)){s=(s+4);} 17 | if(v.match(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/)){s=(s+7);} 18 | return s;} 19 | function evalScore(s){var strength=0;switch(true){case s<=13:strength=0;break;case s>=14&&s<=27:strength=1;break;case s>=28&&s<=40:strength=2;break;case s>=41:strength=3;break;} 20 | return strength;} 21 | function changeButtonState(v){var val=jQuery(o.main).val();var s=testPass(val);var strength=evalScore(s);if(o.button!=null){if(v==1&&strength>=o.minimum){jQuery(o.button).attr('disabled','');jQuery('#psr_strength_notice').html('');} 22 | else{jQuery(o.button).attr('disabled','true');if(strengthStrength: '+levels[strength]+'');});if(o.verify!=null){jQuery(o.verify).keyup(function(){var main=jQuery(o.main).val();var verify=jQuery(o.verify).val();if(main==verify){jQuery('#psr_verify').html('');changeButtonState(1);}});jQuery(o.verify).blur(function(){var main=jQuery(o.main).val();var verify=jQuery(o.verify).val();if(main!=verify){jQuery('#psr_verify').html('Passwords do not match');changeButtonState(0);}});}});}; -------------------------------------------------------------------------------- /ch05/markup-conditional-questions.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
    4 |
  • 5 | 6 | 7 |
    • 8 |
9 |
10 | 11 |
12 | Gift Wrapping Details 13 |

If you would like gift wrapping please fill out the following

14 |
15 | 16 |
    17 |
  • 18 | 19 | 20 |
    • 21 |
  • 22 | 23 | 24 |
    • 25 |
  • 26 | 27 | 28 |
    • 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /ch04/examples/styling-form-elements-search.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Search 7 | 8 | 9 | 105 | 106 | 107 | 108 |
109 | 123 |
124 | 125 | 126 | -------------------------------------------------------------------------------- /ch05/Validation/init.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | /* 4 | * Form Validation 5 | */ 6 | 7 | // Set Defaults 8 | jQuery.validator.setDefaults({ 9 | errorElement: "em", 10 | success: function(label) { 11 | label.addClass("valid"); 12 | }, 13 | showErrors: function(errorMap, errorList) { 14 | var numErrors = this.numberOfInvalids(), 15 | errorContainerVisible = errorContainer.is(':visible'); 16 | 17 | this.defaultShowErrors(); 18 | 19 | if (numErrors && errorContainerVisible) { 20 | errorContainer 21 | .html("Your form contains " + numErrors + " error" + ((numErrors == 1) ? '' : "s") + " that must be corrected before continuing") 22 | .show(); 23 | $(this.currentForm).removeClass('valid'); 24 | } 25 | else if (errorContainerVisible) { 26 | errorContainer 27 | .text('All errors have been corrected, please continue') 28 | .show(); 29 | $(this.currentForm).addClass('valid'); 30 | } 31 | else { 32 | errorContainer.hide(); 33 | } 34 | }, 35 | errorPlacement: function(error, element) { 36 | // Listed elements 37 | if ( (element.attr("type") == "radio") || (element.attr("type") == "checkbox") ) { 38 | error.insertAfter($(element).parents("ul").eq(0)).wrap(""); 39 | } 40 | 41 | // Select elments 42 | else if (element.is("select") && $(element).parent("div.group-date").size()) { 43 | // Insert after last select element 44 | error.insertAfter($("select:last", element.parent("div.group-date"))); 45 | } 46 | // All other 47 | else { 48 | error.insertAfter(element); 49 | } 50 | }, 51 | focusInvalid: false 52 | }); 53 | 54 | // Add a placeholder for form messages 55 | errorContainer = $('
').hide(); 56 | errorContainer.insertBefore('div.semantic-form'); 57 | 58 | // Bind event to invalid form submission 59 | $("div.semantic-form").parent("form").bind("invalid-form.validate", function(e, validator) { 60 | errorContainer.show(); 61 | $('html,body').animate( 62 | {scrollTop: $("div#form-messages").offset().top}, 1000 63 | ); 64 | }); 65 | 66 | // Validate on hide conditional section event 67 | $("div.semantic-form").parent("form").bind("clearConditionalSection", function (event, conditionalSection) { 68 | if ($("#form-messages:visible").size()) { 69 | $(this).valid(); 70 | } 71 | }); 72 | 73 | // Override default messages 74 | $.extend($.validator.messages, { 75 | required : 'ErrorThis information is required', 76 | requiredDate : "This information is required ", 77 | digits : "Please enter a numeric value", 78 | }); 79 | 80 | /* 81 | * Initiate Validation Plugin 82 | */ 83 | $('form').validate({ 84 | rules: { 85 | /* -- Section 1 -- */ 86 | 87 | // Sample Text 88 | 'sample-form-item-text' : { 89 | required : true 90 | }, 91 | // Sample Radio 92 | 'sample-form-item-radio' : { 93 | required: true 94 | }, 95 | 96 | /* -- Conditional Section -- */ 97 | // Sample Text 2 98 | 'sample-form-item-text-2' : { 99 | required: true 100 | }, 101 | 102 | /* -- Matrix fields -- */ 103 | 104 | // Date of Birth 105 | 'q31318:q4value[d]' : { 106 | requiredDate: true 107 | }, 108 | 109 | // File Upload - Existing 110 | 'sample-file-upload-existing' : { 111 | requiredFile: true 112 | } 113 | } 114 | }); 115 | }); -------------------------------------------------------------------------------- /ch05/examples/conditional-sections.html: -------------------------------------------------------------------------------- 1 | Fancy Form Design: Sign Up

Conditional Demo

Gift Wrapping Details

If you would like gift wrapping please fill out the following

-------------------------------------------------------------------------------- /ch04/examples/styling-form-elements.html: -------------------------------------------------------------------------------- 1 | Fancy Form Design: Sign Up
Feedback

Tell us what you think about the site. What is working for you? What would you like to see inproved? Your opinion is very valuable to us.

-------------------------------------------------------------------------------- /ch05/privacy-settings.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Privacy Settings 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |

Privacy Settings

24 |
25 |
26 |

We understand that your health and fitness is personal. We respect your privacy. Please let us know what you would like to be visable.

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
PrivateContactsPublic
Gender
Birth day and month
Birth year
Location
Fitness journal entries
This can be changed on a post-by-post basis.
Your photos
This can be changed on a post-by-post basis.
Your fitness stats
89 | 90 | 91 |
92 | 93 |
94 |
95 |
96 | 97 |
98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /ch05/source_files/jquery.passroids.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * jQuery PassRoids - Password strength meter and match verifier 4 | * http://www.thecreativeoutfit.com 5 | * 6 | */ 7 | 8 | jQuery.fn.passroids = function(o) { 9 | 10 | // Defaults ###################################################################### 11 | var o = jQuery.extend( { 12 | main: '#password', 13 | verify: null, 14 | button: null, 15 | minimum: 0 16 | },o); 17 | 18 | // Create containers ############################################################# 19 | jQuery(o.main).after('
'); 20 | 21 | if (o.verify!=null){ jQuery(o.verify).after('
'); } 22 | if (o.button!=null){ jQuery(o.button).after('
'); } 23 | 24 | // Check to disable button initially ############################################# 25 | if(o.button!=null){ 26 | jQuery(o.button).attr('disabled','true'); 27 | } 28 | 29 | // Check Function ################################################################ 30 | function testPass(v){ 31 | var s = 0 32 | // PASSWORD LENGTH ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 33 | // Length of 4 or less 34 | if (v.length<5){ s = (s+3); } 35 | // Length between 5 and 7 36 | else if (v.length>4 && v.length<8){ s = (s+6); } 37 | // Length between 8 and 15 38 | else if (v.length>7 && v.length<16){ s = (s+12); } 39 | // Length of 16 or more 40 | else if (v.length>15){ s = (s+18); } 41 | // LETTERS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 42 | // At least one lower case letter 43 | if (v.match(/[a-z]/)){ s = (s+1); } 44 | // At least one upper case letter 45 | if (v.match(/[A-Z]/)){ s = (s+5); } 46 | // NUMBERS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 47 | // At least one number 48 | if (v.match(/\d+/)){ s = (s+5); } 49 | // At least three numbers 50 | if (v.match(/(.*[0-9].*[0-9].*[0-9])/)){ s = (s+5); } 51 | // SPECIAL CHARACTERS ~~~~~~~~~~~~~~~~~~~~~~~~ 52 | // At least one special character 53 | if (v.match(/.[!,@,#,$,%,^,&,*,?,_,~]/)){ s = (s+5); } 54 | // At least two special characters 55 | if (v.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ s = (s+5); } 56 | // COMBOS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 57 | // Both upper and lower case 58 | if (v.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){ s = (s+4); } 59 | // Both letters and numbers 60 | if (v.match(/([a-zA-Z])/) && v.match(/([0-9])/)){ s = (s+4); } 61 | // Letters, numbers, and special characters 62 | if (v.match(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/)){ s = (s+7); } 63 | // Return the score ~~~~~~~~~~~~~~~~~~~~~~~~~~ 64 | return s; 65 | } 66 | 67 | // Evaluate score ################################################################ 68 | function evalScore(s){ 69 | var strength = 0; 70 | switch(true){ 71 | case s<=13: 72 | strength = 0; 73 | break; 74 | case s>=14 && s<=27: 75 | strength = 1; 76 | break; 77 | case s>=28 && s<=40: 78 | strength = 2; 79 | break; 80 | case s>=41: 81 | strength = 3; 82 | break; 83 | } 84 | return strength; 85 | } 86 | 87 | // Change button state ########################################################### 88 | function changeButtonState(v){ 89 | var val = jQuery(o.main).val(); 90 | var s = testPass(val); 91 | var strength = evalScore(s); 92 | if (o.button!=null){ 93 | if(v==1 && strength>=o.minimum){ 94 | jQuery(o.button).attr('disabled',''); 95 | jQuery('#psr_strength_notice').html(''); 96 | } 97 | else{ 98 | jQuery(o.button).attr('disabled','true'); 99 | if (strengthStrength: ' + levels[strength] + ''); 125 | }); 126 | 127 | // Check for verification ~~~~~~~~~~~~~~~~~~~~~~~~ 128 | if(o.verify!=null){ 129 | // Clear message (on keyup) 130 | jQuery(o.verify).keyup(function(){ 131 | var main = jQuery(o.main).val(); 132 | var verify = jQuery(o.verify).val(); 133 | if(main==verify){ 134 | jQuery('#psr_verify').html(''); 135 | changeButtonState(1); 136 | } 137 | }); 138 | 139 | // Check verify 140 | jQuery(o.verify).blur(function(){ 141 | var main = jQuery(o.main).val(); 142 | var verify = jQuery(o.verify).val(); 143 | if(main!=verify){ 144 | jQuery('#psr_verify').html('Passwords do not match'); 145 | changeButtonState(0); 146 | } 147 | }); 148 | } 149 | }); 150 | }; -------------------------------------------------------------------------------- /ch05/js/jquery.selectbox.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery selectbox plugin 3 | * 4 | * Copyright (c) 2007 Sadri Sahraoui (brainfault.com) 5 | * Licensed under the GPL license and MIT: 6 | * http://www.opensource.org/licenses/GPL-license.php 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * 9 | * The code is inspired from Autocomplete plugin (http://www.dyve.net/jquery/?autocomplete) 10 | * 11 | * Revision: $Id$ 12 | * Version: 0.5 13 | * 14 | * Changelog : 15 | * Version 0.5 16 | * - separate css style for current selected element and hover element which solve the highlight issue 17 | * Version 0.4 18 | * - Fix width when the select is in a hidden div @Pawel Maziarz 19 | * - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz 20 | */ 21 | jQuery.fn.extend({ 22 | selectbox: function(options) { 23 | return this.each(function() { 24 | new jQuery.SelectBox(this, options); 25 | }); 26 | } 27 | }); 28 | 29 | 30 | /* pawel maziarz: work around for ie logging */ 31 | if (!window.console) { 32 | var console = { 33 | log: function(msg) { 34 | } 35 | } 36 | } 37 | /* */ 38 | 39 | jQuery.SelectBox = function(selectobj, options) { 40 | 41 | var opt = options || {}; 42 | opt.inputClass = opt.inputClass || "selectbox"; 43 | opt.containerClass = opt.containerClass || "selectbox-wrapper"; 44 | opt.hoverClass = opt.hoverClass || "current"; 45 | opt.currentClass = opt.selectedClass || "selected" 46 | opt.debug = opt.debug || false; 47 | 48 | var elm_id = selectobj.id; 49 | var active = -1; 50 | var inFocus = false; 51 | var hasfocus = 0; 52 | //jquery object for select element 53 | var $select = $(selectobj); 54 | // jquery container object 55 | var $container = setupContainer(opt); 56 | //jquery input object 57 | var $input = setupInput(opt); 58 | // hide select and append newly created elements 59 | $select.hide().before($input).before($container); 60 | 61 | 62 | init(); 63 | 64 | $input 65 | .click(function(){ 66 | if (!inFocus) { 67 | $container.toggle(); 68 | } 69 | }) 70 | .focus(function(){ 71 | if ($container.not(':visible')) { 72 | inFocus = true; 73 | $container.show(); 74 | } 75 | }) 76 | .keydown(function(event) { 77 | switch(event.keyCode) { 78 | case 38: // up 79 | event.preventDefault(); 80 | moveSelect(-1); 81 | break; 82 | case 40: // down 83 | event.preventDefault(); 84 | moveSelect(1); 85 | break; 86 | //case 9: // tab 87 | case 13: // return 88 | event.preventDefault(); // seems not working in mac ! 89 | $('li.'+opt.hoverClass).trigger('click'); 90 | break; 91 | case 27: //escape 92 | hideMe(); 93 | break; 94 | } 95 | }) 96 | .blur(function() { 97 | if ($container.is(':visible') && hasfocus > 0 ) { 98 | if(opt.debug) console.log('container visible and has focus') 99 | } else { 100 | hideMe(); 101 | } 102 | }); 103 | 104 | 105 | function hideMe() { 106 | hasfocus = 0; 107 | $container.hide(); 108 | } 109 | 110 | function init() { 111 | $container.append(getSelectOptions($input.attr('id'))).hide(); 112 | var width = $input.css('width'); 113 | $container.width(width); 114 | } 115 | 116 | function setupContainer(options) { 117 | var container = document.createElement("div"); 118 | $container = $(container); 119 | $container.attr('id', elm_id+'_container'); 120 | $container.addClass(options.containerClass); 121 | 122 | return $container; 123 | } 124 | 125 | function setupInput(options) { 126 | var input = document.createElement("input"); 127 | var $input = $(input); 128 | $input.attr("id", elm_id+"_input"); 129 | $input.attr("type", "text"); 130 | $input.addClass(options.inputClass); 131 | $input.attr("autocomplete", "off"); 132 | $input.attr("readonly", "readonly"); 133 | $input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie 134 | 135 | return $input; 136 | } 137 | 138 | function moveSelect(step) { 139 | var lis = $("li", $container); 140 | if (!lis) return; 141 | 142 | active += step; 143 | 144 | if (active < 0) { 145 | active = 0; 146 | } else if (active >= lis.size()) { 147 | active = lis.size() - 1; 148 | } 149 | 150 | lis.removeClass(opt.hoverClass); 151 | 152 | $(lis[active]).addClass(opt.hoverClass); 153 | } 154 | 155 | function setCurrent() { 156 | var li = $("li."+opt.currentClass, $container).get(0); 157 | var ar = (''+li.id).split('_'); 158 | var el = ar[ar.length-1]; 159 | $select.val(el); 160 | $input.val($(li).html()); 161 | return true; 162 | } 163 | 164 | // select value 165 | function getCurrentSelected() { 166 | return $select.val(); 167 | } 168 | 169 | // input value 170 | function getCurrentValue() { 171 | return $input.val(); 172 | } 173 | 174 | function getSelectOptions(parentid) { 175 | var select_options = new Array(); 176 | var ul = document.createElement('ul'); 177 | $select.children('option').each(function() { 178 | var li = document.createElement('li'); 179 | li.setAttribute('id', parentid + '_' + $(this).val()); 180 | li.innerHTML = $(this).html(); 181 | if ($(this).is(':selected')) { 182 | $input.val($(this).html()); 183 | $(li).addClass(opt.currentClass); 184 | } 185 | ul.appendChild(li); 186 | $(li) 187 | .mouseover(function(event) { 188 | hasfocus = 1; 189 | if (opt.debug) console.log('over on : '+this.id); 190 | jQuery(event.target, $container).addClass(opt.hoverClass); 191 | }) 192 | .mouseout(function(event) { 193 | hasfocus = -1; 194 | if (opt.debug) console.log('out on : '+this.id); 195 | jQuery(event.target, $container).removeClass(opt.hoverClass); 196 | }) 197 | .click(function(event) { 198 | var fl = $('li.'+opt.hoverClass, $container).get(0); 199 | if (opt.debug) console.log('click on :'+this.id); 200 | $('li.'+opt.currentClass).removeClass(opt.currentClass); 201 | $(this).addClass(opt.currentClass); 202 | setCurrent(); 203 | hideMe(); 204 | }); 205 | }); 206 | return ul; 207 | } 208 | 209 | }; 210 | -------------------------------------------------------------------------------- /ch04/css/fancyforms.css: -------------------------------------------------------------------------------- 1 | /* 2 | ----------------------------------------------- 3 | Fancy Form Styling 4 | ----------------------------------------------- 5 | + General Form Styling 6 | - Fieldsets & Legends 7 | - Introduction Text 8 | - Fields 9 | + Sign Up Form 10 | - Log In link 11 | - Date of Birth 12 | - Submit 13 | */ 14 | 15 | /* !General Form Styling 16 | --------------------- */ 17 | /* -- !Fieldsets & Legends -- */ 18 | fieldset { 19 | border: none; 20 | position: relative; 21 | padding: 20px 0 0; 22 | } 23 | 24 | /* 25 | fieldset legend span { 26 | border-bottom: 1px solid #fff; 27 | background: url(images/bg-ccc.gif) 0 100% repeat-x; 28 | display: block; 29 | font-size: 2.25em; 30 | line-height: 1; 31 | margin: 20px 0; 32 | padding-bottom: 20px; 33 | position: absolute; 34 | width: 560px; 35 | } 36 | 37 | fieldset fieldset { 38 | padding: 20px; 39 | } 40 | */ 41 | 42 | /* -- !Introduction Text -- */ 43 | .introduction { 44 | font-size: 1.5em; 45 | margin: 0 0 2em; 46 | } 47 | 48 | /* -- !Fields -- */ 49 | fieldset div { 50 | background: url(images/bg-form-fieldset-div.png) repeat-y 0 0; 51 | margin: 0 0 10px; 52 | overflow: hidden; 53 | padding: 5px 5px 5px 0; 54 | } 55 | 56 | fieldset div.controls { 57 | margin: 25px 0 0; 58 | padding: 0; 59 | } 60 | 61 | /* Labels */ 62 | fieldset div label { 63 | color: #666; 64 | float: left; 65 | font-size: 1.16em; 66 | font-weight: bold; 67 | line-height: 1.1; 68 | margin: 9px 20px 0 0; 69 | width: 140px; 70 | } 71 | 72 | /* Input defaults */ 73 | fieldset div input, 74 | fieldset div textarea, 75 | fieldset div select { 76 | color: #333; 77 | display: block; 78 | font-size: 14px; 79 | font-family: Arial, Helvetica, sans-serif; 80 | float: left; 81 | line-height: 1; 82 | margin: 0; 83 | } 84 | 85 | /* Text inputs */ 86 | fieldset div input { 87 | padding: 6px 3px; 88 | width: 288px; 89 | } 90 | 91 | /* Select menus */ 92 | fieldset div select { 93 | padding: 0 0 0 3px; 94 | width: 291px; 95 | } 96 | 97 | /* Textareas */ 98 | fieldset div textarea { 99 | height: 89px; 100 | padding: 3px; 101 | width: 269px; 102 | } 103 | 104 | /* File Upload */ 105 | fieldset div input[type=file] { 106 | border: inherit; 107 | padding: inherit; 108 | width: auto; 109 | } 110 | 111 | /* Radio buttons + checkboxes */ 112 | fieldset div ul { 113 | float: left; 114 | margin: 5px 0 0 160px; 115 | } 116 | 117 | fieldset div ul li { 118 | margin: 0 0 5px; 119 | padding: 0; 120 | } 121 | 122 | fieldset div ul li label { 123 | display: inline; 124 | float: none; 125 | font-size: 1em; 126 | font-weight: normal; 127 | margin: 0; 128 | padding: 0; 129 | } 130 | 131 | fieldset div ul li input { 132 | border: inherit; 133 | display: inline; 134 | margin: 0 5px 0 0; 135 | padding: 0; 136 | width: auto; 137 | } 138 | 139 | /* Submit */ 140 | fieldset div.controls { 141 | background: none; 142 | } 143 | 144 | fieldset div.controls input { 145 | float: right; 146 | width: auto; 147 | } 148 | 149 | /* !Sign Up Form 150 | --------------------- */ 151 | /* -- Login -- */ 152 | #container { 153 | position: relative; 154 | } 155 | 156 | #sign-up .log-in { 157 | background: #eaeaea; 158 | margin: 0; 159 | line-height: 1; 160 | padding: 10px 12px; 161 | position: absolute; 162 | right: 20px; 163 | top: 30px; 164 | } 165 | 166 | #sign-up .log-in a { 167 | font-weight: bold; 168 | } 169 | 170 | /* -- !Date of Birth -- */ 171 | fieldset fieldset#section-dob { 172 | background: url(images/bg-form-fieldset-div.png) repeat-y 0 0; 173 | color: #666; 174 | margin: 0 0 10px; 175 | padding: 0; 176 | } 177 | 178 | fieldset fieldset#section-dob legend span { 179 | background: none; 180 | border: none; 181 | font-size: 1.16em; 182 | font-weight: bold; 183 | line-height: 1.1; 184 | margin: 9px 20px 0 0; 185 | padding: 0; 186 | position: absolute; 187 | width: 140px; 188 | } 189 | 190 | fieldset fieldset#section-dob div { 191 | background: none; 192 | float: left; 193 | margin: 0; 194 | } 195 | 196 | fieldset fieldset#section-dob div label { 197 | position: absolute; 198 | top: -999em; 199 | } 200 | 201 | fieldset fieldset#section-dob div select { 202 | width: 85px; 203 | } 204 | 205 | /* Line up to grid */ 206 | fieldset fieldset#section-dob div select#dob_month { 207 | margin: 0 0 0 160px; 208 | width: 108px; 209 | } 210 | 211 | /* Whitespace */ 212 | fieldset fieldset#section-dob div select#dob_day { 213 | margin: 0 5px; 214 | } 215 | 216 | fieldset fieldset#section-dob em.note { 217 | clear: left; 218 | display: block; 219 | margin: 0 0 0.5em 165px; 220 | font-style: normal; 221 | } 222 | 223 | /* -- !Terms of Service Agreement -- */ 224 | #field-agree-tos { 225 | background: none; 226 | } 227 | 228 | /* -- !Your Profile Link -- */ 229 | #field-profile-link .profile-link-prefix { 230 | display: block; 231 | float: left; 232 | font-size: 1.16em; 233 | line-height: 1.1; 234 | margin: 9px 10px 0 0; 235 | text-align: right; 236 | width: 133px; 237 | } 238 | 239 | #field-profile-link input { 240 | width: 145px; 241 | } 242 | 243 | /* -- !Submit -- */ 244 | #sign-up fieldset .controls input#submit { 245 | background: url(images/ir-submit-create-profile.png) no-repeat 0 0; 246 | border: none; 247 | cursor: pointer; 248 | float: right; 249 | height: 32px; 250 | margin: 0; 251 | overflow: hidden; 252 | padding: 32px 0 0 136px; 253 | width: 136px; 254 | } -------------------------------------------------------------------------------- /ch05/js/init.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | /* 4 | * Enhancements 5 | */ 6 | 7 | // Password Strength 8 | if ($('#sign-up').size()) { 9 | $.getScript( 10 | 'js/jquery.passroids.min.js', 11 | function() { 12 | $('form').passroids({ 13 | main : "#password" 14 | }); 15 | } 16 | ); 17 | } 18 | 19 | // Selectbox styling 20 | if ($('form select').size()) { 21 | $.getScript( 22 | 'js/jquery.selectbox.min.js', 23 | function() { 24 | $('select').selectbox(); 25 | // Wrap inputs with styling helper 26 | $('input.selectbox').each(function() { 27 | $(this).wrap(''); 28 | }); 29 | } 30 | ); 31 | } 32 | 33 | /* 34 | * Form Validation 35 | */ 36 | 37 | // Set Defaults 38 | jQuery.validator.setDefaults({ 39 | errorElement : 'a', 40 | wrapper : 'li', 41 | errorLabelContainer : '#form-messages ul', 42 | focusInvalid: false, 43 | onfocusout: false, 44 | highlight: function(element, errorClass) { 45 | var errorContainer = $(element).parents('div').eq(0), 46 | existingIcon = $('img.icon', errorContainer); 47 | 48 | // Account for groups of questions 49 | if ($(element).parents('.group').size()) { 50 | errorContainer = $(element).parents('.group'); 51 | } 52 | 53 | // Replace any existing icon with error icon 54 | if (existingIcon.size()) { 55 | existingIcon.replaceWith('error'); 56 | } 57 | // Otherwise append to container 58 | else { 59 | errorContainer.append('error'); 60 | } 61 | 62 | // Highlight field 63 | $(element).addClass(errorClass); 64 | 65 | }, 66 | unhighlight: function(element, errorClass) { 67 | var errorContainer = $(element).parents('div').eq(0); 68 | 69 | // Account for groups of questions 70 | if ($(element).parents('.group').size()) { 71 | errorContainer = $(element).parents('.group'); 72 | } 73 | 74 | // Replace icon with that of success 75 | if ($(':input.error', errorContainer).size() <= 1) { 76 | $('img.icon', errorContainer).replaceWith('Valid'); 77 | } 78 | 79 | // Unhighlight field 80 | $(element).removeClass(errorClass); 81 | }, 82 | showErrors: function(errorMap, errorList) { 83 | var numErrors = this.numberOfInvalids(); 84 | 85 | this.defaultShowErrors(); 86 | 87 | // Populate/update error message 88 | if (!$('h2', errorContainer).size()) { 89 | errorContainer.prepend('

'); 90 | } 91 | if (numErrors) { 92 | $('h2', errorContainer).html('Oops! Your form contains ' + numErrors + " error" + ((numErrors == 1) ? '' : 's') + ':'); 93 | $(this.currentForm).removeClass('valid'); 94 | } 95 | // Success is ours! 96 | else { 97 | $('h2', errorContainer).text('All errors have been corrected, please continue'); 98 | $(this.currentForm).addClass('valid'); 99 | } 100 | // Setup links 101 | $('a', errorContainer).each( function() { 102 | var el = $(this), 103 | fieldID = el.attr('htmlfor'), 104 | field = $('#' + fieldID); 105 | 106 | // Add href attribute to linsk 107 | el.attr('href', '#' + fieldID); 108 | 109 | // Focus on click 110 | el.bind('click', function() { 111 | field.trigger('focus'); 112 | $('html,body').animate( 113 | {scrollTop: field.offset().top - 20}, 100 114 | ); 115 | return false; 116 | }); 117 | }); 118 | }, 119 | submitHandler: function(form) { 120 | $(form).hide(); 121 | $('

Thank you for signing up. Please check your email for further instructions.

') 122 | .insertBefore(form) 123 | .show(); 124 | $('html,body').animate( 125 | {scrollTop: $("div#form-messages").offset().top}, 1000 126 | ); 127 | } 128 | }); 129 | 130 | // Add a placeholder for form messages 131 | var errorContainer = $('
    ').hide(); 132 | errorContainer.insertBefore('fieldset div:first'); 133 | 134 | // Bind event to invalid form submission 135 | $("form").bind("invalid-form.validate", function(e, validator) { 136 | errorContainer.show(); 137 | $('html,body').animate( 138 | {scrollTop: errorContainer.offset().top - 20}, 100 139 | ); 140 | 141 | errorContainer.focus(); 142 | }); 143 | 144 | // Override default messages 145 | $.extend($.validator.messages, { 146 | required : "This field is required", 147 | email : "Please enter a valid email", 148 | digits : "Please enter a numeric value" 149 | }); 150 | 151 | 152 | /* 153 | * Initiate Validation Plugin 154 | */ 155 | $('#sign-up form').validate({ 156 | rules : { 157 | // Email 158 | 'email' : { 159 | required : true, 160 | email: true 161 | }, 162 | // Password 163 | 'password' : { 164 | required : true 165 | }, 166 | // Password Confirmation 167 | 'password_confirmation' : { 168 | required : true, 169 | equalTo : '#password' 170 | }, 171 | // Profile Link 172 | 'profile_link' : { 173 | required : true 174 | }, 175 | // Terms of Service 176 | 'agree_tos' : { 177 | required : true 178 | } 179 | }, 180 | messages : { 181 | 'email' : { 182 | required : 'Enter your email address', 183 | email : 'Enter a valid email address, for example user@example.com' 184 | }, 185 | 'password' : { 186 | required : 'Ensure your passwords match' 187 | }, 188 | 'password_confirmation' : { 189 | required : 'Confirm your password', 190 | equalTo : 'Ensure your passwords match' 191 | }, 192 | 'profile_link' : { 193 | required : 'Enter a link for your profile' 194 | }, 195 | 'agree_tos' : { 196 | required : 'You must agree to the terms of service' 197 | } 198 | } 199 | }); 200 | 201 | $('#feedback form').validate({ 202 | rules : { 203 | // Name 204 | 'name' : { 205 | required : true 206 | }, 207 | // Email 208 | 'email' : { 209 | required : true, 210 | email: true 211 | }, 212 | // Comments 213 | 'comment' : { 214 | required : true 215 | } 216 | } 217 | }); 218 | 219 | }); -------------------------------------------------------------------------------- /ch03/fields-across-environments.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 10 | 110 | 111 | 112 | 113 |
    114 |
    115 |
    116 | 117 |
    118 | 119 | 120 |
    121 | 122 |
    123 | 124 | 125 |
    126 | 127 |
    128 | 129 | 135 |
    136 | 137 |
    138 | 139 | 145 |
    146 | 147 |
    148 | 149 |
      150 |
    • 151 | 152 | 153 |
      • 154 |
    • 155 | 156 | 157 |
      • 158 |
    159 |
    160 | 161 |
    162 | 163 |
      164 |
    • 165 | 166 | 167 |
      • 168 |
    • 169 | 170 | 171 |
      • 172 |
    173 |
    174 | 175 |
    176 | 177 | 178 |
    179 | 180 |
    181 | 182 |
    183 |
    184 |
    185 |
    186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /ch04/fields-across-environments.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 10 | 110 | 111 | 112 | 113 |
    114 |
    115 |
    116 | 117 |
    118 | 119 | 120 |
    121 | 122 |
    123 | 124 | 125 |
    126 | 127 |
    128 | 129 | 135 |
    136 | 137 |
    138 | 139 | 145 |
    146 | 147 |
    148 | 149 |
      150 |
    • 151 | 152 | 153 |
      • 154 |
    • 155 | 156 | 157 |
      • 158 |
    159 |
    160 | 161 |
    162 | 163 |
      164 |
    • 165 | 166 | 167 |
      • 168 |
    • 169 | 170 | 171 |
      • 172 |
    173 |
    174 | 175 |
    176 | 177 | 178 |
    179 | 180 |
    181 | 182 |
    183 |
    184 |
    185 |
    186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /ch04/examples/fields-across-environments.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 10 | 110 | 111 | 112 | 113 |
    114 |
    115 |
    116 | 117 |
    118 | 119 | 120 |
    121 | 122 |
    123 | 124 | 125 |
    126 | 127 |
    128 | 129 | 135 |
    136 | 137 |
    138 | 139 | 145 |
    146 | 147 |
    148 | 149 |
      150 |
    • 151 | 152 | 153 |
      • 154 |
    • 155 | 156 | 157 |
      • 158 |
    159 |
    160 | 161 |
    162 | 163 |
      164 |
    • 165 | 166 | 167 |
      • 168 |
    • 169 | 170 | 171 |
      • 172 |
    173 |
    174 | 175 |
    176 | 177 | 178 |
    179 | 180 |
    181 | 182 |
    183 |
    184 |
    185 |
    186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /ch05/source_files/jquery.selectbox-0.5.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery selectbox plugin 3 | * 4 | * Copyright (c) 2007 Sadri Sahraoui (brainfault.com) 5 | * Licensed under the GPL license and MIT: 6 | * http://www.opensource.org/licenses/GPL-license.php 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * 9 | * The code is inspired from Autocomplete plugin (http://www.dyve.net/jquery/?autocomplete) 10 | * 11 | * Revision: $Id$ 12 | * Version: 0.5 13 | * 14 | * Changelog : 15 | * Version 0.5 16 | * - separate css style for current selected element and hover element which solve the highlight issue 17 | * Version 0.4 18 | * - Fix width when the select is in a hidden div @Pawel Maziarz 19 | * - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz 20 | */ 21 | jQuery.fn.extend({ 22 | selectbox: function(options) { 23 | return this.each(function() { 24 | new jQuery.SelectBox(this, options); 25 | }); 26 | } 27 | }); 28 | 29 | 30 | /* pawel maziarz: work around for ie logging */ 31 | if (!window.console) { 32 | var console = { 33 | log: function(msg) { 34 | } 35 | } 36 | } 37 | /* */ 38 | 39 | jQuery.SelectBox = function(selectobj, options) { 40 | 41 | var opt = options || {}; 42 | opt.inputClass = opt.inputClass || "selectbox"; 43 | opt.inputWrapperClass = opt.inputWrapperClass || "selectboxWrapper"; 44 | opt.containerClass = opt.containerClass || "selectbox-wrapper"; 45 | opt.hoverClass = opt.hoverClass || "current"; 46 | opt.currentClass = opt.selectedClass || "selected" 47 | opt.debug = opt.debug || false; 48 | 49 | var elm_id = selectobj.id; 50 | var active = -1; 51 | var inFocus = false; 52 | var hasfocus = 0; 53 | //jquery object for select element 54 | var $select = $(selectobj); 55 | // jquery container object 56 | var $container = setupContainer(opt); 57 | //jquery input object 58 | var $input = setupInput(opt); 59 | // hide select and append newly created elements 60 | $select.hide().before($input).before($container); 61 | 62 | 63 | init(); 64 | 65 | $input 66 | .click(function(){ 67 | if (!inFocus) { 68 | $container.toggle(); 69 | } 70 | }) 71 | .focus(function(){ 72 | if ($container.not(':visible')) { 73 | inFocus = true; 74 | $container.show(); 75 | } 76 | }) 77 | .keydown(function(event) { 78 | switch(event.keyCode) { 79 | case 38: // up 80 | event.preventDefault(); 81 | moveSelect(-1); 82 | break; 83 | case 40: // down 84 | event.preventDefault(); 85 | moveSelect(1); 86 | break; 87 | //case 9: // tab 88 | case 13: // return 89 | event.preventDefault(); // seems not working in mac ! 90 | $('li.'+opt.hoverClass).trigger('click'); 91 | break; 92 | case 27: //escape 93 | hideMe(); 94 | break; 95 | } 96 | }) 97 | .blur(function() { 98 | if ($container.is(':visible') && hasfocus > 0 ) { 99 | if(opt.debug) console.log('container visible and has focus') 100 | } else { 101 | hideMe(); 102 | } 103 | }); 104 | 105 | 106 | function hideMe() { 107 | hasfocus = 0; 108 | $container.hide(); 109 | } 110 | 111 | function init() { 112 | $container.append(getSelectOptions($input.attr('id'))).hide(); 113 | var width = $input.css('width'); 114 | $container.width(width); 115 | } 116 | 117 | function setupContainer(options) { 118 | var container = document.createElement("div"); 119 | $container = $(container); 120 | $container.attr('id', elm_id+'_container'); 121 | $container.addClass(options.containerClass); 122 | 123 | return $container; 124 | } 125 | 126 | function setupInput(options) { 127 | var input = document.createElement("input"); 128 | var inputWrapper = $("
    ").addClass(options.inputWrapperClass); 129 | var $input = $(input); 130 | $input.attr("id", elm_id+"_input"); 131 | $input.attr("type", "text"); 132 | $input.addClass(options.inputClass); 133 | $input.wrap(inputWrapper); 134 | $input.attr("autocomplete", "off"); 135 | $input.attr("readonly", "readonly"); 136 | $input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie 137 | 138 | return $input; 139 | } 140 | 141 | function moveSelect(step) { 142 | var lis = $("li", $container); 143 | if (!lis) return; 144 | 145 | active += step; 146 | 147 | if (active < 0) { 148 | active = 0; 149 | } else if (active >= lis.size()) { 150 | active = lis.size() - 1; 151 | } 152 | 153 | lis.removeClass(opt.hoverClass); 154 | 155 | $(lis[active]).addClass(opt.hoverClass); 156 | } 157 | 158 | function setCurrent() { 159 | var li = $("li."+opt.currentClass, $container).get(0); 160 | var ar = (''+li.id).split('_'); 161 | var el = ar[ar.length-1]; 162 | $select.val(el); 163 | $input.val($(li).html()); 164 | return true; 165 | } 166 | 167 | // select value 168 | function getCurrentSelected() { 169 | return $select.val(); 170 | } 171 | 172 | // input value 173 | function getCurrentValue() { 174 | return $input.val(); 175 | } 176 | 177 | function getSelectOptions(parentid) { 178 | var select_options = new Array(); 179 | var ul = document.createElement('ul'); 180 | $select.children('option').each(function() { 181 | var li = document.createElement('li'); 182 | li.setAttribute('id', parentid + '_' + $(this).val()); 183 | li.innerHTML = $(this).html(); 184 | if ($(this).is(':selected')) { 185 | $input.val($(this).html()); 186 | $(li).addClass(opt.currentClass); 187 | } 188 | ul.appendChild(li); 189 | $(li) 190 | .mouseover(function(event) { 191 | hasfocus = 1; 192 | if (opt.debug) console.log('over on : '+this.id); 193 | jQuery(event.target, $container).addClass(opt.hoverClass); 194 | }) 195 | .mouseout(function(event) { 196 | hasfocus = -1; 197 | if (opt.debug) console.log('out on : '+this.id); 198 | jQuery(event.target, $container).removeClass(opt.hoverClass); 199 | }) 200 | .click(function(event) { 201 | var fl = $('li.'+opt.hoverClass, $container).get(0); 202 | if (opt.debug) console.log('click on :'+this.id); 203 | $('li.'+opt.currentClass).removeClass(opt.currentClass); 204 | $(this).addClass(opt.currentClass); 205 | setCurrent(); 206 | hideMe(); 207 | }); 208 | }); 209 | return ul; 210 | } 211 | 212 | }; 213 | -------------------------------------------------------------------------------- /ch04/examples/css/fancyforms.css: -------------------------------------------------------------------------------- 1 | /* 2 | ----------------------------------------------- 3 | Fancy Form Styling 4 | ----------------------------------------------- 5 | + General Form Styling 6 | - Fieldsets & Legends 7 | - Introduction Text 8 | - Fields 9 | + Sign Up Form 10 | - Log In link 11 | - !Date of Birth 12 | */ 13 | 14 | /* !General Form Styling 15 | --------------------- */ 16 | /* -- !Fieldsets & Legends -- */ 17 | fieldset { 18 | border: none; 19 | position: relative; 20 | padding: 20px 0 0; 21 | } 22 | 23 | /* 24 | fieldset legend span { 25 | border-bottom: 1px solid #fff; 26 | background: url(images/bg-ccc.gif) 0 100% repeat-x; 27 | display: block; 28 | font-size: 2.25em; 29 | line-height: 1; 30 | margin: 20px 0; 31 | padding-bottom: 20px; 32 | position: absolute; 33 | width: 560px; 34 | } 35 | 36 | fieldset fieldset { 37 | padding: 20px; 38 | } 39 | */ 40 | 41 | /* -- !Introduction Text -- */ 42 | .introduction { 43 | font-size: 1.5em; 44 | margin: 0 0 2em; 45 | } 46 | 47 | /* -- !Fields -- */ 48 | fieldset div { 49 | /* background: url(images/bg-form-fieldset-div.png) repeat-y 0 0; */ 50 | margin: 0 0 10px; 51 | overflow: hidden; 52 | padding: 5px 5px 5px 0; 53 | } 54 | 55 | /* Labels */ 56 | fieldset div label { 57 | float: left; 58 | font-size: 1.16em; 59 | font-weight: bold; 60 | line-height: 1.1; 61 | margin: 9px 20px 0 0; 62 | width: 140px; 63 | } 64 | 65 | /* Input defaults */ 66 | fieldset div input, 67 | fieldset div textarea, 68 | fieldset div select { 69 | display: block; 70 | font-size: 14px; 71 | font-family: Arial, Helvetica, sans-serif; 72 | line-height: 1; 73 | } 74 | 75 | fieldset div ul { 76 | margin: 0 0 0 160px; 77 | } 78 | 79 | /* Text inputs */ 80 | fieldset div input { 81 | padding: 6px 3px; 82 | width: 288px; 83 | } 84 | 85 | /* Select dropdowns */ 86 | fieldset div select { 87 | padding: 0 0 0 3px; 88 | width: 291px; 89 | } 90 | 91 | /* Textareas */ 92 | fieldset div textarea { 93 | height: 89px; 94 | padding: 3px; 95 | width: 269px; 96 | } 97 | 98 | /* File Upload */ 99 | fieldset div input[type=file] { 100 | margin-right: 1em; 101 | } 102 | 103 | /* Radio buttons + checkboxes */ 104 | fieldset div ul li { 105 | margin: 0 0 5px; 106 | padding: 0; 107 | } 108 | 109 | fieldset div ul li label { 110 | display: inline; 111 | float: none; 112 | font-size: 1em; 113 | font-weight: normal; 114 | margin: 0; 115 | padding: 0; 116 | } 117 | 118 | fieldset div ul li input { 119 | border: inherit; 120 | display: inline; 121 | margin: 0 5px 0 0; 122 | padding: 0; 123 | width: auto; 124 | } 125 | 126 | /* Submit */ 127 | fieldset div.controls { 128 | background: none; 129 | } 130 | 131 | fieldset div.controls input { 132 | float: right; 133 | width: auto; 134 | } 135 | 136 | /* !Sign Up Form 137 | --------------------- */ 138 | /* -- Login -- */ 139 | #container { 140 | position: relative; 141 | } 142 | 143 | #sign-up .log-in { 144 | background: #eaeaea; 145 | margin: 0; 146 | line-height: 1; 147 | padding: 10px 12px; 148 | position: absolute; 149 | right: 20px; 150 | top: 30px; 151 | } 152 | 153 | #sign-up .log-in a { 154 | font-weight: bold; 155 | } 156 | 157 | /* -- !Date of Birth -- */ 158 | fieldset fieldset#section-dob { 159 | background: url(images/bg-form-fieldset-div.png) repeat-y 0 0; 160 | margin: 0 0 10px; 161 | padding: 0; 162 | } 163 | 164 | fieldset fieldset#section-dob legend span { 165 | background: none; 166 | border: none; 167 | font-size: 1.16em; 168 | font-weight: bold; 169 | line-height: 1.1; 170 | margin: 9px 20px 0 0; 171 | padding: 0; 172 | width: 140px; 173 | } 174 | 175 | fieldset fieldset#section-dob div { 176 | background: none; 177 | float: left; 178 | margin: 0; 179 | } 180 | 181 | fieldset fieldset#section-dob div label { 182 | position: absolute; 183 | top: -999em; 184 | } 185 | 186 | fieldset fieldset#section-dob div select { 187 | width: 85px; 188 | } 189 | 190 | /* Line up to grid */ 191 | fieldset fieldset#section-dob div select#dob_month { 192 | margin: 0 0 0 160px; 193 | width: 108px; 194 | } 195 | 196 | /* Whitespace */ 197 | fieldset fieldset#section-dob div select#dob_day { 198 | margin: 0 5px; 199 | } 200 | 201 | fieldset fieldset#section-dob em.note { 202 | clear: left; 203 | display: block; 204 | margin: 0 0 0.5em 165px; 205 | } 206 | 207 | /* -- !Terms of Service Agreement -- */ 208 | #field-agree-tos { 209 | background: none; 210 | } 211 | 212 | /* !Sign Up Form 213 | --------------------- */ 214 | /* -- Login -- */ 215 | #container { 216 | position: relative; 217 | } 218 | 219 | #sign-up .log-in { 220 | background: #eaeaea; 221 | margin: 0; 222 | line-height: 1; 223 | padding: 10px 12px; 224 | position: absolute; 225 | right: 20px; 226 | top: 30px; 227 | } 228 | 229 | #sign-up .log-in a { 230 | font-weight: bold; 231 | } 232 | 233 | /* -- !Date of Birth -- */ 234 | fieldset fieldset#section-dob { 235 | background: url(images/bg-form-fieldset-div.png) repeat-y 0 0; 236 | margin: 0 0 10px; 237 | padding: 0; 238 | } 239 | 240 | fieldset fieldset#section-dob legend span { 241 | background: none; 242 | border: none; 243 | font-size: 1.16em; 244 | font-weight: bold; 245 | line-height: 1.1; 246 | margin: 9px 20px 0 0; 247 | padding: 0; 248 | width: 140px; 249 | } 250 | 251 | fieldset fieldset#section-dob div { 252 | background: none; 253 | float: left; 254 | margin: 0; 255 | } 256 | 257 | fieldset fieldset#section-dob div label { 258 | position: absolute; 259 | top: -999em; 260 | } 261 | 262 | fieldset fieldset#section-dob div select { 263 | width: 85px; 264 | } 265 | 266 | /* Line up to grid */ 267 | fieldset fieldset#section-dob div select#dob_month { 268 | margin: 0 0 0 160px; 269 | width: 108px; 270 | } 271 | 272 | /* Whitespace */ 273 | fieldset fieldset#section-dob div select#dob_day { 274 | margin: 0 5px; 275 | } 276 | 277 | fieldset fieldset#section-dob em.note { 278 | clear: left; 279 | display: block; 280 | margin: 0 0 0.5em 165px; 281 | } -------------------------------------------------------------------------------- /ch04/examples/ugly-checkbox.html: -------------------------------------------------------------------------------- 1 | Fancy Form Design: Sign Up
    Ugly Checkbox
    -------------------------------------------------------------------------------- /ch03/sign-up.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 |

    Sign Up

    18 | 19 |
    20 |
    21 |

    Hi there! We're excited to have you as a part of our community. To get started, please create an account. All fields are required

    22 | 23 |
    24 | 25 | 26 |
    27 | 28 | 29 |
    30 | 31 | 32 |
    33 | 34 | 35 |
    36 | 37 | 38 |
    39 | 40 | 41 | 46 | 47 | 48 |
    49 | Birth date 50 | 51 |
    52 | 53 | 68 |
    69 | 70 | 71 |
    72 | 73 | 107 |
    108 | 109 | 110 |
    111 | 112 | 220 |
    221 | This is hidden by default from your profile. 222 |
    223 | 224 | 225 |
    226 |
      227 |
    • 228 | 232 |
      • 233 |
    234 |
    235 | 236 | 237 |
    238 | 239 |
    240 |
    241 |
    242 | 243 |
    244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /ch04/sign-up.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 |

    Sign Up

    18 | 19 |
    20 |
    21 |

    Hi there! We're excited to have you as a part of our community. To get started, please create an account. All fields are required

    22 | 23 |
    24 | 25 | 26 |
    27 | 28 | 29 |
    30 | 31 | 32 |
    33 | 34 | 35 |
    36 | 37 | 38 |
    39 | 40 | 41 | 46 | 47 | 48 |
    49 | Birth date 50 | 51 |
    52 | 53 | 68 |
    69 | 70 | 71 |
    72 | 73 | 107 |
    108 | 109 | 110 |
    111 | 112 | 220 |
    221 | This is hidden by default from your profile. 222 |
    223 | 224 | 225 |
    226 |
      227 |
    • 228 | 232 |
      • 233 |
    234 |
    235 | 236 | 237 |
    238 | 239 |
    240 |
    241 |
    242 | 243 |
    244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /ch03/edit-profile.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Edit Profile 7 | 8 | 9 | 10 | 11 |
    12 | 13 |

    Edit Profile

    14 |
    15 |
    16 | 17 |
    18 | 19 | 20 |
    21 | 22 | 23 |
    24 | 25 |
    26 | 27 | 28 |
    29 | 30 |
    31 | 32 |
    33 |
    34 | Gender 35 | 36 | 37 | 38 |
    39 |
    40 | 41 | 42 | 43 | 44 |
    45 | Birth date 46 | 47 |
    48 | 49 | 64 |
    65 | 66 | 67 |
    68 | 69 | 103 |
    104 | 105 | 106 |
    107 | 108 | 216 |
    217 | This is hidden by default from your profile. 218 |
    219 | 220 | 221 |
    222 | 223 |
    224 | 225 | 226 |
    227 | 228 | 229 |
    230 | 231 | 232 |
    233 | 234 | 235 |
    236 | 237 |
    238 | 239 |
    240 | 241 | 242 |
    243 | 244 | 245 | 246 |
    247 | 248 |
    249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /ch04/edit-profile.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Edit Profile 7 | 8 | 9 | 10 | 11 |
    12 | 13 |

    Edit Profile

    14 |
    15 |
    16 | 17 |
    18 | 19 | 20 |
    21 | 22 | 23 |
    24 | 25 |
    26 | 27 | 28 |
    29 | 30 |
    31 | 32 |
    33 |
    34 | Gender 35 | 36 | 37 | 38 |
    39 |
    40 | 41 | 42 | 43 | 44 |
    45 | Birth date 46 | 47 |
    48 | 49 | 64 |
    65 | 66 | 67 |
    68 | 69 | 103 |
    104 | 105 | 106 |
    107 | 108 | 216 |
    217 | This is hidden by default from your profile. 218 |
    219 | 220 | 221 |
    222 | 223 |
    224 | 225 | 226 |
    227 | 228 | 229 |
    230 | 231 | 232 |
    233 | 234 | 235 |
    236 | 237 |
    238 | 239 |
    240 | 241 | 242 |
    243 | 244 | 245 | 246 |
    247 | 248 |
    249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /ch05/edit-profile.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Edit Profile 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 | 23 |

    Edit Profile

    24 |
    25 |
    26 | 27 |
    28 | 29 | 30 |
    31 | 32 | 33 |
    34 | 35 | 36 |
    37 | 38 | 39 |
    40 | 41 | 42 |
    43 | 44 | 45 |
    46 | 47 |
      48 |
      • 49 |
      • 50 |
    51 |
    52 | 53 | 54 |
    55 | Birth date 56 | 57 |
    58 | 59 | 74 |
    75 | 76 | 77 |
    78 | 79 | 113 |
    114 | 115 | 116 |
    117 | 118 | 226 |
    227 | This is hidden by default from your profile. 228 |
    229 | 230 | 231 |
    232 | 233 | 234 |
    235 | 236 | 237 |
    238 | 239 | 240 |
    241 | 242 | 243 |
    244 | 245 | 246 |
    247 | 248 | 249 |
    250 | 251 | 252 |
    253 |
    254 |
    255 | 256 |
    257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /ch05/sign-up.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 | 23 |

    Sign Up

    24 | 25 |
    26 |
    27 |

    Hi there! We're excited to have you as a part of our community. To get started, please create an account.

    28 |

    Fields marked with an asterisk (*) are required.

    29 | 30 |
    31 | 32 | 33 |
    34 | 35 | 36 |
    37 | 38 | 39 |
    40 | 41 | 42 |
    43 | 44 | 45 |
    46 | 47 | 48 | 53 | 54 | 55 |
    56 | Birth date 57 | 58 |
    59 | 60 | 75 |
    76 | 77 | 78 |
    79 | 80 | 114 |
    115 | 116 | 117 |
    118 | 119 | 227 |
    228 | This is hidden by default from your profile. 229 |
    230 | 231 | 232 |
    233 |
      234 |
    • 235 | 239 |
      • 240 |
    241 |
    242 | 243 | 244 |
    245 | 246 |
    247 |
    248 |
    249 | 250 |
    251 | 252 | 253 | 254 | -------------------------------------------------------------------------------- /ch05/css/fancyforms.css: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------- Fancy Form Styling ----------------------------------------------- + General Form Styling - Fieldsets & Legends - Introduction Text - Fields - Validation + Sign Up Form - Log In - Date of Birth - Submit + Feedback Form - Submit + Privacy Settings - Submit + Edit Profile - Gender - Submit + Advanced Search + JS Enhancements - Password Strength - Select Menu */ /* !General Form Styling --------------------- */ /* -- !Fieldsets & Legends -- */ fieldset { border: none; position: relative; padding: 0; } /* -- !Introduction Text -- */ .introduction { font-size: 1.5em; line-height: 1.6; margin: 0 0 2em; } /* Note */ p.note { font-size: 1.25em; margin: -1.7em 0 1.25em; } /* -- !Required Fields -- */ fieldset abbr { color: #7b0101; font-size: 20px; font-weight: bold; line-height: 1; padding: 0 1px; vertical-align: middle; } /* Right aligned asterisk */ fieldset label abbr { display: block; font-size: 23px; right: 60px; padding: 0; position: absolute; top: 10px; width: 16px; } /* -- !Fields -- */ fieldset div { background: url(images/bg-form-fieldset-div.png) repeat-y 0 0; margin: 0 0 10px; padding: 5px 0 5px 160px; } fieldset div.controls { margin: 25px 0 0; padding: 0; } /* Labels */ fieldset div label { color: #666; float: left; display: block; font-size: 1.16em; font-weight: bold; line-height: 1.1; margin: 7px 0 0 -160px; width: 140px; } /* Input defaults */ fieldset div input, fieldset div textarea, fieldset div select { border: 1px solid #a3b4c4; border-color: #636d77 #a3b4c4 #c7d2de; color: #333; display: block; font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 1; margin: 0; } /* Focus */ fieldset div input:focus, fieldset div textarea:focus, fieldset div select:focus { border-color: #636d77; } /* Text inputs */ fieldset div input { background: #FFF url(images/bg-form-input.gif) repeat-x left top; padding: 6px 5px; width: 288px; } /* Select menus */ fieldset div select { padding: 0 0 0 3px; width: 291px; } /* Textareas */ fieldset div textarea { background: #FFF url(images/bg-form-input.gif) repeat-x left top; height: 89px; padding: 6px 5px; width: 288px; } /* File Upload */ fieldset div input[type=file] { background: none; border: inherit; padding: 0; } /* Radio buttons + checkboxes */ fieldset div ul { margin: 5px 0 0 0; } fieldset div ul li { margin: 0 0 5px; padding: 0; } fieldset div ul li label { display: inline; float: none; font-size: 1em; font-weight: normal; margin: 0; padding: 0; } fieldset div ul li input { background: none; border: none; display: inline; margin: 0 5px 0 0; padding: 0; width: auto; } /* Groups */ fieldset fieldset.group { background: url(images/bg-form-fieldset-div.png) repeat-y -155px 0; color: #666; margin: 0 0 10px 155px; padding: 0; } fieldset fieldset.group legend span { background: none; border: none; display: block; font-size: 1.16em; font-weight: bold; left: 0; line-height: 1.1; margin: 9px 20px 0 -155px; padding: 0; position: absolute; width: 140px; } fieldset fieldset.group div { background: none; float: left; margin: 0 0 0 5px; padding-left: 0; } /* Submit */ fieldset div.controls { background: none; } fieldset div.controls input { float: right; width: auto; } /* -- !Table of radio buttons -- */ fieldset table { border-collapse: collapse; border-spacing: none; width: 465px; } /* Head */ fieldset table thead th { color: #0c1155; font-size: 1.16em; padding: 0 14px 8px; } /* Body */ fieldset table tbody th, fieldset table tbody td { border: 10px solid #FFF; border-width: 0 0 10px; vertical-align: middle; } fieldset table tbody tr.with-note td, fieldset table tbody tr.with-note th { border: none; } fieldset table tbody th { color: #666666; font-size: 1.16em; font-weight: bold; width: 155px; } fieldset table tbody td { background: #f2f2f2; padding: 12px 28px; } /* General */ fieldset table th.private, fieldset table td.private { text-align: left; } fieldset table th.contacts, fieldset table td.contacts { text-align: center; } fieldset table th.public, fieldset table td.public { text-align: right; } fieldset table input { margin: 0; padding: 0; } fieldset table td.note { padding: 2px 10px 12px; } /* -- !Validation -- */ fieldset div, fieldset fieldset.group { position: relative; } /* List of Messages */ #form-messages { background: url(images/bg-form-messages.gif) no-repeat 0 2px; font-size: 1.16em; margin: 2.5em auto; padding: 0 0 0 23px; width: 280px; } #form-messages h2 { color: #630000; font-weight: normal; font-size: 1em; margin: 0; } #form-messages ul { color: #633000; padding: 0 0 0 30px; } #form-messages ul li { background: url(images/bg-form-messages-li.gif) no-repeat 0 0.55em; padding: 0 0 0 19px; } #form-messages a { color: #633000; text-decoration: underline; } #form-messages a:hover, #form-messages a:focus { text-decoration: none; } .valid #form-messages { background-image: url(images/bg-form-messages-success.gif); } .valid #form-messages h2 { color: inherit; } /* Error Message */ fieldset strong.error { clear: left; color: #993333; display: block; margin: 0.5em 0 0.2em 5px; } /* Field */ fieldset div input.error, fieldset div textarea.error, fieldset div select.error { border: 1px solid #993333; } /* Icon */ fieldset img.icon { right: 60px; position: absolute; top: 10px; } /* !Sign Up Form --------------------- */ /* -- Login -- */ #container { position: relative; } #sign-up .log-in { background: #eaeaea; margin: 0; line-height: 1; padding: 10px 12px; position: absolute; right: 20px; top: 30px; } #sign-up .log-in a { font-weight: bold; } /* -- !Date of Birth -- */ fieldset fieldset#section-dob div label { position: absolute; top: -999em; } fieldset fieldset#section-dob div select { width: 85px; } fieldset fieldset#section-dob div select#dob_month { width: 108px; } fieldset fieldset#section-dob em.note { clear: left; display: block; font-style: normal; margin: 0 0 0.5em 5px; } /* -- !Terms of Service Agreement -- */ #field-agree-tos { background: none; } /* -- !Your Profile Link -- */ #field-profile-link .profile-link-prefix { display: block; float: left; font-size: 1.16em; line-height: 1.1; margin: 9px 10px 0 0; text-align: right; width: 133px; } #field-profile-link input { width: 145px; } /* -- !Submit -- */ #sign-up fieldset .controls input#submit { background: url(images/ir-submit-create-profile.png) no-repeat 0 0; border: none; cursor: pointer; height: 32px; margin: 0; overflow: hidden; padding: 32px 0 0 136px; width: 136px; } /* !Feedback Form --------------------- */ /* -- !Submit -- */ #feedback fieldset .controls input#submit { background: url(images/ir-submit-submit-feedback.png) no-repeat 0 0; border: none; cursor: pointer; height: 32px; margin: 0; overflow: hidden; padding: 32px 0 0 129px; width: 149px; } /* !Privacy Settings --------------------- */ /* -- !Submit -- */ #privacy-settings fieldset .controls input#submit { background: url(images/ir-submit-privacy-settings.png) no-repeat 0 0; border: none; cursor: pointer; height: 32px; margin: 0; overflow: hidden; padding: 32px 0 0 144px; width: 144px; } /* !Edit Profile --------------------- */ /* -- !Gender -- */ fieldset #field-gender { background: #FFF; } fieldset #field-gender ul { overflow: hidden; } fieldset #field-gender ul li { float: left; margin-right: 38px; } /* -- !Submit -- */ #edit-profile fieldset .controls input#submit, #edit-profile fieldset .controls input#preview { background: url(images/ir-submit-edit-profile.png) no-repeat -140px 0; border: none; cursor: pointer; height: 32px; margin: 0; overflow: hidden; padding: 32px 0 0 66px; width: 66px; } #edit-profile fieldset .controls input#preview { background-position: 0 0; margin: 0 8px 0 0; padding: 32px 0 0 132px; width: 132px; } /* !Advanced Search --------------------- */ /* -- !Keywords -- */ #field-keywords label { position: absolute; top: -999em; } /* -- !Submit -- */ #advanced-search fieldset .controls input#submit { background: url(images/ir-submit-search.png) no-repeat 0 0; border: none; cursor: pointer; height: 32px; margin: 0; overflow: hidden; padding: 32px 0 0 91px; width: 91px; } /* !Change Password --------------------- */ /* -- !Submit -- */ #change-password fieldset .controls input#submit { background: url(images/ir-submit-submit-save-password.png) no-repeat 0 0; border: none; cursor: pointer; height: 32px; margin: 0; overflow: hidden; padding: 32px 0 0 137px; width: 137px; } /* !JS Enhancements --------------------- */ /* -- !Password Strength -- */ #psr_score { background: transparent; display: block; margin: 0; padding: 0; width: 200px; } .psr_Weak, .psr_Medium, .psr_Strong, .psr_Excellent { background: transparent url(images/bg-password-strength.png) no-repeat 0 0; display: block; margin: 0.5em 0 0.2em 5px; padding: 10px 0 0; } .psr_Medium { background-position: 0 -50px; } .psr_Strong { background-position: 0 -100px; } .psr_Excellent { background-position: 0 -150px; } /* -- !Select Menu -- */ fieldset div.selectbox-wrapper, fieldset fieldset#section-dob div.selectbox-wrapper { border:1px solid #ccc; background: #FFF; float: none; margin: 0 0 0 5px; max-height: 150px; overflow: auto; padding: 0; position: absolute; width: auto; z-index: 100; } fieldset div.selectbox-wrapper ul { background: #FFF; float: none; list-style-type: none; margin: 0px; padding: 0px; } fieldset div.selectbox-wrapper ul li.selected { background-color: #EAF2FB; } fieldset div.selectbox-wrapper ul li.current { background-color: #CDD8E4; } fieldset div.selectbox-wrapper ul li { cursor: pointer; display: block; list-style-type: none; margin: 0; padding: 2px 5px; } .selectbox-input-wrapper { background: url(images/ui-form-select.png) no-repeat 0 0; display: block; margin: 0 5px 0 0; padding: 0 0 0 10px; width: 293px; } fieldset div .selectbox { background: url(images/ui-form-select.png) no-repeat 100% 0; border: none; display: block; margin: 0 -5px 0 0; padding: 5px 0; cursor: pointer; width : 288px; } /* Date of Birth */ /* Pseodo Select */ fieldset fieldset#section-dob div input.selectbox { width: 85px; } /* Wrapper for Psuedo Select */ fieldset fieldset#section-dob div .selectbox-input-wrapper { width: 80px; } -------------------------------------------------------------------------------- /ch04/examples/label-positioning.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Fancy Form Design: Sign Up 7 | 8 | 9 | 118 | 119 | 120 | 121 | 122 | 123 |
    124 |
    125 |
    126 | Sign Up 127 | 128 |

    Hi there! We're excited to have you as a part of our community. To get started, please create an account. All fields are required

    129 | 130 |
    131 | 132 | 133 |
    134 | 135 | 136 |
    137 | 138 | 139 |
    140 | 141 | 142 |
    143 | 144 | 145 |
    146 | 147 | 148 | 153 | 154 | 155 |
    156 | Birth date 157 | 158 |
    159 | 160 | 175 |
    176 | 177 | 178 |
    179 | 180 | 214 |
    215 | 216 | 217 |
    218 | 219 | 327 |
    328 | This is hidden by default from your profile. 329 |
    330 | 331 | 332 |
    333 |
      334 |
    • 335 | 339 |
      • 340 |
    341 |
    342 | 343 | 344 |
    345 | 346 |
    347 |
    348 |
    349 |
    350 | 351 | 352 | 353 | --------------------------------------------------------------------------------