表单设计——《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)打开页面,选中开发 ...
随机推荐
- 金融App面临安全风险？解锁HMS Core安全检测服务解决方案
数字经济时代,金融类App成为人们理财.购买证券股票以及办理各项银行业务的重要载体.科技驱动着金融行业的转型升级,但在创新发展的同时,金融App面临的安全风险类型与场景也在持续增加.如何更好地规避安全 ...
- 如何采用VuePress构建文档网站
作者:倾城 博客: https://www.codingbrick.com 寄语:当你意识到面子不重要时,你才算个真正的成年人. 在建设博客的初期,我采用GitBook构建了编码专家的专栏系统.Git ...
- html 渲染原理
渲染 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回 ...
- （节流）js防止重复频繁点击或者点击过快方法
1.方法一:用定时器定时,没跑完定时器,点击按钮无效 <script> var isClick = true; $("button").on("click&q ...
- 【力扣精选】Oracle SQL 176. 第二高的薪水
[力扣精选]Oracle SQL 176. 第二高的薪水 这道题很适合用来作为窗口函数的入门使用练习 链接如下: https://leetcode.cn/problems/second-highest ...
- 力扣1127(MySQL)-用户购买平台（困难）
题目: 支出表: Spending 这张表记录了用户在一个在线购物网站的支出历史,该在线购物平台同时拥有桌面端('desktop')和手机端('mobile')的应用程序.这张表的主键是 (user_ ...
- 力扣180(MySQL)-连续出现的数字（中等）
题目: 编写一个 SQL 查询,查找所有至少连续出现三次的数字. 返回的结果表中的数据可以按 任意顺序 排列. 查询结果格式如下面的例子所示: 解题思路: 原表数据: 方法一: 使用内连接(inner ...
- 源码解读：KubeVela 是如何将 appfile 转换为 K8s 特定资源对象的
简介: KubeVela 是一个简单易用又高度可扩展的云原生应用管理引擎,是基于 Kubernetes 及阿里云与微软云共同发布的云原生应用开发模型 OAM 构建.本文主要目的是探索 KubeVela ...
- GRPC: 如何优雅关闭进程（graceful shutdown）
简介: 本文将介绍优雅关闭 gRPC 微服务.在进程收到关闭信号时,我们需要关闭后台运行的逻辑,比如,MySQL 连接等等. 介绍 本文将介绍优雅关闭 gRPC 微服务. 什么是优雅关闭? 在进程收 ...
- [FAQ] 为什么部署到 github pages 时自定义域名总失效 (push-dir)
Github_Pages 能方便我们部署静态页面,并且还支持 CNAME 自定义域名. $ yarn add --dev push-dir $ xxx build $ push-dir --dir=d ...