DIVCSS 第十四章 CSS 构造表单

[复制链接]
ARCHY明星会员实名认证 发表于 2012-10-27 10:42:15 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题
ad广告
ad广告

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
一般的网站都会涉及到搜索和用户登录,这2部分基本都是通过表单来完成的。之前html教程第7章 表单from的功能结构,没有看过的请先查看,然后在继续下面的内容。

1、表单标签的使用
  1. <label for=”name”>姓名: <input type=”text” name=”name” id=”name” />
复制代码
2、去掉默认的表单间隔
  1. Form {Margin: 0;Padding: 0;}
复制代码
3、给文本框添加漂亮的边框
  1. Input,textarea {Border: 3px double #333;}
复制代码
4、给下拉菜单设置背景色
  1. select {background:red;}
复制代码
5、给文本区域添加滚动条
  1. textarea {SCROLLBAR-FACE-COLOR: #333;SCROLLBAR-HIGHLIGHT-COLOR: #666;SCROLLBAR-SHADOW-COLOR: #333;SCROLLBAR-3DLIGHT-COLOR: #999;SCROLLBAR-ARROW-COLOR: #999;
  2. SCROLLBAR-TRACK-COLOR: #000;SCROLLBAR-DARKSHADOW-COLOR: #000;}
复制代码
6、表单外边框设置fieldset legend
  1. Fieldset {Margin:0 0 10px 0;Padding: 5px;Border: 1px solid #333;}
  2. Legend {Background-color: #ddd;Margin:0;Padding: 5px;Border-style: solid;Border-width: 1px;Border-color: #fff #aaa #666 #fff;}
  3. Fieldset {Background: #ddd;}
复制代码
7、结构化表单布局
  1. <form id="regForm">
  2. <fieldset>
  3. <legend>登陆信息</legend>
  4. <div class="dataArea frist">
  5. <label for="username"> 用户名: </label><input type="text"
  6. id="username" class="input" />
  7. </div>
  8. <div class="dataArea">
  9. <label for="password"> 密码: </label><input type="text"
  10. id="password" class="input" />
  11. </div>
  12. <div class="dataArea">
  13. <label for="passwordVerify"> 确认密码: </label><input
  14. type="text" id="passwordVerify" class="input" />
  15. </div>
  16. </fieldset>
  17. <fieldset>
  18. <legend>个人信息</legend>
  19. <div class="dataArea frist">
  20. <label for="nickname"> 昵称: </label><input type="text"
  21. id="nickname" />
  22. </div>
  23. <div class="dataArea">
  24. <label for="email" class="hint"> 电子邮件: </label><input
  25. type="text" id="email" />
  26. </div>
  27. <div class="subArea">
  28. <input type="submit" value="注册" /> <input type="button"
  29. value="返回" />
  30. </div>
  31. </fieldset>
  32. </form>
  33. #regForm fieldset {padding:0 20px 10px;border:0;border-top:1px #d0d0bf solid;}
  34. #regForm legend {padding:0 10px;font-weight:bold;}
  35. #regForm .dataArea {padding:2px 0;}
  36. #regForm .frist {padding:8px 0 2px;}
  37. #regForm .subArea input {padding:1px 4px;}
  38. #regForm label {width:110px;text-align:right;float:left;}
复制代码
第十三章 CSS 构造表格

15天学习DIV+CSS教程汇总导读




上一篇:第十三章 CSS 构造表格
下一篇:第十五章 div的4种布局

大神点评6

judith912 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
都是那么过来的,支持哈  
nckangbai 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
又看了一次  
[url=http://www.jjyuyue.com]校园文学[/url]|http://www.jjyuyue.com
judith912 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
不错,看看。  
vilidea 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
有才的不在少数啊  
jingjinxin 发表于 2012-12-15 10:45:58 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
xzqifan 发表于 2013-2-26 13:45:33 [DIVCSS] 显示全部楼层
本帖最后由 xzqifan 于 2013-2-26 13:48 编辑

<label for=”name”>姓名: <input type=”text” name=”name” id=”name” />
我记错了,label 后面带form
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表