学习《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 ...
随机推荐
- openJDK之如何下载各个版本的openJDK源码
如果我们需要阅读openJDK的源码,那么需要下载,那么该去哪下载呢? 现在JDK已经发展到版本10了,11已经处于计划中,如果需要特定版本的openJDK,它们的下载链接在哪呢? 1.openJDK ...
- nodejs和npm的关系【转】
node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系: nodejs中含有npm,比如说你安装好nodej ...
- Shiro 系列: 简单命令行程序示例
在本示例中, 使用 INI 文件来定义用户和角色. 首先学习一下 INI 文件的规范. =======================Shiro INI 的基本规范================== ...
- 小程序图片转Base64
在小程序中,有些业务要用到 图片的 base64 wx.chooseImage({ success: res => { wx.getFileSystemManager().readFile({ ...
- [再寄小读者之数学篇](2014-06-20 求极限-H\"older 不等式的应用)
设非负严格增加函数 $f$ 在区间 $[a,b]$ 上连续, 有积分中值定理, 对于每个 $p>0$ 存在唯一的 $x_p\in (a,b)$, 使 $$\bex f^p(x_p)=\cfrac ...
- Groovy 设计模式 -- 享元模式
Flyweight Pattern 享元模式, 将对象的相同属性, 以节省内存为目的,存储为一份公共对象, 所有对象共用此分对象. The Flyweight Pattern is a pattern ...
- [译]Ocelot - Logging
原文 Ocelot使用标准的日志接口ILoggerFactory和ILogger<T>.它们封装在IOcelotLogger 和 IOcelotLoggerFactory中,因为ocelo ...
- js中的简单数据类型和复杂数据类型的存储
基本类型存储的是值而复杂数据类型也叫引用类型存储的是对象的地址如0x00001而在栈中存的是变量数值和函数参数 堆中存的是对象和数组 堆栈空间分配 栈(操作系统):由操作系统自动分配释放 ,存放函数的 ...
- 第30月第6天 git log
1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...
- L1-Day2
L1-Day21.明智的人从来不生气. [我的翻译]A wise man is never angry. [标准答案]A wise man never gets angry. [对比分析]be和get ...