表单设计——《HTML5 CSS3从入门到精通》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单设计</title>
<style type="text/css">
html,body,h1,form,fieldset,legend,ol,li{
margin:0px;
padding:0px;
}
body{
background: #fff;
color:#111;
font-family: Georgia, 'Times New Roman', Times, serif;
padding:20px;
} form#payment{
background: #9cbc2c;
border-radius: 5px;
padding: 20px;
width:400px;
margin:0 auto;
}
form#payment fieldset{
border:none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type{
margin-bottom: 0px;
}
form#payment legend{
color:#384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment>fieldset>legend:before{
counter-increment: fieldsets;
content:"Step "counter(fieldsets)"："; }
form#payment fieldset fieldset legend{
color:#111;
font-size:13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li{
background:#b9cf6a;
background: rgba(255,255,255,.3);
border-color:#e3ebc3;
border-color:rgba(255,255,255,.6);
border-style:solid;
border-width: 2px;
border-radius: 5px;
line-height: 30px;
list-style:none;
padding:5px 10px;
margin-bottom:2px;
}
form#payment ol ol li{
background: none;
border:none;
float:left;
}
form#payment label{
float:left;
font-size:13px;
width:110px;
}
form#payment fieldset fieldset label{
background: none no-repeat left 50%;
line-height: 20px;
padding:0 0 0 30px;
width:auto;
}
form#payment fieldset fieldset label:hover{ cursor:pointer; }
form#payment input:not([type=radio]),form#payment textarea{
background: #fff;
border:#fc3 solid 1px;
border-radius: 3px;
font:italic 13px Georgia,"Times New Roman",Times,serif;
outline:none;
padding:5px;
width:200px;
}
form#payment input:not([type=submit]):focus,form#payment textarea:focus{
background:#eaeaea;
border:#f00 solid 1px;
}
form#payment input[type="radio"]{
float:left;
margin-right: 5px;
}
</style>
</head>
<body>
<form action="" id="payment">
<fieldset>
<legend>用户详细资料</legend>
<ol>
<li>
<label for="name">用户名称:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名" required autofocus>
</li>
<li>
<label for="email">邮件地址:</label>
<input type="email" id="email" name="email" placeholder="example@126.com" required autofocus>
</li>
<li>
<label for="tel">联系电话:</label>
<input type="tel" id="tel" name="tel" placeholder="02354869872" required autofocus>
</li>
</ol>
</fieldset> <fieldset>
<legend>家庭住址(收货地址):</legend>
<ol>
<li>
<label for="address">详细地址:</label>
<textarea name="address" id="address" rows="1" required></textarea>
</li>
<li>
<label for="postcode">邮政编码:</label>
<input type="text" id="postcode" name="postcode" required>
</li>
<li>
<label for="country">国 家:</label>
<input type="text" id="country" name="country" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>付费方式</legend>
<ol>
<li>
<fieldset>
<legend>信用卡类型</legend>
<ol>
<li>
<input type="radio" id="visa" name="cardtype">
<label for="visa">中国工商银行</label>
</li>
<li>
<input type="radio" id="amex" name="cardtype">
<label for="amex">中国人民银行</label>
</li>
<li>
<input type="radio" id="mastercard" name="cardtype">
<label for="mastercard">中国建设银行</label>
</li>
</ol>
</fieldset>
</li>
<li>
<label for="cardnumber">银行卡号:</label>
<input type="number" required id="cardnumber" name="cardnumber">
</li>
<li>
<label for="secure">验 证 码:</label>
<input type="number" required id="secure" name="secure" required>
</li>
<li>
<label for="namecard">持 卡 人:</label>
<input type="text" required id="namecard" name="namecard" placeholder="确定是否该卡用户!">
</li>
</ol>
</fieldset>
<fieldset>
<button type="submit">现在购买</button>
</fieldset>
</form>
</body>
</html>
form#payment>fieldset>legend:before{
counter-increment: fieldsets; content:"Step "counter(fieldsets)"："; }表单设计——《HTML5 CSS3从入门到精通》的更多相关文章
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
- 2019.4.25 表格表单与HTML5 && CSS3
目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...
- HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
- UX设计秘诀之注册表单设计，细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- 表单和HTML5
1.form表单 <form action="" method=""> </form> action: 规定当提交表单时,向何处发送表单 ...
- SpreadJS V13.0发布，聚焦表单设计与数据交互，让您的工作效率突飞猛进！
纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...
- JQ表单选择器和CSS3表单选择器
JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...
- HTML表单设计（上）
1,表单标记<form>...</form> <form>...</form>定义表单的开始位置和结束位置,表单提交时的内容就是<form> ...
- SNF软件开发机器人-子系统-表单-表单设计
表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...
随机推荐
- 多线程-多个子线程执行结果插入List集合
业务场景:将多个子线程的执行结果存入List,但是总会出现List集合的长度小于子线程的执行数的情况 1.错误示例(多个线程同时操作同一个List对象,List是线程不安全) package unit ...
- recover database until cancel
数据库演示版本为 12.1.0.2 该系列涉及恢复过程中使用的 5 个语句: 1. recover database 2. recover database until cancel 3. recov ...
- 什么是MurmurHash
MurmurHash简介 MurmurHash是一种非加密散列函数,名称来自两个基本操作,乘法(MU)和旋转(R).与加密散列函数不同,它不是专门设计为难以被对手逆转,因此不适用于加密目的.在2018 ...
- ContOS7搭建RAID-0磁盘阵列
RAID-0条带数据: 优点:2块硬盘同时在写数据,而且各写各的不影响,速度较快:性能提升2倍(理论): 缺点:服务器硬盘特别容易损坏,一点损坏一个,其余不能用:没有容错性:服务器用的不多,都是配合使 ...
- UML 哲学之道——概况篇[二]
前言 简单介绍一下uml的概况篇. 正文 UML 概述: url 包括: 事物 关系 图 扩展机制 事物: 结构: 类.接口.构件.节点等等 行为:交互.状态等等 分组:包.子系统等等 注释:注释 关 ...
- 力扣67(java)-二进制求和（简单）
题目: 给你两个二进制字符串,返回它们的和(用二进制表示). 输入为 非空 字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1&quo ...
- 深度干货｜云原生分布式数据库 PolarDB-X 的技术演进
简介: 深入解读PolarDB-X的产品架构,以及分布式事务.透明分布式.水平扩展等技术内幕. 一.PolarDB-X是什么 PolarDB-X最早起源于阿里集团2009年提出用分布式架构替代传统商业 ...
- [Contract] 一次搞懂 Solidity 的 using xx for xx
using A for *; # 把 A 的函数附给任意类型使用 using A for B; # 意思是把 A 中的方法附给 B 使用 使用上面的方式,那么在我们的合约中定义了 B 类型的变量 ...
- 从零开始写 Docker(十二)---实现 mydocker stop 停止容器
本文为从零开始写 Docker 系列第十二篇,实现类似 docker stop 的功能,使得我们能够停止指定容器. 完整代码见:https://github.com/lixd/mydocker 欢迎 ...
- vue项目中element-ui等UI组件自定义样式不生效的解决
引 在使用element-ui的时候虽然默认的样式已经能够满足很多的需求了,但是有总是有时候要加上些自定义的需求.不过,有的时候样式写上去了,按理说应该是没错的,但却是不生效呢. 其实在vue项目中使 ...