首页 > 代码库 > 使用fieldset标签结合CSS Lable实现表单的布局
使用fieldset标签结合CSS 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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。