学习《html5 in action》
第二章：表单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Order Form</title>
<link rel="stylesheet" href="style.css">
<script src="modernizr.js"></script>
<script src="app.js"></script>
</head> <body>
<form name="order" method="post" action="/submit">
<h1>Order Form</h1>
<fieldset>
<legend>Contact Details</legend>
<ul>
<li>
<label class="required">
<div>Full Name</div>
<input name="name" required autofocus>
</label>
</li>
<li>
<label class="required">
<div>Email Adress</div>
<input type="email" name="email" required>
</label>
</li>
<li>
<label>
<div>Post Adress </div>
<input name="address1" placeholder="Address line 1">
</label>
<div> </div>
<input name="address2" placeholder="Address line 2">
<div> </div>
<input name="city" class="city" placeholder="Town/City">
<input name="state" class="state" placeholder="State">
<input name="zip" class="zip" placeholder="Zip Code">
<div> </div>
<select name="country">
<option value ="0">Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
</li>
<li>
<label>
<div>Home Phone No.</div>
<input type="tel" name="homephone">
</label>
</li>
<li>
<label>
<div>Cell Phone No.</div>
<input type="tel" name="cellphone">
</label>
</li>
<li>
<label>
<div>Skype Name</div>
<input name="skype">
</label>
</li>
<li>
<label>
<div>Twitter</div>
<span class"twitter_prefix">@</span>
<input name="twitter" class="twitter">
</label>
</li>
</ul>
</fieldset> <fieldset>
<legend>Login Details</legend>
<ul>
<li>
<label class="required">
<div>password</div>
<input typ="password" name="password" required>
</label>
</li>
<li>
<label class="required">
<div>Confirm Password</div>
<input type="password" name="confirm_password" required>
</label>
</li>
</ul>
</fieldset> <fieldset>
<legend>Order Details</legend>
<table>
<thead>
<tr>
<th>Product Code</th><th>Description</th><th>Qty</th>
<th>Price</th><th>total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
COMP001
<input type="hidden" name="product_code" value="COMP001">
</td>
<td>The Ultimate Smartphone</td>
<td>
<input type="number" data-price="399.99" name="quantity" value="0" min="0" max="99" maxlength="2">
</td>
<td>$399.99</td>
<td>
<output name="item_total" class="item_total">$0.00</output>
</td>
</tr>
<td>
COMP002
<input type="hidden" name="product_code" value="COMP001">
</td>
<td>The Ultimate Tablet</td>
<td>
<input type="number" data-price="499.99" name="quantity" value="0" min="0" max="99" maxlength="2">
</td>
<td>$499.99</td>
<td>
<output name="item_total" class="item_total">$0.00</output>
</td>
</tr>
<td>
COMP003
<input type="hidden" name="product_code" value="COMP001">
</td>
<td>The Ultimate Netbook</td>
<td>
<input type="number" data-price="299.99" name="quantity" value="0" min="0" max="99" maxlength="2">
</td>
<td>$299.99</td>
<td>
<output name="item_total" class="item_total">$0.00</output>
</td>
</tr>
<tfoot>
<tr>
<td colspan="4">Order total</td>
<td>
<output name="order_total" id="order_total">$0.00</output>
</td>
</tr>
</tfoot>
</table>
</fieldset> <fieldset>
<legend>payment Details</legend>
<ul>
<li>
<label class="required">
<div>Name on card</div>
<input name="card_name" required>
</label>
</li>
<li>
<label class="required">
<div>Credit on card</div>
<input name="card_number" pattern="[0-9]{13,16}" maxlength="16" required title="13-16difits,no spaces">
</label>
</li>
<li>
<label class="required">
<div>Expiry Date</div>
<input type="date" name="card_expiry" maxlength="10" placeholder="YYYY-MM-DD" required value="2015-6-1">
</label>
</li>
</ul>
</fieldset> <div class="buttons">
<input type="submit" value="submit order">
<input type="submit" id="saveOrder" value="save order" formnovalidate formaction="/save">
</div>
</form>
</body>
</html>
index.html
(function() {
var init = function() {
var orderForm = document.forms.order,
saveBtn = document.getElementById('saveOrder'),
saveBtnClicked = false;
var saveForm = function() {
if(!('formAction' in document.createElement('input'))) {
var formAction = saveBtn.getAttribute('formaction');
orderForm.setAttribute('action',formAction);
}
saveBtnClicked = true;
};
saveBtn.addEventListener('click',saveForm, false);
var qtyFields = orderForm.quantity,
totalFields = document.getElementsByClassName('item_total'),
orderTotalField = document.getElementById('order_total');
var formatMoney = function(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
var calculateTotals = function() {
var i = 0,
ln = qtyFields.length,
itemQty = 0,
itemPrice = 0.00,
itemTotal = 0.00,
itemTotalMoney = '$0.00',
orderTotal = 0.00,
orderTotalMoney = '$0.00';
for(;i<ln;i++) {
if(!!qtyFields[i].valueAsNumber) {
itemQty =qtyFields[i].valueAsNumber || 0;
} else {
itemQty =parseFloat(qtyFields[i].value) || 0;
}
if(!!qtyFields[i].dataset) {
itemPrice =parseFloat(qtyFields[i].dataset.price);
} else {
itemPrice =parseFloat(qtyFields[i].getAttribute('data-price'));
}
itemTotal =itemQty *itemPrice;
itemTotalMoney = '$'+formatMoney(itemTotal.toFixed(2));
orderTotal +=itemTotal;
orderTotalMoney = '$'+formatMoney(orderTotal.toFixed(2));
if(!!totalFields[i].value) {
totalFields[i].value =itemTotalMoney;
orderTotalField.value =orderTotalMoney;
} else {
totalFields[i].innerHTML =itemTotalMoney;
orderTotalField.innerHTML =orderTotalMoney;
}
}
};
calculateTotals();
var qtyListeners = function() {
var i = 0,
ln = qtyFields.length;
for(;i<ln;i++) {
qtyFields[i].addEventListener('input',calculateTotals, false);
qtyFields[i].addEventListener('keyup',calculateTotals, false);
}
};
qtyListeners();
var doCustomValidity = function(field, msg) {
if('setCustomValidity' in field) {
field.setCustomValidity(msg);
} else {
field.validationMessage = msg;
}
};
var validateForm = function() {
doCustomValidity(orderForm.name, '');
doCustomValidity(orderForm.password, '');
doCustomValidity(orderForm.confirm_password, '');
doCustomValidity(orderForm.card_name, '');
if(!Modernizr.inputtypes.month || !Modernizr.input.pattern) {
fallbackValidation();
}
if(orderForm.name.value.length < 4) {
doCustomValidity(
orderForm.name, 'Full Name must be at least 4 characters long'
);
}
if(orderForm.password.value.length < 8) {
doCustomValidity(
orderForm.password,
'Password must be at least 8 characters long'
);
}
if(orderForm.password.value != orderForm.confirm_password.value) {
doCustomValidity(
orderForm.confirm_password,
'Confirm Password must match Password'
);
}
if(orderForm.card_name.value.length < 4) {
doCustomValidity(
orderForm.card_name,
'Name on Card must be at least 4 characters long'
);
}
};
orderForm.addEventListener('input', validateForm, false);
orderForm.addEventListener('keyup', validateForm, false);
var styleInvalidForm = function() {
orderForm.className = 'invalid';
}
orderForm.addEventListener('invalid', styleInvalidForm, true);
Modernizr.load({
test: Modernizr.inputtypes.month,
nope: 'monthpicker.js'
});
var getFieldLabel = function(field) {
if('labels' in field && field.labels.length > 0) {
return field.labels[0].innerText;
}
if(field.parentNode && field.parentNode.tagName.toLowerCase()=== 'label')
{
return field.parentNode.innerText;
}
return '';
}
var submitForm = function(e) {
if(!saveBtnClicked) {
validateForm();
var i = 0,
ln = orderForm.length,
field,
errors = [],
errorFields = [],
errorMsg = '';
for(; i<ln; i++) {
field = orderForm[i];
if((!!field.validationMessage &&
field.validationMessage.length > 0) || (!!field.checkValidity
&& !field.checkValidity())
) {
errors.push(
getFieldLabel(field)+': '+field.validationMessage
);
errorFields.push(field);
}
}
if(errors.length > 0) {
e.preventDefault();
errorMsg = errors.join('\n');
alert('Please fix the following errors:\n'+errorMsg, 'Error');
orderForm.className = 'invalid';
errorFields[0].focus();
}
}
};
orderForm.addEventListener('submit', submitForm, false);
var fallbackValidation = function() {
var i = 0,
ln = orderForm.length,
field;
for(;i<ln;i++) {
field = orderForm[i];
doCustomValidity(field, '');
if(field.hasAttribute('pattern')) {
var pattern = new RegExp(field.getAttribute('pattern').toString());
if(!pattern.test(field.value)) {
var msg = 'Please match the requested format.';
if(field.hasAttribute('title') && field.getAttribute('title').length > 0) {
msg += ' '+field.getAttribute('title');
}
doCustomValidity(field, msg);
}
}
if(field.hasAttribute('type') &&
field.getAttribute('type').toLowerCase()=== 'email') {
var pattern = new RegExp(/\S+@\S+\.\S+/);
if(!pattern.test(field.value)) {
doCustomValidity(field, 'Please enter an email address.');
}
}
if(field.hasAttribute('required') && field.value.length < 1) {
doCustomValidity(field, 'Please fill out this field.');
}
}
};
};
window.addEventListener('load',init, false);
}) ();
app.js
html, body, form, fieldset, legend, h1, ul {
margin:;
padding:;
border:;
outline:;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:;
}
form {
width: 800px; margin: 30px auto;
background-color: #DCD4CE;
border: 1px solid #423021;
box-shadow: 2px 2px 10px #666;
}
h1 {
background-color: #BEB0A3;
border-bottom: 1px solid #423021;
font-size: 2em; font-weight:;
padding: 5px 15px;
text-shadow: 1px 1px 0px #fff;
}
fieldset {
border: none; margin: 20px 20px;
border-bottom: 1px dashed #BEB0A3; padding-bottom: 20px;
}
legend {
display: block; font-weight: bold; font-size: 1.25em;
width: 100%; padding-bottom: 10px;
text-shadow: 1px 1px 0px #fff;
}
input:not([type=submit]), select {
border: 1px solid #999;
padding: 2px;
}
input:required, select:required {
background-color: lightyellow;
}
form.invalid input:invalid, form.invalid select:invalid,
form.invalid input.invalid, form.invalid select.invalid {
background-color: #FFD4D4;
border: 1px solid maroon;
}
ul {
list-style-type: none;
}
li {
display: block; width: 380px; float: left;
}
li div {
width: 130px; float: left; margin-top: 5px;
color: #444; font-size: 0.8em; font-weight:;
}
li label.required div {
font-weight: bold;
}
li label span {
font-size: 11px; font-weight:; color: #333;
}
li input, li select {
width: 225px; margin-bottom: 5px;
font-size: 0.9em;
}
span.twitter_prefix { color: #666; font-size: .95em; font-weight: bold; }
input.city { width: 80px; margin-right:; }
input.state { width: 35px; margin-right:; }
input.zip { width: 90px; }
input.twitter { width: 206px; }
table {
width: 100%;
border: 1px solid #705536;
border-collapse: collapse;
box-shadow: 1px 1px 10px #666;
}
th, td {
border: 1px solid #705536;
padding: 5px 10px;
}
th {
text-shadow: 1px 1px 0px #000; font-weight: bold;
}
thead th:nth-child(1), thead th:nth-child(2) {
text-align: left;
}
thead th:nth-child(4), thead th:nth-child(5) {
text-align: right;
}
tbody tr td {
background-color: #e5dad2;
}
tbody tr:nth-child(even) td {
background-color: #fff3e9;
}
tbody td:nth-child(1) {
width: 110px;
}
tbody td:nth-child(3) {
width: 60px; text-align: center;
}
td input {
width: 50px; height: 28px; font-size: 1.1em; text-align: right;
}
tbody td:nth-child(4) {
width: 60px; text-align: right;
}
tbody td:nth-child(5) {
width: 80px; text-align: right;
}
th {
background-color: #614023;
color: #fff;
}
tfoot td {
background-color: #BEB0A3;
text-align: right; font-weight: bold;
font-size: 1.15em;
text-shadow: 1px 1px 0px #fff;
}
input[type=month] { width: 100px; }
input.cvv { width: 60px; text-align: right; }
.buttons {
margin: 15px 20px 10px; text-align: right;
}
input[type=submit], input[type=button] {
border: 1px solid #423021;
background-color: #896640;
color: #fff; padding: 6px 10px;
border-radius: 6px;
text-shadow: 1px 1px 0px #000;
font-size: 0.9em; cursor: pointer;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #896640 0%, #705536 100%);
background-image: -moz-linear-gradient(top, #896640 0%, #705536 100%);
background-image: -o-linear-gradient(top, #896640 0%, #705536 100%);
background-image: -ms-linear-gradient(top, #896640 0%, #705536 100%);
background-image: linear-gradient(to bottom, #896640 0%, #705536 100%);
}
input[type=submit]:active, input[type=button]:active {
background-color: #705536;
background-image: -webkit-linear-gradient(bottom, #896640 0%, #705536 100%);
background-image: -moz-linear-gradient(bottom, #896640 0%, #705536 100%);
background-image: -o-linear-gradient(bottom, #896640 0%, #705536 100%);
background-image: -ms-linear-gradient(bottom, #896640 0%, #705536 100%);
background-image: linear-gradient(to top, #896640 0%, #705536 100%);
}
.placeholder {
color: #999;
}
.month-picker-month { width: 115px; }
.month-picker-year { width: 55px; text-align: right; }
style.css
学习《html5 in action》的更多相关文章
- 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 一
1. Linux的档案权限与目录配置 一.基础知识: a.分为三类,拥有者(owner).群组(group).其他人(other) b.三个核 ...
- 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 四 档案的文件系统的压缩和打包
1.压缩文件案的用途与技术 a.用途,简单来说,就是节约磁盘空间.如果从传输角度讲,占用宽带也会小很多(Apache就有自动压缩的功能,节省宽带资源,提升网站的输出能力) b.压缩技术 ...
- 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 三 Linux磁盘与文件系统管理
一.认识EXT2文件系统: a.硬盘的组成:转动小马达+存储的磁盘+读写的机械臂 b.磁盘的一些概念 扇区为最小的物理储存单位,每个扇区为512B ...
- 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 二
Linux档案与目录管理 1.一些比较特殊的目录,需要用力的记下来 . 代表当前层目录 .. 代表上一层目录 - 代表前一个工作目录 (这个好屌!其他的 ...
- 《鸟哥的Linux私房菜--基础篇》学习
第四章 显示日期与时间的指令:date 输入: (base) liyihuadeMacBook-Pro:~ liyihua$ date 输出: Thu Jun 6 08:44:02 CST 2019 ...
- 拒绝从入门到放弃_《鸟哥的 Linux 私房菜 — 基础学习篇(第三版)》必读目录
目录 目录 前言 关于这本书 必看知识点 最后 前言 相信部分刚进入这个行业的新同学会对一个问题感到疑惑,为什么从培训学校出来的学员不被欢迎? 这里记录下一些我个人的看法(博主也曾有面试新员工的经历) ...
- 每周一书-《鸟哥的Linux私房菜基础学习篇(第四版)》台湾原版，你想要吗？
首先说明,本周活动有效时间为2016年10月19日到2016年10月31日. 目在介绍这本书之前,首先要感谢QQ号为:1084830483(路在远方),来自哈尔滨工程大学的同学赠送给玄魂工作室的 ...
- 【Linux】鸟哥的Linux私房菜基础学习篇整理（一）
最近,一直在写PPC的模拟器和汇编器,也在做设计.所以重新看了看<鸟哥的Linux私房菜>,还是有好多命令不太熟悉.就打算写几篇blog记下来. 1. nl [-bnw] filename ...
- 《鸟哥的Linux私房菜-基础学习篇（第三版）》（三）
第2章 Linxu怎样学习 1. Linux当前的应用角色 当前的Linux常见的应用可略分为企业应用和个人应用双方面. 首先谈了企业环境的利用. 1)网络server. 2)关键任务 ...
- 鸟哥的Linux私房菜 基础学习篇读书笔记（9）：Linux磁盘与文件系统管理（2）
上一篇文章主要从理论上分析了Linux的Ext2文件系统.这一篇主要解说怎样查看Linux的文件系统的容量以及解说Linux文件系统中的连接文件. 能够通过df和du命令来查看磁盘与文件夹的容量.df ...
随机推荐
- IScroll某些手机下不触发ScrollEnd问题处理
同样是微信7.0,看起来内核都是x5内核,两款不同的手机,一个有问题,一个没有问题. IScroll在问题手机下会出现快速拨动时候不触发ScrollEnd事件现象,轻点一次才会触发,解决办法 docu ...
- 不定参数对arguments对象的影响
如果声明函数时定义了不定参数,则在函数被调用时,arguments对象包含了所有传入的参数: function checkArgs(...args){ console.log(args.length, ...
- Contest2161 - 2019-3-21 高一noip基础知识点 测试4 题解版
传送门 预计得分:100+100+100+10=310 实际得分:100+0+82+10=192 你们基础知识不行啊——by wxg T1 一看数据范围就是搜索 但是不能因为数据范围就断送了dp的心 ...
- 【转载】Jenkins安装以及邮件配置
转载:http://www.nnzhp.cn/archives/590 Jenkins介绍 Jenkins是一个java开发的.开源的.非常好用持续集成的工具,它能帮我们实现自动化部署环境.测试.打包 ...
- 设计模式三: 代理模式(Proxy) -- JDK的实现方式
简介 代理模式属于行为型模式的一种, 控制对其他对象的访问, 起到中介作用. 代理模式核心角色: 真实角色,代理角色; 按实现方式不同分为静态代理和动态代理两种; 意图 控制对其它对象的访问. 类图 ...
- PageUtil.java分页工具类
package com.chabansheng.util; /** * 分页工具类 * @author Administrator * */ public class PageUtil { /** * ...
- 题解P3711：【仓鼠的数学题】
这题黑的丫!怎么会掉紫呢! noteskey 伯努利数... 这里 有介绍哟~ 写的非常详细呢~ 反正这题就是推柿子... 另外就是黈力算法的运用 QWQ 我们令 \(ANS(x)\) 为答案多项式, ...
- Windows2016的 IIS中配置PHP7运行环境
Windows2016的 IIS中配置PHP7运行环境 在Windows 的IIS(8.0)中搭建PHP运行环境: 一:安装IIS服务器 .进入控制面板>>程序和功能>>打开或 ...
- 帆软报表（finereport）图表——扇形图/等弧度的玫瑰图
扇形图/等弧度的玫瑰图,展示的是展示数据所占的比例,需要所有数据的和加起来为1. 下面利用一个实例说明玫瑰图的用法和设置起始角度和终止角度,操作如下: 1.配置一个内置数据集 新增一个等弧度的玫瑰图模 ...
- nginx问题相关记录
nginx目前主要用来做反向代理和负载均衡,其实它也可以是一个web服务器: 1.反向代理: location /api/ { proxy_next_upstream error timeout ht ...