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
610
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
580
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
Other Decks in Technology
See All in Technology
生成AI時代のデータ基盤
shibuiwilliam
4
3.1k
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
170
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
390
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
550
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.2k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
200
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
280
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
510
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
230
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
360
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
0
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Designing for humans not robots
tammielis
253
25k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Unsuck your backbone
ammeep
671
58k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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