用DHTML整饰Form中的必填和非必填字段项 － 示例

<style type="text"> /* And all that Malarkey // Trimming form elements Please feel free to use this CSS file in any way that you like, although a link back to http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html would always be appreciated. If you come up with a stunning design based on this technique, it would be really nice if you would post a comment containing a URL on http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html#Comments Thanks to Brothercake (http://www.brothercake.com/) for his help with the Javascript. His fantastic UDM 4 fully-featured and accessible website menu system is a must! (http://www.udm4.com/) */ /* Set up the basic layout and remove unsemantic br tags. */ form { margin : 0; padding : 0; } fieldset { margin : 0; padding : 1em; border : 1px solid #ccc; } fieldset div br { display : none; } /* Style the legend, labels and the div containing the submit button. */ legend { font-weight : bold; color : #333; margin : 0; padding : 0.5em; } label { display : block; } #fm-submit { clear : both; padding-top : 1em; text-align : center; } #fm-submit input { border: 1px solid #333; padding: 2px 4px; background: #fff; color: #333; font-size: 100%; } fieldset div { margin : 0; padding : 0; } fieldset div.fm-optional { display : block; } fieldset div input { width: 200px; /* Width for modern browsers */ border : 1px solid #900; padding : 1px; } fieldset div select { font-family : "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif; font-size : 100%; width: 200px; /* Width for modern browsers */ border : 1px solid #900; padding : 1px; } fieldset div label:before { content: "* "; } fieldset div.fm-optional label:before { content: ""; } /* Optional fields. */ .fm-optional input { border : 1px solid #ccc; } </style>

Personal information

Title
MrMrsMissMsDrProf

First name (Required)

Surname (Required)

Maiden or other previous name

Marital status
SingleMarriedDivorcedSeparatedOther

Address

House name or number

Street or road name

Address

Town or city

County

Postcode (Required)

Contact information

Telephone (Required)

Fax

Mobile

Email (Required)

Web site address

function loadForm() { if(document.getElementById) { var linkContainer = document.getElementById('linkContainer'); var toggle = linkContainer.appendChild(document.createElement('a')); toggle.href = '#'; toggle.appendChild(document.createTextNode('要隐藏非必填字段项吗?')); toggle.onclick = function() { var linkText = this.firstChild.nodeValue; this.firstChild.nodeValue = (linkText == '要隐藏非必填字段项吗?') ? '要显示非必填字段项吗?' : '要隐藏非必填字段项吗?'; var tmp = document.getElementsByTagName('div'); for (var i=0;i<tmp.length if tmp : return false loadform></tmp.length>