首页 > 代码库 > CSS构造表单
CSS构造表单
结构化表单布局
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>选择符类型_标签选择符</title><style type="text/css"> #regForm fieldset { padding:20px;; border:0; border-top:1px #d0d0bf solid; } #regForm legend { padding:0 10px; font-weight:bold; } #regForm .dataArea { padding:3px 0; } #regForm .frist { padding:8px 0 2px; } #regForm .subArea input { padding:1px 4px; } #regForm label { width:112px; text-align:right; float:left; }</style></head><body> <form id="regForm"> <fieldset> <legend>登陆信息</legend> <div class="dataArea frist"> <label for="username"> 用户 名 ： </label><input type="text" id="username" class="input" /> </div> <div class="dataArea"> <label for="password"> 密 码 ： </label><input type="text" id="password" class="input" /> </div> <div class="dataArea"> <label for="passwordVerify"> 确 认 密 码 ： </label><input type="text" id="passwordVerify" class="input" /> </div> </fieldset> <fieldset> <legend>个人信息</legend> <div class="dataArea frist"> <label for="nickname"> 昵 称 ： </label><input type="text" id="nickname" /> </div> <div class="dataArea"> <label for="email" class="hint"> 电子邮 件 ： </label><input type="text" id="email" /> </div> <div class="subArea"> <input type="submit" value="注册 " /> <input type="button" value="返回" /> </div> </fieldset> </form></body>
表单外边框设置
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>选择符类型_标签选择符</title><style type="text/css"> Fieldset { Margin:0 0 10px 0; Padding: 5px; Border: 1px solid #333; } Legend { Background-color: #ddd; Margin:0; Padding: 5px; Border-style: solid; Border-width: 1px; Border-color: #fff #aaa #666 #fff; } Fieldset { Background: #ddd; }</style></head><body> <form> <fieldset> <legend>登陆信息</legend> </fieldset> </form></body>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。