建议在阅读本文之前,先阅读其他三篇文章

  1. form radio checkbox解决方案
  2. form submit解决方案
  3. form placeholder解决方案

因为文章比较长,所以做几个锚点,方便大家阅读

  1. 为什么要写这篇文章?
  2. 提出一个实验性方案
  3. form表单元素逐个分析
  4. 两个成型form案例

为什么要写这篇文章?

说实话,form表单元太复杂了,相信很多人都是见招拆招,对于每次不同的需要一般都要重新安排标签,这样每次的form表单看起来还是那几个元素,或者仅仅是增添了几个元素,但是每次做起来又感觉是重新做了一样,这是很令人讨厌的。下面我以一个简单的实例来说明下,如我们要得到一个这样的输入框

首先从最简单的入手,我们希望用最少的标签来完成上面的效果,直接使用label和input,然后使用p或者div包裹起来

html code

<p><label for="name">用户名:</label><input type="text" name="name" id="name" class="form-text" /></p>

可是实际工作中,我们的表单是没有这么简单的,一般我们需要考虑表单元素,说明注释信息及验证信息。这样上面的那个超级简单的根本经不起我们来扩展,下面我们来看这张图,相信大家都看到过下面的各种形式。

form表单设计

第一个最简单,把label设计在input里面,我们直接可以使用placeholder来实现,只需一个input标签;可是客户说怎么没有提示信息呢,用户名应该有字符的限制啊,于是我们演变成下面两种形式,一种是提示信息直接放在placeholder里面就是我们效果图的第二个,一种是放在input的后面,我们可以直接加上span标签或块级标签p或div然后设置css使其在input同一行显示,这就是我们的效果图第三个;最后客户说这个还是不行,还需要及时校验正确性并给予提示,于是有了我们的效果图第四个。可是这还没有完,一个表单总不可能就只有text输入框吧,如果有了个radio或checkbox呢,于是有了我们的效果图第五个,我们继续先遵循要什么添加什么,使用最少的标签来完成我们的任务。

html code

<div><label>举报类型:</label><label><input type="checkbox" name="reportType" class="form-checkbox" value="1" checked="checked">垃圾广告</label><label><input type="checkbox" name="reportType" class="form-checkbox" value="2">色情</label><label><input type="checkbox" name="reportType" class="form-checkbox" value="3">虚假广告</label><label><input type="checkbox" name="reportType" class="form-checkbox" value="4">其他</label></div>

如果这样的话,我们会发现太乱了,我们设置左边的label的css全部会应用到我们的这个checkboxlabel中,这肯定是不行的,这还没有完,突然另外一个项目的这个checkbox的文字比较多,需要一行一个,而不是行内元素,这就是我们的效果图第6个。

如此下来,每次修改,我们几乎都需要重写html进行布局。但是客户的需求又是变态的,每个客户考虑的根本就不一样,于是有一段时间我们几乎是见一个form就得重新写一个样式,还得考虑用什么class比较恰当,费了不少心思,可以重复利用的少之又少,写多了心里有个轮廓还快点。现在回头看看自己写的form,发现那真是五花八门啊。到此为止,现在我们来尝试性设计一个可以拷贝复制的,扩展性很强的表单元素。

实验性方案

html code

<div class="form-item">
<label for="username">用户名:</label>
<div class="form-field"><input type="text" name="username" id="username" class="form-text" /></div>
</div>

现在我们根据这个结构来实现上面所讨论效果图

用户名必须为6-32个字符
对不起,该用户名已被占用
对不起,该用户名已被占用

用户名必须为6-32个字符

上面的demo效果,因为后面我们会一个个进行讨论,所以这里不贴出html标签,如果你对html标签感兴趣的话,可以自己使用firebug查看。

好吧,上面的这个效果纯粹是折腾我自己来的,花了两天的时间琢磨。上面的radio和checkbox使用了float来解决对齐的问题,发现这种方法比其他的好多了,为了以后不纠结,我先纠结了2天。当然这个和上面的图片效果有点小出入,但是因为涉及的比较多,我又不愿加额外的class,在这就用简单的文字做点补充,相信大家都明白的。如果需要把提示信息换行显示直接设置.form-des的css为display:block;当然左边的margin也得清为0(或者同行的使用span标签,换行的使用p标签),同理如果radio的选项不是并排在同一行显示,只需去掉.field-list的float就可以了,当然margin-right也一起去掉啊,如果客户比较变态,突然对这种布局不感兴趣了,想要那种垂直的了,那我们直接在form里面加一个class为form-vertical,然后再设置class为form-vertical的label表现为block,而不是float,然后顺便把form-field的margin-left去掉就ok了,够灵活变通了吧。下面一个个元素来解决,最后再附加两个表单,详细展示。下面开始我们的伟大工程呵呵,以期待以后直接可以拷贝这个html结构进行修改就可以了

表单元素分析

input text

对不起,该用户名已被占用

html code

/*简洁版本*/
<div class="form-item">
<label for="username">用户名:</label>
<div class="form-field"><input type="text" name="username" id="username" class="form-text" /></div>
</div>
/*加强版本*/
<div class="form-item">
<label for="username">用户名:</label>
<div class="form-field"><input type="text" class="form-text" id="username" name="username" placeholder="用户名必须为6-32个字符"><span class="form-error">对不起,该用户名已被占用</span></div>
</div>

注:使用原理,这个是text类型的html代码拷贝,如果不需要placeholder或者错误的提示信息请去掉,然后改变相应的name和id及label的for值即可,千万注意别去掉了class为form-text啊

input password

html code

<div class="form-item">
<label for="pwd">密码:</label>
<div class="form-field"><input type="password" name="pwd" id="pwd" class="form-text" /></div>
</div>

input radio

html code

<div class="form-item form-radio-checkbox-wrap">
<label>radio同行:</label>
<div class="form-field">
<label><input type="radio" checked="checked" value="man" class="form-radio" name="sex"><span>男</span></label>
<label><input type="radio" value="woman" class="form-radio" name="sex"><span>女</span></label>
</div>
</div>
<div class="form-item form-radio-checkbox-wrap">
<label>radio换行:</label>
<div class="form-field">
<label class="field-list-block"><input type="radio" checked="checked" value="man" class="form-radio" name="sex"><span>男</span></label>
<label class="field-list-block"><input type="radio" value="woman" class="form-radio" name="sex"><span>女</span></label>
</div>
</div>

input checkbox

html code

<div class="form-item form-radio-checkbox-wrap">
<label>checkbox同行:</label>
<div class="form-field">
<label><input type="checkbox" checked="checked" value="1" class="form-checkbox" name=""><span>音乐</span></label>
<label><input type="checkbox" value="2" class="form-checkbox" name=""><span>小说</span></label>
<label><input type="checkbox" value="3" class="form-checkbox" name=""><span>上网</span></label>
</div>
</div>
<div class="form-item form-radio-checkbox-wrap">
<label>checkbox换行:</label>
<div class="form-field">
<label class="field-list-block"><input type="checkbox" checked="checked" value="1" class="form-checkbox" name=""><span>Option one is this and that—be sure to include why it’s great</span></label>
<label class="field-list-block"><input type="checkbox" value="2" class="form-checkbox" name=""><span>Option two can also be checked and included in form results </span></label>
<label class="field-list-block"><input type="checkbox" value="3" class="form-checkbox" name=""><span>Option three can—yes, you guessed it—also be checked and included in form results </span></label>
</div>
</div>

注:对于radio和checkbox我们在form-item并列再加一个form-radio-checkbox-wrap以单独控制这两个特殊的元素,然后文字使用span包裹起来,以方便控制和兼容,如果需要换行显示需要给label加上class为field-list-block,然后radio有form-radio class,checkbox有form-checkbox class。因为涉及到ie6,所以有必要加个class,如果不考虑ie6的话直接使用属性选择器对这些元素进行css控制即可。不过话说回来,属性选择器的效率还是没有类选择器的效率高的,不过比较方便简洁吧

select

html code

<div class="form-item">
<label>毕业学校:</label>
<div class="form-field">
<select name="school" size="1" id="school">
<option value="大学1">大学1</option>
<option value="大学2">大学2</option>
<option value="大学3">大学3</option>
</select>
</div>
</div>

注:这里对select设置了padding为4px和圆角效果,ie8+可以解析padding,圆角效果当然是支持圆角效果的浏览器才能显示啊,所以这个效果是不兼容的

input file

html code

<div class="form-item">
<label for="fileinput">file input:</label>
<div class="form-field">
<input type="file" name="fileinput" id="fileinput" class="form-file">
</div>
</div>

注:对于这个就更无语了,下不了手啊,只好这么丑吧。当然现在有很多直接使用按钮配合js来取代这个功能的,这样美化还是很方便的

verification code

html code

<div class="form-item">
<label for="codetext">Verification code:</label>
<div class="form-field">
<input type="text" id="codetext" name="codetext" class="form-text code-text">
<div class="code-pic"><img id="codePic" alt="" src="images/code.jpg"><a id="change_code" href="#">For a Change</a></div>
</div>
</div>

textarea

说明注释文字可以放在这里啊

html code

<div class="form-item">
<label>个人简介:</label>
<div class="form-field"><textarea name="intro" id="intro"></textarea>
<p class="form-des">说明注释文字可以放在这里啊</p></div>
</div>

input submit

html code

<div class="form-action">
<input type="submit" value="提交" class="submit-btn" />
</div>

案例案例,终于来到了我们的案例

label同行表单demo

说明注释文字可以放在这里啊

label换行表单

说明注释文字可以放在这里啊

附加:状态提示信息的class

This is a <div> with the class .form-error. Link.
This is a <div> with the class .form-notice. Link.
This is a <div> with the class .form-info. Link.
This is a <div> with the class .form-success. Link.

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持