表单设计——《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)打开页面,选中开发 ...
随机推荐
- 在HarmonyOS上使用ArkUI实现计步器应用
介绍 本篇Codelab使用ArkTS语言实现计步器应用,应用主要包括计步传感器.定位服务和后台任务功能: 1. 通过订阅计步器传感器获取计步器数据,处理后显示. 2. 通过订阅位置服务获取位 ...
- Android 开发入门（5）
0x07 数据存储 (1)共享参数 SharedPreferences a. 用法 用法 SharedPreferences 是 Android 的一个轻量级存储工具,采用的存储结构为键值对的方式 共 ...
- mysql 重新整理——索引简介[七]
前言 百度百科索引: 在关系数据库中,索引是一种单独的.物理的对数据库表中一列或多列的值进行排序的一种存储结构,它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单. ...
- ef 查询生成语句的几种方式
前言 整理一下ef 如何查看生成sql 语句的,现在有ef core 了,统一整理一下. 正文 方式如下: 数据库监听 这是一种推荐方式,因为调试和代码分开,不会有影响. 然后连接: 然后可以进行一些 ...
- Typora图床配置（Typora+PicGo+Github）
Typora图床配置(Typora+PicGo+Github) 一.Github配置 登录github:https://github.com/ 新建仓库 生成私人令牌 Settings->Dev ...
- 常用注解使用总结系列: @Order 注解
@Order 注解 @Order注解主要用来控制配置类的加载顺序示例代码: package com.runlion.tms.admin.constant; public class AService ...
- 在Windows电脑上快速运行AI大语言模型-Llama3
概述 近期 Meta 发布了最新的 Llama3 模型,并开源了开源代码.Meta Llama 3 现已推出 8B 和 70B 预训练和指令调整版本,可支持广泛的应用程序. 并且 Llama 3 在语 ...
- 让容器跑得更快：CPU Burst 技术实践
简介:让人讨厌的 CPU 限流影响容器运行,有时人们不得不牺牲容器部署密度来避免 CPU 限流出现.我们设计的 CPU Burst 技术既能保证容器运行服务质量,又不降低容器部署密度.CPU Bur ...
- 技术干货 | 应用性能提升 70%，探究 mPaaS 全链路压测的实现原理和实施路径
简介: 全链路压测方案下,非加密场景下至少有 70% 的性能提升,加密场景下 10%的性能提升,并在 MGS 扩容完成后可实现大幅的性能提升,调优的结果远超预期. 业务背景 随着移动开发行业的步 ...
- [PPT] WPS 提取 PPT 中的母版到另一份 PPT 中
1. 打开 PPT. 2. 视图 - 幻灯片母版,在第一个 ppt 上面 "鼠标右键 - 复制" 来进行拷贝. 3. 打开目标 PPT,视图 - 幻灯片模板,快捷键 Ctrl + ...