时间:2021-04-16
基于易用性(accesibility)的考虑,表单的标准写法应该在<form>和</form>之中包含fieldset和legend(说明),让用户明白该表单域的内容概要。简单的结构如下:
<form>
<fieldset>
<legend></legend>
......
</fieldset>
</form>
在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观,好办,在CSS中把fieldset的border设置为0,legend的display设置为 none就行了。
在绝大多数情况下,表单的布局分两列,左边是标记(label),右边是输入框(input type="text"...)。如此简单的两列布局,强烈建议不要使用表格。Web标准通用的解决方法是,为label和input type="text"...的外围加上一个div,并把把该div的display设置为block。把label设为float: left;(这也是要把div设置为display: block;的原因)之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是,固定label的宽度,然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是,使用单位em根据标记的最大字数来定宽度,不必辛苦测试px。
为了使我的阐述更容易理解,简单写些代码:
XHTML:(部分)
<form>
<fieldset>
<legend>表单实例</lengend>
<div><label for="name">姓名:</label><input type="text" id="name" /></div>
<div><label for="etc">其他等等:</label><input type="text" id="etc" /></div>
<div class="submit"><input type="submit" value="提交" /></div>
</fieldset>
</form>
CSS:(部分)
body {
width: 400px;
margin: 20px auto;
font: 14px/1.5 Serif;
}
fieldset {
border: none;
border-top: 1px solid #ccc;
}
legend {
padding: 2px;
border: 1px solid #ddd;
background: #ececed;
}
div {
display: block;
padding: 5px 0;
}
label {
float: left;
width: 6em;
text-align: right;
}
.submit {
margin-left: 6em;
}
.submit input {
padding: 2px;
border: 1px solid #ccc;
background: #ececec;
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Web上传文件的三种解决方案分享给大家:这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交
开发企业网站用什么框架,什么是网站的标准开发框架?相信大家都会说开发企业网站当然是Web框架,因为现在是主流,下面就来介绍一下网站建设Web框架。 Web
乱码是让人很头疼的一件事,本文介绍了彻底解决SpringMVC中文乱码问题的方案,具体如下:1:表单提交controller获得中文参数后乱码解决方案注意:js
1,jQueryFlash插件jQueryFlash插件主要提供Flash在WEB页面的嵌入式解决方案。2,jPlayerjPlayer是一款用于在网页上播放和
phpMyAdmin缺少mysqli扩展。请检查PHP配置的解决方案有需要的朋友可参考一下。phpMyAdmin缺少mysqli扩展。请检查PHP配置的解决方案