[关闭]
@mSolo 2015-05-13T14:38:03.000000Z 字数 11706 阅读 1289

MEAN 全栈工程师手札（一）：前奏 - 表单

HTML5 CSS3 Bootstrap

HTML5: from documents to applications
An overview of the new DOM APIs in HTML5:

  • 2D Canvas
  • Audio and Video
  • Drag and Drop
  • Cross-document Messaging
  • Server-sent Events
  • WebSockets
  • Document Editing
  • Web Storage
  • Offline Web Applications

手抄

The new form input types introduced in HTML5

Type
color date datetime datetime-local email
month number range search tel
time url week

HTML5’s new input element attributes

Attribute
autocomplete autofocus list max min
multiple pattern placeholder required step

A partial list of the new features in CSS3

New selectors New pseudo-classes Rounded borders Border images
Gradients Box shadow Box sizing Background sizing
Text shadow Word wrapping Multiple columns Web fonts
Multiple backgrounds Alpha color channels Media queries Speech style
Transitions Animations 3D transforms 2D transforms 
  1. <progress value="50" max="100"></progress>
  2. <meter min="0" max="10" low="3" high="7" optimum="9" value="0"></meter>
  3. <details>
  4.     <summary>Section Heading</summary>
  5.     This is an example of using &lt;details&gt; and &lt;summary&gt;
  6.     to create collapsible content without using JavaScript.
  7. </details>

Form creation: input widgets, data binding, and data validation

  1. <link rel="stylesheet" href="style.css">
  2. <script src="modernizr.js"></script>                    
  3. <script src="app.js"></script>
  1. <form name="order" method="post" action="/submit">
  2.     <h1>Order Form</h1>
  3.         <fieldset>
  4.             <legend>Contact Details</legend>
  5.             <ul>
  6.                 <li>
  7.                     <label class="required">
  8.                         <div>Full Name</div><input name="name" required autofocus>          
  9.                     </label>
  10.                 </li>
  11.                 <li>
  12.                     <label class="required">
  13.                         <div>Email Address</div><input type="email" name="email" required>  
  14.                     </label>
  15.                 </li>
  16.                 <li>
  17.                     <label>
  18.                         <div>Postal Address</div>
  19.                         <input name="address1" placeholder="Address Line 1">    
  20.                     </label>
  21.                     <div>&nbsp;</div>
  22.                     <input name="address2" placeholder="Address Line 2">        
  23.                     <div>&nbsp;</div>                    
  24.                     <input name="city" class="city" placeholder="Town/City">    
  25.                     <input name="state" class="state" placeholder="State">  
  26.                     <input name="zip" class="zip" placeholder="Zip Code">   
  27.                     <div>&nbsp;</div>
  28.                     <select name="country">
  29.                         <option value="0">Country</option>
  30.                         <option value="US">United States</option>
  31.                         <option value="CA">Canada</option>
  32.                     </select>
  33.                 </li>
  34.                 <li>
  35.                     <label><div>Home Phone No.</div><input type="tel" name="homephone"></label>
  36.                 </li>
  37.                 <li>
  38.                     <label><div>Cell Phone No.</div><input type="tel" name="cellphone"></label>            
  39.                 </li>
  40.                 <li>
  41.                     <label><div>Skype Name</div><input name="skype"></label>
  42.                 </li>
  43.                 <li>
  44.                     <label>
  45.                         <div>Twitter</div><span class="twitter_prefix">@</span>
  46.                         <input name="twitter" class="twitter">
  47.                     </label>
  48.                 </li>
  49.             </ul>    
  50.         </fieldset>
  51.         <fieldset>
  52.             <legend>Login Details</legend>
  53.             <ul>
  54.                 <li>
  55.                     <label class="required">
  56.                         <div>Password</div><input type="password" name="password" required> 
  57.                     </label>
  58.                 </li>
  59.                 <li>
  60.                     <label class="required">
  61.                         <div>Confirm Password</div>
  62.                         <input type="password" name="confirm_password" required>    
  63.                     </label>
  64.                 </li>
  65.             </ul>
  66.         </fieldset>
  67.         <fieldset>
  68.             <legend>Order Details</legend>
  69.             <table>
  70.                 <thead>
  71.                 <tr>                    
  72.                     <th>Product Code</th><th>Description</th><th>Qty</th>
  73.                     <th>Price</th><th>Total</th>
  74.                 </tr>
  75.                 </thead>
  76.                 <tbody>
  77.                 <tr>                    
  78.                     <td>COMP001<input type="hidden" name="product_code" value="COMP001"></td>
  79.                     <td>The Ultimate Smartphone</td>
  80.                     <td>
  81.                         <input type="number" data-price="399.99" name="quantity" 
  82.                           value="0" min="0" max="99" maxlength="2">     
  83.                     </td>
  84.                     <td>$399.99</td>
  85.                     <td><output name="item_total" class="item_total">$0.00</output></td>
  86.                 </tr>
  87.                 <tr>
  88.                     <td>COMP002<input type="hidden" name="product_code" value="COMP002"></td>
  89.                     <td>The Ultimate Tablet</td>
  90.                     <td>
  91.                         <input type="number" data-price="499.99" name="quantity" 
  92.                           value="0" min="0" max="99" maxlength="2">     
  93.                     </td>
  94.                     <td>$499.99</td>
  95.                     <td><output name="item_total" class="item_total">$0.00</output>    </td>
  96.                 </tr>
  97.                 <tr>
  98.                     <td>COMP003<input type="hidden" name="product_code" value="COMP003"></td>
  99.                     <td>The Ultimate Netbook</td>
  100.                     <td>
  101.                         <input type="number" data-price="299.99" name="quantity" 
  102.                           value="0" min="0" max="99" maxlength="2">     
  103.                     </td>
  104.                     <td>$299.99</td>
  105.                     <td><output name="item_total" class="item_total">$0.00</output></td>
  106.                 </tr>
  107.                 </tbody>
  108.                 <tfoot>
  109.                 <tr>
  110.                     <td colspan="4">Order Total</td>
  111.                     <td><output name="order_total" id="order_total">$0.00</output></td>
  112.                 </tr>
  113.                 </tfoot>
  114.             </table>
  115.         </fieldset>
  116.         <fieldset>
  117.             <legend>Payment Details</legend>
  118.             <ul>
  119.                 <li>
  120.                     <label class="required">
  121.                         <div>Name on Card</div><input name="card_name" required>
  122.                     </label>
  123.                 </li>
  124.                 <li>
  125.                     <label class="required">
  126.                         <div>Credit Card No.</div>
  127.                         <input name="card_number" pattern="[0-9]{13,16}"    
  128.                           maxlength="16" required title="13-16 digits, no spaces">
  129.                     </label>
  130.                 </li>
  131.                 <li>
  132.                     <label class="required">
  133.                         <div>Expiry Date</div>
  134.                         <input type="month" name="card_expiry" maxlength="7"    
  135.                           placeholder="YYYY-MM" required value="2015-06">
  136.                     </label>
  137.                 </li>
  138.                 <li>
  139.                     <label class="required">
  140.                         <div>CVV2 No.</div>
  141.                         <input name="card_cvv2" class="cvv" maxlength="3"   
  142.                           pattern="[0-9]{3}" required title="exactly 3 digits"> 
  143.                         <span>(Three digit code at back of card)</span>
  144.                     </label>
  145.                 </li>
  146.             </ul>
  147.         </fieldset>     
  148.     <div class="buttons">
  149.         <input type="submit" value="Submit Order">
  150.         <input type="submit" id="saveOrder" value="Save Order" formnovalidate formaction="/save">
  151.     </div>
  152. </form>
  1. (function() {
  2.   var init = function() {
  3.     var orderForm = document.forms.order,
  4.         saveBtn = document.getElementById('saveOrder'),
  5.         saveBtnClicked = false;
  7.     var saveForm = function() {
  8.       if(!('formAction' in document.createElement('input'))) {
  9.         var formAction = saveBtn.getAttribute('formaction');
  10.         orderForm.setAttribute('action',formAction);
  11.       }
  12.       saveBtnClicked = true;
  13.     };
  14.     saveBtn.addEventListener('click',saveForm, false);
  16.     var qtyFields = orderForm.quantity,
  17.         totalFields = document.getElementsByClassName('item_total'),
  18.         orderTotalField = document.getElementById('order_total');
  20.     var formatMoney = function(value) {
  21.       return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  22.     }
  24.     var calculateTotals = function() {
  25.       var i = 0,
  26.           ln = qtyFields.length,
  27.           itemQty = 0,
  28.           itemPrice = 0.00,
  29.           itemTotal = 0.00,
  30.           itemTotalMoney = '$0.00',
  31.           orderTotal = 0.00,
  32.           orderTotalMoney = '$0.00';
  34.       for(;i<ln;i++) {
  35.         if(!!qtyFields[i].valueAsNumber) {
  36.           itemQty =qtyFields[i].valueAsNumber || 0;         // HTML5 version
  37.         } else {
  38.           itemQty =parseFloat(qtyFields[i].value) || 0;     // Fallback version
  39.         }
  40.         if(!!qtyFields[i].dataset) {
  41.           itemPrice =parseFloat(qtyFields[i].dataset.price);
  42.         } else {
  43.           itemPrice =parseFloat(qtyFields[i].getAttribute('data-price'));
  44.         }
  45.         itemTotal =itemQty *itemPrice;
  46.         itemTotalMoney = '$'+formatMoney(itemTotal.toFixed(2));
  47.         orderTotal +=itemTotal;
  48.         orderTotalMoney = '$'+formatMoney(orderTotal.toFixed(2));
  50.         if(!!totalFields[i].value) {
  51.           totalFields[i].value =itemTotalMoney;
  52.           orderTotalField.value =orderTotalMoney;
  53.         } else {
  54.           totalFields[i].innerHTML =itemTotalMoney;
  55.           orderTotalField.innerHTML =orderTotalMoney;
  56.         }
  57.       }
  58.     };
  59.     calculateTotals();
  61.     var qtyListeners = function() {
  62.       var i = 0,
  63.           ln = qtyFields.length;
  64.       for(;i<ln;i++) {
  65.         qtyFields[i].addEventListener('input',calculateTotals, false);
  66.         qtyFields[i].addEventListener('keyup',calculateTotals, false);
  67.       }
  68.     };
  69.     qtyListeners();
  71.     var doCustomValidity = function(field, msg) {
  72.       if('setCustomValidity' in field) {
  73.         field.setCustomValidity(msg);
  74.       } else {
  75.         field.validationMessage = msg;
  76.       }
  77.     };
  79.     var validateForm = function() {
  80.       doCustomValidity(orderForm.name, '');
  81.       doCustomValidity(orderForm.password, '');
  82.       //...
  84.       if(!Modernizr.inputtypes.month || !Modernizr.input.pattern) {
  85.         fallbackValidation();
  86.       }
  88.       if(orderForm.name.value.length < 4) {
  89.         doCustomValidity(orderForm.name, 'Full Name must be at least 4 characters long');
  90.       }
  91.       //...
  93.     };
  94.     orderForm.addEventListener('input', validateForm, false);
  95.     orderForm.addEventListener('keyup', validateForm, false);
  97.     var styleInvalidForm = function() {
  98.       orderForm.className = 'invalid';
  99.     }
  100.     orderForm.addEventListener('invalid', styleInvalidForm, true);
  102.     Modernizr.load({
  103.       test: Modernizr.inputtypes.month,
  104.       nope: 'monthpicker.js'
  105.     });
  107.     var getFieldLabel = function(field) {
  108.       if('labels' in field && field.labels.length > 0) {
  109.         return field.labels[0].innerText;
  110.       }
  111.       if(field.parentNode && field.parentNode.tagName.toLowerCase()=== 'label') {
  112.         return field.parentNode.innerText;
  113.       }
  114.       return '';
  115.     }
  117.     var submitForm = function(e) {
  118.       if(!saveBtnClicked) {
  119.         validateForm();
  120.         var i = 0,
  121.             ln = orderForm.length,
  122.             field,
  123.             errors = [],
  124.             errorFields = [],
  125.             errorMsg = '';
  127.         for(; i<ln; i++) {
  128.           field = orderForm[i];
  129.           if( (!!field.validationMessage && field.validationMessage.length > 0) || 
  130.               (!!field.checkValidity && !field.checkValidity()) ) {
  131.              errors.push(getFieldLabel(field)+': '+field.validationMessage);
  132.              errorFields.push(field);
  133.           }
  134.         }
  136.         if(errors.length > 0) {
  137.           e.preventDefault();
  138.           errorMsg = errors.join('\n');
  139.           alert('Please fix the following errors:\n'+errorMsg, 'Error');
  140.           orderForm.className = 'invalid';
  141.           errorFields[0].focus();
  142.         }
  143.       }
  144.     };
  145.     orderForm.addEventListener('submit', submitForm, false);
  147.     var fallbackValidation = function() {
  148.       var i = 0,
  149.           ln = orderForm.length,
  150.           field;
  151.       for(;i<ln;i++) {
  152.         field = orderForm[i];
  153.         doCustomValidity(field, '');
  154.         if(field.hasAttribute('pattern')) {
  155.           var pattern = new  RegExp(field.getAttribute('pattern').toString());
  156.           if(!pattern.test(field.value)) {
  157.             var msg = 'Please match the requested format.';
  158.             if(field.hasAttribute('title') &&  field.getAttribute('title').length > 0) {
  159.               msg += ' '+field.getAttribute('title');
  160.             }
  161.             doCustomValidity(field, msg);
  162.           }
  163.         }
  164.         if(field.hasAttribute('type') &&
  165.            field.getAttribute('type').toLowerCase()=== 'email') {
  166.           var pattern = new RegExp(/\S+@\S+\.\S+/);
  167.           if(!pattern.test(field.value)) {
  168.             doCustomValidity(field, 'Please enter an email address.');
  169.           }
  170.         }
  171.         if(field.hasAttribute('required') && field.value.length < 1) {
  172.           doCustomValidity(field, 'Please fill out this field.');
  173.         }
  174.       }
  175.     };
  176.   };
  177.   window.addEventListener('load',init, false);
  178. }) ();
  1. html, body, form, fieldset, legend, h1, ul {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     outline: 0;
  6.     font-weight: inherit;
  7.     font-style: inherit;
  8.     font-size: 100%;
  9.     font-family: inherit;
  10.     vertical-align: baseline;
  11.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  12.     font-weight: 300;
  13. }
  15. form {
  16.     width: 800px; margin: 30px auto;
  17.     background-color: #DCD4CE;
  18.     border: 1px solid #423021;
  19.     box-shadow: 2px 2px 10px #666;
  20. }
  22. h1 {
  23.     background-color: #BEB0A3;
  24.     border-bottom: 1px solid #423021;
  25.     font-size: 2em; font-weight: 600;
  26.     padding: 5px 15px;
  27.     text-shadow: 1px 1px 0px #fff;
  28. }
  30. fieldset {
  31.     border: none; margin: 20px 20px;
  32.     border-bottom: 1px dashed #BEB0A3; padding-bottom: 20px;
  33. }
  35. legend {
  36.     display: block; font-weight: bold; font-size: 1.25em;
  37.     width: 100%; padding-bottom: 10px;
  38.     text-shadow: 1px 1px 0px #fff;
  39. }
  41. input:not([type=submit]), select {
  42.     border: 1px solid #999;
  43.     padding: 2px;
  44. }
  46. input:required, select:required {
  47.     background-color: lightyellow;
  48. }
  50. form.invalid input:invalid, form.invalid select:invalid,
  51. form.invalid input.invalid, form.invalid select.invalid {
  52.     background-color: #FFD4D4;
  53.     border: 1px solid maroon;
  54. }
  56. ul {
  57.     list-style-type: none;
  58. }
  60. li {
  61.     display: block; width: 380px; float: left;
  62. }
  64. li div {
  65.     width: 130px; float: left; margin-top: 5px;
  66.     color: #444; font-size: 0.8em; font-weight: 300;
  67. }
  69. li label.required div {
  70.     font-weight: bold; 
  71. }
  73. li label span {
  74.     font-size: 11px; font-weight: 300; color: #333;
  75. }
  77. li input, li select {
  78.     width: 225px; margin-bottom: 5px;
  79.     font-size: 0.9em;
  80. }
  82. span.twitter_prefix { color: #666; font-size: .95em; font-weight: bold; }
  84. input.city { width: 80px; margin-right: 0; }
  85. input.state { width: 35px; margin-right: 0; }
  86. input.zip { width: 90px; }
  87. input.twitter { width: 206px; }
  89. table {
  90.     width: 100%;
  91.     border: 1px solid #705536;
  92.     border-collapse: collapse;
  93.     box-shadow: 1px 1px 10px #666;
  94. }
  96. th, td {
  97.     border: 1px solid #705536;
  98.     padding: 5px 10px;
  99. }
  101. th {
  102.     text-shadow: 1px 1px 0px #000; font-weight: bold;
  103. }
  106. thead th:nth-child(1), thead th:nth-child(2) {
  107.     text-align: left;
  108. }
  110. thead th:nth-child(4), thead th:nth-child(5) {
  111.     text-align: right;
  112. }
  114. tbody tr td {
  115.     background-color: #e5dad2;
  116. }
  118. tbody tr:nth-child(even) td {
  119.     background-color: #fff3e9;
  120. }
  122. tbody td:nth-child(1) {
  123.     width: 110px;
  124. }
  126. tbody td:nth-child(3) {
  127.     width: 60px; text-align: center;
  128. }
  130. td input { 
  131.     width: 50px; height: 28px; font-size: 1.1em; text-align: right; 
  132. }
  134. tbody td:nth-child(4) {
  135.     width: 60px; text-align: right;
  136. }
  138. tbody td:nth-child(5) {
  139.     width: 80px; text-align: right;
  140. }
  142. th {
  143.     background-color: #614023;
  144.     color: #fff;
  145. }
  147. tfoot td {
  148.     background-color: #BEB0A3;
  149.     text-align: right; font-weight: bold;
  150.     font-size: 1.15em;
  151.     text-shadow: 1px 1px 0px #fff;
  152. }
  154. input[type=month] { width: 100px; }
  155. input.cvv { width: 60px; text-align: right; }
  157. .buttons {
  158.     margin: 15px 20px 10px; text-align: right;
  159. }
  161. input[type=submit], input[type=button] {
  162.     border: 1px solid #423021;
  163.     background-color: #896640;
  164.     color: #fff; padding: 6px 10px;
  165.     border-radius: 6px;
  166.     text-shadow: 1px 1px 0px #000;
  167.     font-size: 0.9em; cursor: pointer;
  168.     font-weight: bold;
  169.     background-image: -webkit-linear-gradient(top, #896640 0%, #705536 100%);
  170.     # -moz-linear-gradient, -o-linear-gradient, -ms-linear-gradient
  171.     background-image: linear-gradient(to bottom, #896640 0%, #705536 100%);
  172. }
  174. input[type=submit]:active, input[type=button]:active {
  175.     background-color: #705536;
  176.     background-image: -webkit-linear-gradient(bottom, #896640 0%, #705536 100%);
  177.     # 
  178. }
  180. .placeholder {
  181.     color: #999;
  182. }
  184. .month-picker-month { width: 115px; }
  185. .month-picker-year { width: 55px; text-align: right; }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注