表单设计——《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)打开页面,选中开发 ...
随机推荐
- Qt搜索本机网卡对应网段的在线设备
需求:销售给我的需求是找出哪些IP是没有被占用的,所以我要先找出已经被占用的IP 项目是Qt开发的,所以在网上搜索了下,搜索到的实现方式都是:QHostInfo::lookupHost,但是这种方式, ...
- openGauss中的sequence跟Oracle的sequence有什么区别？
openGauss 中的 sequence 跟 Oracle 的 sequence 有什么区别? openGauss 中也提供了 sequence 序列功能,使用 Oracle 的用户应该都非常喜欢使 ...
- ViT：拉开Trasnformer在图像领域正式挑战CNN的序幕 | ICLR 2021
论文直接将纯Trasnformer应用于图像识别,是Trasnformer在图像领域正式挑战CNN的开山之作.这种简单的可扩展结构在与大型数据集的预训练相结合时,效果出奇的好.在许多图像分类数据集上都 ...
- c# ManualResetEventSlim
前言 后续会把异步编程的ManualResetEventSlim 深入写完,先简单介绍一下吧. ManualResetEventSlim 有set 方法和 reset .wait.dispose方法. ...
- 一周涨 15k Star 的开源项目「GitHub 热点速览」
你训练大语言模型(LLM)用的什么框架?有没有想过不用框架训练 GPT-2? GitHub 上就有这么一位大神(Andrej Karpathy),他仅用大约 1k 行的 C 代码就完成了 GPT-2 ...
- 重磅：FPGA实现MIPI DSI4线720P
1. 液晶屏概述 显示屏LCD MIPI DSI4 lane,支持分辨率720*1280,60HZ彩色显示.用于对接国产GOWIN的NR-9C的开发板和LATTICE的CROSSLINK开发板,显示M ...
- Vue-flask 展示小电影
显示小电影 前端Vue <body> <div id="app"> <button @click="handleLoad"> ...
- 力扣610(MySQL)-判断三角形（简单）
题目: 表: Triangle 写一个SQL查询,每三个线段报告它们是否可以形成一个三角形. 以 任意顺序 返回结果表. 查询结果格式如下所示. 示例1: 解题思路: 判断是否形成三角形的准则是:两 ...
- 力扣378(java&python)-有序矩阵中第 K 小的元素（中等）
题目: 给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素.请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素. 你必须找到一个 ...
- 如何用Netty写一个高性能的分布式服务框架？
简介: Netty 是一个致力于创建高性能网络应用程序的成熟的 IO 框架.相比较与直接使用底层的 Java IO API,不需要先成为网络专家就可以基于 Netty 去构建复杂的网络应用.业界常见的 ...