使用fieldset标签结合CSS Lable实现表单的布局

发布时间：2018-09-05 14:53:17 所属栏目：专访来源：站长网

导读：使用fieldset标签结合CSS的Lable标签实现表单的布局，以前听一些新手说，用CSS而布局表单真的有点难啊，其实是没找到方法，使用fieldset标签，再配合Lable可达到事半功倍的效果，而且布局出来的表单代码简洁、结构清淅，也便于修改，何不尝试一下呢？演示

　　使用fieldset标签结合CSS的Lable标签实现表单的布局，以前听一些新手说，用CSS而布局表单真的有点难啊，其实是没找到方法，使用fieldset标签，再配合Lable可达到事半功倍的效果，而且布局出来的表单代码简洁、结构清淅，也便于修改，何不尝试一下呢？

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS表单</title> <style> h1 { font: 1.2em Arial, Helvetica, sans-serif; } input.txt { color: #00008B; background-color: #E3F2F7; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; } form p { clear: left; margin: 0; padding: 0; padding-top: 5px; } form p label { float: left; width: 30%; font: bold 0.9em Arial, Helvetica, sans-serif; } fieldset { border: 1px dotted #61B5CF; margin-top: 16px; padding: 10px; } legend { font: bold 0.8em Arial, Helvetica, sans-serif; color: #00008B; background-color: #FFFFFF; } .akey { text-decoration: underline; } </style> </head> <body> <h1>User Registration Form</h1> <form method="post" action="accesskeys.html"> <fieldset> <legend><span class="akey">P</span>ersonal Information</legend> <p> <label for="fullname">Name:</label> <input type="text" name="fullname" id="fullname" class="txt" accesskey="p" /> </p> <p> <label for="email">Email Address:</label> <input type="text" name="email" id="email" class="txt" /> </p> <p> <label for="password1">Password:</label> <input type="password" name="password1" id="password1" class="txt" /> </p> <p> <label for="password2">Confirm Password:</label> <input type="password" name="password2" id="password2" class="txt" /> </p> </fieldset> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up!" class="btn" /> </p> </form> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：温州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!