用 Javascript 验证表单(form)中多选框(checkbox)值

和单选框一样,许多新手在用 Javascript 验证表单(form)中多选框(checkbox)的值时,都会遇到问题,原因是 checkbox 和普通的文本框在获取值的时候有很大不同,本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用。

用 Javascript 验证表单(form)中多选框(checkbox)值 – 示例

 
<script type="text/javascript">
 
// 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值
// 作者: CodeBit.cn  ( http://www.CodeBit.cn )
 
function getCheckboxValue(checkbox)
{
	if (!checkbox.length && checkbox.type.toLowerCase() == 'checkbox')
	{ return (checkbox.checked)?checkbox.value:'';  }
	
	if (checkbox[0].tagName.toLowerCase() != 'input' || 
		checkbox[0].type.toLowerCase() != 'checkbox')
	{ return ''; }
 
	var val = [];
	var len = checkbox.length;
	for(i=0; i<len; i++)
	{
		if (checkbox[i].checked)
		{
			val[val.length] = checkbox[i].value;
		}
	}
	
	return (val.length)?val:'';
}
 
</script>

和 radio 一样,都是 name 相同,值有多个,在获取 checkbox 值的时候,我们不能按照普通文本框 .value 的方式,而是要判断哪个被选中了。

当一组 checkbox 有多个选项时,我们可以通过循环,以 checkbox[i] 的方式判断某个选项是否被选中来返回值,但是当一组 checkbox 只有一个选项时,获取值的方式又有变化,代码中以 (checkbox.checked)?checkbox.value:”; 的方式直接判断是否选中,然后返回对应值。

上面的代码传入的参数是 checkbox 对象,如:

var checkboxTest = document.forms[‘testForm’].elements[‘checkboxTest’];
if (getCheckboxValue(checkboxTest) == ”)
{ …… }

根据判断结果执行你想要的操作。

用 Javascript 验证表单(form)中的单选(radio)值

在用 Javascript 验证表单(form)中的单选框(radio)是否选中时,很多新手都会遇到问题,原因是 radio 和普通的文本框在获取值的时候有很大不同,本文介绍了一个较为通用的获取 radio 值的方法,希望对新手有用。

用 Javascript 验证表单(form)中的单选(radio)值 – 示例

 
<script type="text/javascript">
 
// 说明: 用 Javascript 验证表单(form)中的单选(radio)值
// 作者: CodeBit.cn  ( http://www.CodeBit.cn )
 
function getRadioValue(radio)
{
	if (!radio.length && radio.type.toLowerCase() == 'radio') 
	{ return (radio.checked)?radio.value:'';  }
 
	if (radio[0].tagName.toLowerCase() != 'input' || 
		radio[0].type.toLowerCase() != 'radio')
	{ return ''; }
 
	var len = radio.length;
	for(i=0; i<len; i++)
	{
		if (radio[i].checked)
		{
			return radio[i].value;
		}
	}
	return '';
}
 
</script>

radio 和 checkbox 一样,都是 name 相同,值有多个,在获取 radio 值的时候,我们不能按照普通文本框 .value 的方式,而是要判断哪个被选中了。

当一组 radio 有多个选项时,我们可以通过循环,以 radio[i] 的方式判断某个选项是否被选中来返回值,但是当一组 radio 只有一个选项时,获取值的方式又有变化,代码中以 return (radio.checked)?radio.value:”; 这样的方式直接判断是否选中,然后返回对应值。

上面的代码传入的参数是 radio 对象,如:

var radioTest = document.forms[‘testForm’].elements[‘radioTest’];
if (getRadioValue(radioTest) == ”)
{ …… }

根据判断结果执行你想要的操作。

用 Javascript 实现只能输入数字的文本框

在制作表单(Form)的时候,我们通常会给表单元素添加一些输入规则,比如邮件地址、数字等,我们会在特定的时候执行验证,如果验证不通过,会给出一定的提示信息,本文介绍的是用 Javascript 实现只能输入数字的文本框:

用 Javascript 实现只能输入数字的文本框 – 示例

执行验证可以有以下几种方式:
1. 在输入的时候验证,这种验证有一定的特殊性,比如只能输入数字或者只能输入英文字符这样的规则才能应用,如果是 email 验证就不行。

2. 在输入完成时验证,即在 onblur 事件发生时验证。这个适用范围很广,基本上验证都可以使用。

3. 在提交表单时执行验证,即表单的 onsubmit 事件中执行验证。可以一次验证所有元素,适用范围最广。

三种方式第一种实时性最高,输入的时候就验证,第二种次之,在输入完成后验证,第三中最慢,必须在提交时验证,不过每种都有自己的好处和局限性,在应用中可以根据实际情况选用。

本文验证方式是只能输入数字,带有一定的特殊性,可以选用第一种:

 
<script type="text/javascript">
 
// 说明 : 用 Javascript 实现只能输入数字的文本框
// 整理 : CodeBit.cn ( http://www.CodeBit.cn )
 
function checkNumber(e)
{
	var key = window.event ? e.keyCode : e.which;
	var keychar = String.fromCharCode(key);
	var el = document.getElementById('test');
	var msg = document.getElementById('msg');
	reg = /d/;
	var result = reg.test(keychar);
	if(!result) 
	{
		el.className = "warn";
		msg.innerHTML = "只能输入数字";
		return false;
	}
	else
	{
		el.className = "";
		msg.innerHTML = "";
		return true;
	}
}
 
</script>
 
<div id="test">
	请输入数字:<input type="text" onkeypress="return checkNumber(event);" />
	<span id="msg"></span>
</div>

当我们在此元素中输入时,检测用户按键,如果不是数字键,就显示提示信息,实时性较强,当然,我们也可以采用另外两种方式。

如何用图片实现表单(form)的重置(reset)按钮

合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。

如何用图片实现表单(form)的重置(reset)按钮 – 示例

一个简单包含提交、重置按钮的表单代码如下:

 
<form method="post" name="testForm_1" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" />
</form>

如果想用图片代替重置按钮,可以用下面的方法:

(1)给 type 为 image 的 input 添加 onclick 事件来实现重置,并通过添加 return false 来避免默认的提交操作:

 
<form method="post" name="testForm_2" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<input type="image" src="reset.gif" onclick="javascript:document.forms['testForm_2'].reset(); return false;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_2'].reset(); return false;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

return false; 是防止提交表单。

(2)直接用图片模拟的重置按钮

 
<form method="post" name="testForm_3" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<img src="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset();" style="cursor:pointer;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_3'].reset(); "
 
style="cursor:pointer;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

style="cursor:pointer;" 设置图片悬停时,显示手型光标。

两种方法大同小异,在 javascript 被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。

当然,我们也可以直接把样式交给 CSS 去处理,用背景图的方式来实现,但是这样需要将 value 的值留空,如果 CSS 被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

有初始值的 form 表单元素重置(reset)解决方案

有初始值的 form 表单在点击默认的 Reset 按钮时,表单元素并不能清空,而是恢复初始值,相信这并不是我们期望的,本文介绍的是用 javascript 解决这一问题的方法。

有初始值的 form 表单元素重置(reset)解决方案 – 示例

 
<script language="JavaScript" type="text/javascript">
<!--
// 说明:有初始值的 form 表单元素重置(reset)解决方案
// 整理:http://www.CodeBit.cn

function clearForm(formName) {
	var formObj = document.forms[formName];
	var formEl = formObj.elements;
	for (var i=0; i<formEl.length; i++)
	{
		var element = formEl[i];
		if (element.type == 'submit') { continue; }
		if (element.type == 'reset') { continue; }
		if (element.type == 'button') { continue; }
		if (element.type == 'hidden') { continue; }

		if (element.type == 'text') { element.value = ''; }
		if (element.type == 'textarea') { element.value = ''; }
		if (element.type == 'checkbox') { element.checked = false; }
		if (element.type == 'radio') { element.checked = false; }
		if (element.type == 'select-multiple') { element.selectedIndex = -1; }
		if (element.type == 'select-one') { element.selectedIndex = -1; }
	}
}
//-->
</script>

示例:

 
<form method="post" action="" name="testForm">

	<input type="text" value="text" size="30" /> <br />
	<textarea name="" rows="3" cols="30">textarea</textarea> <br />
	a<input type="checkBox" name="a" value="a" />
	b<input type="checkBox" name="a" value="b" checked="checked" />
	c<input type="checkBox" name="a" value="c" checked="checked" />
	d<input type="checkBox" name="a" value="d" />
	e<input type="checkBox" name="a" value="e" /> <br />
	2<input type="radio" name="b" value="2" />
	3<input type="radio" name="b" value="3" checked="checked" /><br />

	test1:<select name="" multiple="multiple">
		<option value="11111111">11111111</option>
		<option value="22222222" selected="selected">22222222</option>
		<option value="33333333" selected="selected">33333333</option>
		<option value="44444444">44444444</option>
		<option value="55555555">55555555</option>
	</select>

	<br /><br />

	test2:<select name="">
		<option value="11">11</option>
		<option selected="selected">22</option>
		<option value="33">33</option>
		<option value="44">44</option>
		<option value="55">55</option>
	</select>

	<br /><br />

	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" />
	<input type="button" value="Button" />

	<input type="button" value="Javascript Clear" onclick="clearForm('testForm')" />

</form>

一个不错的 Form 多选列表控件效果

很多人对 form 默认的多选框效果不太满意,因为选中和未选中的项目是在一起的,当选项较多时问题尤为明显,本文介绍的就是将可选项和选中项分开,并且可以通过操作按钮或者双击来移动选项,操作起来非常方便。

一个不错的 Form 多选列表控件效果 – 示例

首先将下面的代码放置在页面的<head>标签内:

 
<style type="text/css">


	.multipleSelectBoxControl span{	/* Labels above select boxes*/
		font-family:arial;
		font-size:11px;
		font-weight:bold;
	}
	.multipleSelectBoxControl div select{	/* Select box layout */
		font-family:arial;
		height:100%;
	}
	.multipleSelectBoxControl input{	/* Small butons */
		width:25px;	
	}
	
	.multipleSelectBoxControl div{
		float:left;
	}
		
	.multipleSelectBoxDiv
	</style>
 
<script type="text/javascript">
	
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
	
		
	var fromBoxArray = new Array();
	var toBoxArray = new Array();
	var selectBoxIndex = 0;
	
	function moveSingleElement()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^d]/g,'');
		var tmpFromBox;
		var tmpToBox;
		if(this.tagName.toLowerCase()=='select'){			
			tmpFromBox = this;
			if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
		}else{
		
			if(this.value.indexOf('>')>=0){
				tmpFromBox = fromBoxArray[selectBoxIndex];
				tmpToBox = toBoxArray[selectBoxIndex];			
			}else{
				tmpFromBox = toBoxArray[selectBoxIndex];
				tmpToBox = fromBoxArray[selectBoxIndex];	
			}
		}
		
		for(var no=0;no<tmpFromBox.options.length;no++){
			if(tmpFromBox.options[no].selected){
				tmpFromBox.options[no].selected = false;
				tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
				
				for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
					tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
					tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
					tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
				}
				no = no -1;
				tmpFromBox.options.length = tmpFromBox.options.length-1;
											
			}			
		}
		
		
		var tmpTextArray = new Array();
		for(var no=0;no<tmpFromBox.options.length;no++){
			tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);			
		}
		tmpTextArray.sort();
		var tmpTextArray2 = new Array();
		for(var no=0;no<tmpToBox.options.length;no++){
			tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);			
		}		
		tmpTextArray2.sort();
		
		for(var no=0;no<tmpTextArray.length;no++){
			var items = tmpTextArray[no].split('___');
			tmpFromBox.options[no] = new Option(items[0],items[1]);
			
		}		
		
		for(var no=0;no<tmpTextArray2.length;no++){
			var items = tmpTextArray2[no].split('___');
			tmpToBox.options[no] = new Option(items[0],items[1]);			
		}
	}
	
	function moveAllElements()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^d]/g,'');
		var tmpFromBox;
		var tmpToBox;		
		if(this.value.indexOf('>')>=0){
			tmpFromBox = fromBoxArray[selectBoxIndex];
			tmpToBox = toBoxArray[selectBoxIndex];			
		}else{
			tmpFromBox = toBoxArray[selectBoxIndex];
			tmpToBox = fromBoxArray[selectBoxIndex];	
		}
		
		for(var no=0;no<tmpFromBox.options.length;no++){
			tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);			
		}	
		
		tmpFromBox.options.length=0;
		
	}
	
	
	
	function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
	{		
		fromObj = document.getElementById(fromBox);
		toObj = document.getElementById(toBox);
		

		
		fromObj.ondblclick = moveSingleElement;
		toObj.ondblclick = moveSingleElement;

		
		fromBoxArray.push(fromObj);
		toBoxArray.push(toObj);
		
		var parentEl = fromObj.parentNode;
		
		var parentDiv = document.createElement('DIV');
		parentDiv.className='multipleSelectBoxControl';
		parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
		parentDiv.style.width = totalWidth + 'px';
		parentDiv.style.height = totalHeight + 'px';
		parentEl.insertBefore(parentDiv,fromObj);
		
		
		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelLeft;
		subDiv.appendChild(label);
		
		subDiv.appendChild(fromObj);
		subDiv.className = 'multipleSelectBoxDiv';
		parentDiv.appendChild(subDiv);
		
		
		var buttonDiv = document.createElement('DIV');
		buttonDiv.style.verticalAlign = 'middle';
		buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
		buttonDiv.style.width = '30px';
		buttonDiv.style.textAlign = 'center';
		parentDiv.appendChild(buttonDiv);
		
		var buttonRight = document.createElement('INPUT');
		buttonRight.type='button';
		buttonRight.value = '>';
		buttonDiv.appendChild(buttonRight);	
		buttonRight.onclick = moveSingleElement;	
		
		var buttonAllRight = document.createElement('INPUT');
		buttonAllRight.type='button';
		buttonAllRight.value = '>>';
		buttonAllRight.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllRight);		
		
		var buttonLeft = document.createElement('INPUT');
		buttonLeft.style.marginTop='10px';
		buttonLeft.type='button';
		buttonLeft.value = '<';
		buttonLeft.onclick = moveSingleElement;
		buttonDiv.appendChild(buttonLeft);		
		
		var buttonAllLeft = document.createElement('INPUT');
		buttonAllLeft.type='button';
		buttonAllLeft.value = '<<';
		buttonAllLeft.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllLeft);
		
		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelRight;
		subDiv.appendChild(label);
				
		subDiv.appendChild(toObj);
		parentDiv.appendChild(subDiv);		
		
		toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
		fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';

			
		selectBoxIndex++;
		
	}
	
	
	
	</script>

然后将下面的代码放在页面的<body>标签内:

 
<form method="post" action="multiple_select.html">
<select multiple name="fromBox" id="fromBox">
	<option value="3">Finland</option>
	<option value="4">France</option>
	<option value="6">Mexico</option>
	<option value="1">Norway</option>
	<option value="5">Spain</option>	
	<option value="2">United Kingdom</option>
</select>
<select multiple name="toBox" id="toBox">
	<option value="12">Canada</option>
	<option value="13">Germany</option>
	<option value="11">United States</option>
</select>
</form>
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>
<p>You move elements by clicking on the buttons or by double clicking on select box items</p>

配置方法:
(1)用类似下面的代码创建两个多选列表

 
<select multiple name="fromBox" id="fromBox">
  <option value="3">Finland</option>
  <option value="4">France</option>
  <option value="6">Mexico</option>
  <option value="1">Norway</option>
  <option value="5">Spain</option>  
  <option value="2">United Kingdom</option>
</select>
<select multiple name="toBox[]" id="topBox">
  <option value="12">Canada</option>
  <option value="13">Germany</option>
  <option value="11">United States</option>
</select>

(2)用下面的javascript代码初始化设置:

 
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>

参数说明如下:
"fromBox" – 第一个多选列表的id(<select multiple name="fromBox" id="fromBox">)
"toBox" – 第二个多选列表的id(<select multiple name="toBox[]" id="toBox">)
500 – 控件的总宽度
300 – 控件的总高度
"Available countries" – 第一个多选列表的显示名称
"Selected countries" – 第二个多选列表的显示名称

提交表单的方法:

当提交表单时,我们希望只有选中的选项值被提交,所以需要一些javascript代码进行一些小的处理。

先在form标签中加入提交事件的处理:

<FORM onsubmit="selectItem()">

再加一段javascript代码:

 
function selectItem()
	{
		var obj = document.getElementById('toBox[]');
		for(var no=0;no<obj.options.length;no++){
			obj.options[no].selected = true;
		}
	}

不用 table 的 form 表单效果

以前做 form 时,通常是用两列表格,一列显示名称,一列放置表单元素。而本文介绍的是用 css 来实现的方法,便于控制全站风格,代码简洁。

不用 table 的 form 表单效果 – 示例

 
.cssform p{
	width: 300px;
	clear: left;
	margin: 0;
	padding: 5px 0 8px 0;
	padding-left: 155px; /*width of left column containing the label elements*/
	border-top: 1px dashed gray;
	height: 1%;
}

.cssform label{
	font-weight: bold;
	float: left;
	margin-left: -155px; /*width of left column*/
	width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
	width: 180px;
}

.cssform textarea{
	width: 250px;
	height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
	margin-left: 3px;
}
 
<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

</form>

CSS Beauty 风格的两列新闻显示样式

本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.

CSS Beauty 风格的两列新闻显示样式 – 示例

CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}

/* ClearFix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}

/* Hides from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* 公用 FORM 样式 */
input, textarea{
	background: #fff;
	border: 1px solid #83cde1;
	border-top: 3px solid #83cde1;
}
input:hover, textarea:hover {
	background: #F0FDE2;
	border-top: 3px solid #b1e77a
}
input:focus, textarea:focus {
	background: #FCFFEC;
	border-top: 3px solid #b1e77a
}
.submit { border: 0; width: auto; }
.submit:hover, .submit:active { border:0; }
.radio { background: none; border: 0; }


#news {
	margin:0;
	padding:0 15px 5px 10px;
	border-bottom: 1px dotted #BBE0EB;
}

/* TAB样式 开始 */
#news ul.domtabs {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px dotted #BBDFED;
	margin: 0 0 20px 0;
	padding: 0 30px 2px 0;
	text-align: right;
}
#news ul.domtabs li {
	display: inline;
	margin: 0;
}
#news ul.domtabs a:link,
#news ul.domtabs a:visited,
#news ul.domtabs a:active,
#news ul.domtabs a:hover {
	text-decoration: none;
	padding: 2px 5px 4px 5px;
	position: relative;
	bottom: 0;
	color: #89C7D9;
}
#news ul.domtabs li.active a:link,
#news ul.domtabs li.active a:visited,
#news ul.domtabs li.active a:active,
#news ul.domtabs li.active a:hover {
	background:#fff;
	padding: 2px 10px 4px 10px;
	border: 1px dotted #BBDFED;
	border-bottom: 1px solid #fff;
	position: relative;
	bottom: 0;
	color: #418FA5;
}
#news ul.domtabs a:hover {
	text-decoration: underline;
}
#news ul.domtabs li.active a:hover {
	text-decoration: none;
}


/* 新闻列表样式 开始 */
#newswrap {
	margin:0;
}
#news-left, #news-right {
	float: right;
	width: 48%;
	max-width: 330px;
}
#news .more {
	clear: both;
	margin:0;
	padding: 0 15px 0 0;
	font-size: 0.85em;
	text-align: right;
	line-height: 1em;
}
#news .more img {
	vertical-align: bottom;
	border: 0;
	margin: 0 0 0 5px;
}
#news-right p, #news-left p {
	font-size: 0.85em;
	padding: 0 5px 0 0;
	margin: 0 0 0 12px;
	color: #4896AC;
}
#news-right p a, #news-left p a {
	font-weight: bold;
	display:block;
}
#news-right p a.continue, #news-left p a.continue {
	font-weight: normal;
}
#news p.author {
	color: #83cde1;
	border: 0;
	padding: 0 0 5px 0;
	margin: 0 10px 10px 12px;
	border-bottom: 1px dotted #BBE0EB;
}
#news p.author a {
	color: #86d734;
	font-weight: normal;
	display:inline;
	font-size: 0.85em;
}
#news p.author a:hover {
	text-decoration: underline;
}
#news p.author:hover {
	background: none;
}


/* FORM 表单样式 开始 */
#news #form {
	display: none;
}
#news form {
	float: right;
	margin: 0;
	padding: 0;
	background: #fff;
	font-size: 0.9em;
	width: 85%;
}
#news form p {
	padding: 0 0 0 20px;
	float: left;
	margin: 0;
	width: 180px;
	color: #4896AC;
}
#news form p.note {
	margin: 0 0 20px 0;
}
#news fieldset {
	border: 0;
}
#news legend {
	display: none;
}
#news label {
	display: block;
}
#news input {
	margin: 0 0 10px 0;
	display: block;
	width: 150px;
}
#news textarea {
	margin: 0;
	width: 150px;
	height: 100px;
}
#news .submit {
	width: auto;
	border: 0;
}

-->
</style>

HTML 部分:

 
<div id="news" class="domtab clearfix">

	<ul class="domtabs">
		<li class="active"><a href="#news-right">Current News</a></li>
		<li><a href="#submit-news">Submit News</a></li>
	</ul>

	<div style="display: block;" id="newswrap">	
	
		<div id="news-right">
			
			<p><a href="http://www.sitepoint.com/article/accessibility-techniques">Advanced Accessibility Techniques.</a> Techniques you can implement to achieve advanced accessibility beyond the W3C guidelines.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 07 at 07:24 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/reference/3d/">Dynamic 3D with CSS and the DOM.</a>Underground - A 3D dungeon environment built using Tantek's technique of creating shapes out of the interaction of CSS borders.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 04 at 08:38 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/scripts/dbx/">Docking boxes (dbx).</a> Adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 03 at 11:22 AM</p>
						
			<p><a href="http://www.useit.com/alertbox/screen_resolution.html">Screen Resolution and Page Layout.</a> Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:50 AM</p>
						
			<p><a href="http://accessites.org/gbcms_xml/news_page.php?id=19">Visual Vs. Structural.</a> Does the choice of approach — visual vs structural — have any impact on the accessibility or usability of a site?</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:47 AM</p>
			
		</div>

		<div id="news-left">
			
			<p><a href="http://www.456bereastreet.com/archive/200608/google_valid_and_strict/">Google valid and strict.</a>Roger Johansson debunks the myth that Google has deprecated code tosave on bandwidth. He speculates why they still use old markup.</p>
			<p class="author">Posted by <a href="http://sonspring.com/">Nathan Smith</a> on Aug 15 at 01:37 AM</p>
						
			<p><a href="http://techfoolery.com/archives/2006/08/11/2021/">Animated Page Scroller</a>. An elegant JavaScript solution for page navigation</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:43 AM</p>
						
			<p><a href="http://www.aptana.com/" title="JavaScript Love Maker">Aptana Web IDE</a>. A robust, JavaScript-focused IDE for building dynamic web applications.</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:28 AM</p>
						
			<p><a href="http://www.flickrshow.com/">Flickrshow.</a> Provides you with the simplest way of displaying your Flickr photosets on your own website with the use of some javascript.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 10 at 11:06 AM</p>
						
			<p><a href="http://jquery.com/demo/thickbox/">ThickBox 2.0.</a> Version 2 of the JQuery based photo slideshow script, new features include iFrame support, multi-picture slideshows and more.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 09 at 09:31 AM</p>
			
		</div>

		<p class="more"><a href="http://www.cssbeauty.com/news/">News Archive</a> <a href="http://www.cssbeauty.com/rss/news/"><img src="rss.gif" alt="RSS Feed" /></a></p>

	</div>

	<div id="form">
		<form action="/news/submit/snews.php" method="post" id="submit-news">
			<fieldset>
				<legend>Submit News</legend>

				<p>
				<label for="title">Title:</label>

				<input type="text" tabindex="1" name="n-title" id="title" />

				<label for="url">News URL:</label>
				<input type="text" tabindex="2" name="n-url" id="url" />

				<label for="description">News Description:</label>
				<textarea tabindex="3" name="n-description" id="description" rows="5" cols="15"></textarea>
				<small>Max 120 characters</small>

				</p>

				<p class="note"><strong>Note:</strong> Your submission will be placed on queue pending review, if accepted your news item will show up in the next few hours.</p>
					
				<p>
				<label for="name">Your Name:</label>
				<input type="text" tabindex="4" name="s-name" id="name" />

				<label for="email">Your email:</label>

				<input type="text" tabindex="5" name="s-email" id="email" />

				<label for="yurl">Your Website:</label>
				<input type="text" tabindex="6" name="s-url" id="yurl" />
					
				<input class="submit" type="image" src="submit.gif" alt="submit" tabindex="7" />
				</p>
			</fieldset>
		</form>
	</div>

</div>

本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.