Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
浅谈表单元素
Search
w3cplus
December 12, 2012
Technology
3
620
浅谈表单元素
详细介绍了表单元素的制作
w3cplus
December 12, 2012
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
CSS Future
w3cplus
2
620
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
590
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
Other Decks in Technology
See All in Technology
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.1k
PacketProxyで探るGemini CLIのコンテキストエンジニアリング 〜AIエージェントを信頼できる相棒に〜
kakira9618
0
620
stupid jj tricks
indirect
0
1.4k
全身画像からコーデアイテムを抽出し毎日にIRODORIを!デバイス完結型アプリを作る
zozotech
PRO
0
110
App Clip 5年史: 萌動と停滞のクロニクル
judau
0
150
高セキュリティ要件を満たすためのiOSアプリ開発:MASVS v2.0.0対応から学ぶ実践知見
antony_kambara
0
380
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
0
130
SSG の限界を破る、再ビルド不要なサイト
reyalka
2
530
新卒QAエンジニアの成長戦略
qatonchan
0
230
低リスクで小学生男児を鍵っ子にする 俺の勉強会#4
inakaphper
0
200
Streamlit は社内ツールだけじゃない!PoC の速さで実現する'商用品質'の分析 SaaS アーキテクチャ
kdash
0
460
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
760
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
GitHub's CSS Performance
jonrohan
1032
460k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Agile that works and the tools we love
rasmusluckow
330
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building an army of robots
kneath
306
46k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
浅谈表单元素 作者:为之,前端工程师 官网:http://www.w3cplus.com 微博:http://weibo.com/w3cplus
提纲 部分表单元素的一些简单分析 平时表单的需求分析 form.css实战 表单元素的美化
1、部分表单元素的一些简单分析 �radio & checkbox �submit 等btn 参考资料: input 按钮在IE下兼容问题 表单button的行高问题
如何移除button在IE67下的黑边 修复iPhone上submit按钮bug form radio & checkbox解决方案 submit提交按钮解决方案
1、部分表单元素的一些简单分析 参考资料: select的最佳预设 IE下 z-index 的各种坑 最佳预设 ie6层级问题 �select
1、部分表单元素的一些简单分析 参考资料: Styling the HTML5 placeholder HTML5, Placeholder, line-height in
Webkit Making HTML5 input placeholder text behave in Safari normalize.css WebKit HTML5 Search Inputs safari bug 定义样式 �placeholder �type="search"
2、表单元素需求分析 �水平label �垂直label �水平radio & checkbox �垂直radio & checkbox
2、表单元素需求分析 �提示文字 �提示文字用placeholder来搞定 �报错信息 或 在右侧显示span 单行显示,在表单顶部或底部p
2、表单元素需求分析 �一个label多个表单元素 �label加文字 �多个label多个元素
3、form.css 好了,是时候跟那些变态的需求说bye bye了 form.css 简单来说,form.css能帮助你快速完成上述的各种变态需求 当然看起来结构有点臃肿,但是到目前为止,所有的结构标 签都是必须的,真的没有多余可说,所以它能够面临上述所 有的各种变化需求。 参考资料: form解决方案
3、form.css css之所以能有用,当然得取决于一定结构的html 参考资料: form表单结构 .form-horizontal, .form-vertical .form-item, .form-radio-checkbox-wrap, .item-no-label, .form-action,
.inline-form-item .form-field .form-text, .form-radio, .form-checkbox, .code-pic, .inputbtn select,textarea .field-list-block, .inline-ele .form-error, .form-alert, .form-notice, .form-success, .form-info .fele
3、form.css �文本框 �textarea NO file �radio & checkbox
3、form.css �验证码 �条款,自动登录 NO file �select �submit
参考资料: 美化表单——自定义单选按钮和复选按钮 美化表单——自定义checkbox和radio样式 自定义表单——美化你的文件载入框 使用CSS3的appearance属性改变元素的外观 4、表单元素美化
4、谢谢 建议或疑问 email:['xuyc_brother','foxmail.com'].join('@') qq:'623089826'.replace(/8/g,'5') http://www.w3cplus.com