浅谈表单元素

详细介绍了表单元素的制作

Transcript

1. 浅谈表单元素 作者：为之，前端工程师 官网：http://www.w3cplus.com 微博：http://weibo.com/w3cplus
2. 提纲 部分表单元素的一些简单分析 平时表单的需求分析 form.css实战 表单元素的美化
3. 1、部分表单元素的一些简单分析 �radio & checkbox �submit 等btn 参考资料： input 按钮在IE下兼容问题 表单button的行高问题 如何移除button在IE67下的黑边 修复iPhone上submit按钮bug form radio & checkbox解决方案 submit提交按钮解决方案
4. 1、部分表单元素的一些简单分析 参考资料： select的最佳预设 IE下 z-index 的各种坑 最佳预设 ie6层级问题 �select
5. 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"
6. 2、表单元素需求分析 �水平label �垂直label �水平radio & checkbox �垂直radio & checkbox
7. 2、表单元素需求分析 �提示文字 �提示文字用placeholder来搞定 �报错信息 或 在右侧显示span 单行显示，在表单顶部或底部p
8. 2、表单元素需求分析 �一个label多个表单元素 �label加文字 �多个label多个元素
9. 3、form.css 好了，是时候跟那些变态的需求说bye bye了 form.css 简单来说，form.css能帮助你快速完成上述的各种变态需求 当然看起来结构有点臃肿，但是到目前为止，所有的结构标 签都是必须的，真的没有多余可说，所以它能够面临上述所 有的各种变化需求。 参考资料： form解决方案
10. 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
11. 3、form.css �文本框 �textarea NO file �radio & checkbox
12. 3、form.css �验证码 �条款，自动登录 NO file �select �submit
13. 参考资料： 美化表单——自定义单选按钮和复选按钮 美化表单——自定义checkbox和radio样式 自定义表单——美化你的文件载入框 使用CSS3的appearance属性改变元素的外观 4、表单元素美化
14. 4、谢谢 建议或疑问 email：['xuyc_brother','foxmail.com'].join('@') qq：'623089826'.replace(/8/g,'5') http://www.w3cplus.com