学习《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 ...
随机推荐
- Docker：单机编排工具docker-compose [十二]
一.docker-compose的安装 1.安装 curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.re ...
- [再寄小读者之数学篇](2014-05-28 Ladyzhenskaya 不等式)
$$\bex f\in C_c^\infty(\bbR^2)\ra \sen{f}_{L^4}\leq \sqrt{2} \sen{f}_{L^2}^{1/2} \sen{\p_1f}_{L^2}^{ ...
- 玩转ubuntu之初体验
安装的是ubuntu16.04.1,分区和具体细节就不多说了,非常简单 安装完之后要做的几件事: 1.设置root密码 #设置root密码 sudo passwd root 2.检查并更新系统 #ub ...
- Django小技巧——使用package管理app
在一个学习视频上看见的小技巧,遂记录下来. 1. 如下图所示,项目中有多个app,本技巧要解决的问题是集中管理这多个app,将其放入一个package下集中管理,改善项目的视图环境 2. 建立一个pa ...
- 解压unzip的用法
1.把文件解压到当前目录下 [root@instance-q6z0ksfb xmerge_test]# unzip db1.zip 2.把文件解压到指定的目录下,需要用到-d参数. unzip -d ...
- PERFECT NUMBER PROBLEM（思维）
题目链接:https://nanti.jisuanke.com/t/38220 题目大意:这道题让我们判断给定数字是否为完美数字,并给来完美数字的定义,就是一个整数等于除其自身之外的所有的因子之和. ...
- Spring系列(三) Bean装配的高级技术
profile 不同于maven的profile, spring的profile不需要重新打包, 同一个版本的包文件可以部署在不同环境的服务器上, 只需要激活对应的profile就可以切换到对应的环境 ...
- Pytorch 常用函数
1. torch.renorm(input, p, dim, maxnorm, out=None) → Tensor Returns a tensor where each sub-tensor of ...
- 【python】md5加密方法相关使用
md5方法在hashlib库中,使用前需要先导入.它的主要方法为update,copy,以及转换为二进制,十六进制. 用法说明: Help on HASH object: class HASH(bui ...
- thinkpad 睡眠唤醒后热键功能正常，但屏幕无法显示状态/进度条/图标
由于博主比较习惯笔记本开盖即用,合盖即走,不大习惯开机关机(毕竟SSD速度杠杠滴^_^).可是发现笔记本长时间睡眠乃至休眠唤醒后,使用thinkpad热键,虽然可以调节,但屏幕不显示调节状态了.解决步 ...