我们继续讲解css教程，今天介绍的是制作一个表单效果，在网站留言，收集信息的时候经常用到，还有就是在网站注册的时候，前端填写这些字段，然后进行js验证和数据库验证，最后插入数据库
我们看看效果图
是不是经常看到呢，在网站注册会员的时候。我们看看css代码怎么写
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('fieldset').each(function(index) {
var heading = $('legend', this).remove().text();
$('<h3>我是js添加的H3元素</h3>')
.text(heading)
.prependTo(this);
});
})
</script>
<style type="text/css"></style>
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
<fieldset>
<legend>个人信息</legend>
<ol>
<li>
<label for="name">姓名</label>
<input class="required" type="text" name="name" id="name">
<span>(必填)</span></li>
<li>
<label for="email">邮箱</label>
<input class="required" type="text" name="email" id="email">
<span>(必填)</span></li>
<li>如何保持联系? (至少选择一种)
<ul>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Email" id="by-email">
Email</label>
<input class="conditional" type="text" name="email" id="email">
<span>(当勾选前面复选框后，则必须填写Email信息)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
电话</label>
<input class="conditional" type="text" name="phone" id="phone">
<span>(当勾选前面复选框后，则必须填写电话号码)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
QQ</label>
<input class="conditional" type="text" name="qq" id="qq">
<span>(当勾选前面复选框后，则必须填写QQ号码)</span></li>
</ul>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
我们下面进行js验证，当用户没有填写当前信息时候提示用户填写
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('fieldset').each(function(index) {
var heading = $('legend', this).remove().text();
$('<h3></h3>')
.text(heading)
.prependTo(this);
});
var requiredFlag = ' * ';
var requiredKey = $('input.required:first').next('span').text();
requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
var conditionalFlag = ' ** ';
var conditionalKey = $('input.conditional:first').next('span').text();
conditionalKey = conditionalFlag + conditionalKey.replace(/\((.+)\)/,"$1");
$('form :input').filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label');
$('form :input').filter('.conditional')
.next('span').text(conditionalFlag);
})
</script>
<style type="text/css">
.req-label { font-weight: bold; }
</style>
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
<fieldset>
<legend>个人信息</legend>
<ol>
<li>
<label for="name">姓名</label>
<input class="required" type="text" name="name" id="name">
<span>(必填)</span></li>
<li>
<label for="email">邮箱</label>
<input class="required" type="text" name="email" id="email">
<span>(必填)</span></li>
<li>如何保持联系? (至少选择一种)
<ul>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Email" id="by-email">
Email</label>
<input class="conditional" type="text" name="email" id="email">
<span>(当勾选前面复选框后，则必须填写Email信息)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
电话</label>
<input class="conditional" type="text" name="phone" id="phone">
<span>(当勾选前面复选框后，则必须填写电话号码)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
QQ</label>
<input class="conditional" type="text" name="qq" id="qq">
<span>(当勾选前面复选框后，则必须填写QQ号码)</span></li>
</ul>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('fieldset').each(function(index) {
var heading = $('legend', this).remove().text();
$('<h3></h3>')
.text(heading)
.prependTo(this);
});
var requiredFlag = ' * ';
var requiredKey = $('input.required:first').next('span').text();
requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
var conditionalFlag = ' ** ';
var conditionalKey = $('input.conditional:first').next('span').text();
conditionalKey = conditionalFlag + conditionalKey.replace(/\((.+)\)/,"$1");
$('form :input').filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label');
$('form :input').filter('.conditional')
.next('span').text(conditionalFlag);
$('<p></p>')
.addClass('field-keys')
.append(requiredKey + '<br />')
.append(conditionalKey)
.insertBefore('#contact');
})
</script>
<style type="text/css">
.req-label { font-weight: bold; }
</style>
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
<fieldset>
<legend>个人信息</legend>
<ol>
<li>
<label for="name">姓名</label>
<input class="required" type="text" name="name" id="name">
<span>(必填)</span></li>
<li>
<label for="email">邮箱</label>
<input class="required" type="text" name="email" id="email">
<span>(必填)</span></li>
<li>如何保持联系? (至少选择一种)
<ul>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Email" id="by-email">
Email</label>
<input class="conditional" type="text" name="email" id="email">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
电话</label>
<input class="conditional" type="text" name="phone" id="phone">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
QQ</label>
<input class="conditional" type="text" name="qq" id="qq">
<span>(当勾选前面复选框后，则必须填写)</span></li>
</ul>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
设计条件字段demo，勾选上然后填写对应信息
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('fieldset').each(function(index) {
var heading = $('legend', this).remove().text();
$('<h3></h3>')
.text(heading)
.prependTo(this);
});
var requiredFlag = ' * ';
var requiredKey = $('input.required:first').next('span').text();
requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
var conditionalFlag = ' ** ';
var conditionalKey = $('input.conditional:first').next('span').text();
conditionalKey = conditionalFlag + conditionalKey.replace(/\((.+)\)/,"$1");
$('form :input').filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label');
$('form :input').filter('.conditional')
.next('span').text(conditionalFlag);
//添加注释信息
$('<p></p>')
.addClass('field-keys')
.append(requiredKey + '<br />')
.append(conditionalKey)
.insertBefore('#contact');
$('input.conditional').hide().each(function() {
var $thisInput = $(this);
var $thisFlag = $thisInput.next('span').hide();
$thisInput.prev('label').find(':checkbox').click(function() {
if (this.checked) {
$thisInput.show().addClass('required');
$thisFlag.show();
$(this).parent('label').addClass('req-label');
} else {
$thisInput.hide().removeClass('required').blur();
$thisFlag.hide();
$(this).parent('label').removeClass('req-label');
};
});
});
})
</script>
<style type="text/css">
.req-label { font-weight: bold; }
</style>
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
<fieldset>
<legend>个人信息</legend>
<ol>
<li>
<label for="name">姓名</label>
<input class="required" type="text" name="name" id="name">
<span>(必填)</span></li>
<li>
<label for="email">邮箱</label>
<input class="required" type="text" name="email" id="email">
<span>(必填)</span></li>
<li>如何保持联系? (至少选择一种)
<ul>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Email" id="by-email">
Email</label>
<input class="conditional" type="text" name="email" id="email">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
电话</label>
<input class="conditional" type="text" name="phone" id="phone">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
QQ</label>
<input class="conditional" type="text" name="qq" id="qq">
<span>(当勾选前面复选框后，则必须填写)</span></li>
</ul>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('fieldset').each(function(index) {
var heading = $('legend', this).remove().text();
$('<h3></h3>')
.text(heading)
.prependTo(this);
});
var requiredFlag = ' * ';
var requiredKey = $('input.required:first').next('span').text();
requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
var conditionalFlag = ' ** ';
var conditionalKey = $('input.conditional:first').next('span').text();
conditionalKey = conditionalFlag + conditionalKey.replace(/\((.+)\)/,"$1");
$('form :input').filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label');
$('form :input').filter('.conditional')
.next('span').text(conditionalFlag);
//添加注释信息
$('<p></p>')
.addClass('field-keys')
.append(requiredKey + '<br />')
.append(conditionalKey)
.insertBefore('#contact');
$('input.conditional').hide().each(function() {
var $thisInput = $(this);
var $thisFlag = $thisInput.next('span').hide();
$thisInput.prev('label').find(':checkbox').click(function() {
if (this.checked) {
$thisInput.show().addClass('required');
$thisFlag.show();
$(this).parent('label').addClass('req-label');
} else {
$thisInput.hide().removeClass('required').blur();
$thisFlag.hide();
$(this).parent('label').removeClass('req-label');
};
});
});
})
</script>
<style type="text/css">
.req-label { font-weight: bold; }
h3 {
background: #3CF;
margin: 0;
padding: 0.3em 0.5em;
}
ul, ol {
list-style-type: none;
padding: 0.5em;
margin: 0;
}
ul { margin-left: 1.5em; }
li { margin: 4px; }
#contact { position: relative; }
p {
position: absolute;
right: 1em;
top: 2em;
background: #CFC;
padding: 1em;
}
</style>
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
<fieldset>
<legend>个人信息</legend>
<ol>
<li>
<label for="name">姓名</label>
<input class="required" type="text" name="name" id="name">
<span>(必填)</span></li>
<li>
<label for="email">邮箱</label>
<input class="required" type="text" name="email" id="email">
<span>(必填)</span></li>
<li>如何保持联系? (至少选择一种)
<ul>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Email" id="by-email">
Email</label>
<input class="conditional" type="text" name="email" id="email">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
电话</label>
<input class="conditional" type="text" name="phone" id="phone">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
QQ</label>
<input class="conditional" type="text" name="qq" id="qq">
<span>(当勾选前面复选框后，则必须填写)</span></li>
</ul>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
设计提示信息
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$('fieldset').each(function(index) {
var heading = $('legend', this).remove().text();
$('<h3></h3>')
.text(heading)
.prependTo(this);
});
var requiredFlag = ' * ';
var requiredKey = $('input.required:first').next('span').text();
requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
var conditionalFlag = ' ** ';
var conditionalKey = $('input.conditional:first').next('span').text();
conditionalKey = conditionalFlag + conditionalKey.replace(/\((.+)\)/,"$1");
$('form :input').filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label');
$('form :input').filter('.conditional')
.next('span').text(conditionalFlag);
$('<p></p>')
.addClass('field-keys')
.append(requiredKey + '<br />')
.append(conditionalKey)
.insertBefore('#contact');
})
</script>
<style type="text/css">
.req-label { font-weight: bold; }
</style>
<title></title>
</head>
<body>
<form id="contact" action="index.html" method="get">
<fieldset>
<legend>个人信息</legend>
<ol>
<li>
<label for="name">姓名</label>
<input class="required" type="text" name="name" id="name">
<span>(必填)</span></li>
<li>
<label for="email">邮箱</label>
<input class="required" type="text" name="email" id="email">
<span>(必填)</span></li>
<li>如何保持联系? (至少选择一种)
<ul>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Email" id="by-email">
Email</label>
<input class="conditional" type="text" name="email" id="email">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="Phone" id="by-phone">
电话</label>
<input class="conditional" type="text" name="phone" id="phone">
<span>(当勾选前面复选框后，则必须填写)</span></li>
<li>
<label>
<input type="checkbox" name="by-contact-type" value="QQ" id="by-qq">
QQ</label>
<input class="conditional" type="text" name="qq" id="qq">
<span>(当勾选前面复选框后，则必须填写)</span></li>
</ul>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
