学习《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 ...
随机推荐
- 老男孩Python全栈学习 S9 日常作业 001
1.简述变量命名规范 必须以字母.数字.下划线命名,且不能以数字开头 不能是python的关键字 不能以中文或者拼音作为变量名 命名格式推荐以驼峰式或者下划线连接命名 区分大小写 要有意义,具有可描述 ...
- EF CodeFirst系列（8）--- FluentApi配置单个实体
我们已经知道了在OnModelCreating()方法中可以通过FluentApi对所有的实体类进行配置,然而当实体类很多时,我们把所有的配置都放在OnModelCreating()方法中很难维护.E ...
- OpenStack虚拟机冷迁移与热迁移
一.虚拟机迁移分析 openstacvk虚拟机迁移分为冷迁移和热迁移两种方式. 1.1冷迁移: 冷迁移(cold migration),也叫静态迁移.关闭电源的虚拟机进行迁移.通过冷迁移,可以选择将关 ...
- 使用docker部署SqlServer
踩了很多坑,来记录一下 首先说sqlserver 1. 安装docker要使用centos 7以上版本,使用centos 6及以下版本会出现各种问题 2. docker CE安装过程 $ sudo y ...
- .NET面试题系列（十六）数据库面试题
数据库事务的四大特性 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚.因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则不能对数据库有任何影响. ...
- SpringBoot中Application开启与关闭
0.声明 缘由:没有学过或者没有经历SpringBoot的Application运行机制的话,一定会好奇,博主为啥会写一篇关闭开启的博文,是不是好幼稚?(/o(╥﹏╥)o),待我娓娓道来......为 ...
- 树链剖分详解（洛谷模板 P3384）
洛谷·[模板]树链剖分 写在前面 首先,在学树链剖分之前最好先把 LCA.树形DP.DFS序 这三个知识点学了 emm还有必备的 链式前向星.线段树 也要先学了. 如果这三个知识点没掌握好的话,树链剖 ...
- smartgit
1.同步最新分支 2.smartgit ctrl+2 可以看到本地新增加的文件
- 爬虫-通过本地IP地址从中国天气网爬取当前城市天气情况
1.问题描述 最近在做一个pyqt登录校园网的小项目,想在窗口的状态栏加上当天的天气情况,用爬虫可以很好的解决我的问题. 2.解决思路 考虑到所处位置的不同,需要先获取本地城市地址,然后作为中 ...
- MongoDB在CentOS上的安装和配置
1. 创建mongodb-org-4.0.repo文件,并放入/etc/yum.repos.d目录下,repo文件内容如下 [mongodb-org-4.0] name=MongoDB Reposit ...