这是JSF（一个简单的登录页面）
<%@ page contentType="text/html;charset=GBK"%> <!-- 设置网页的编码为GBK -->
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %><!-- 引入JSF核心标记库 -->
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %><!-- 引入JSF关于HTML的标记库-->
<html><head><title>登陆页面</title>
<link type="text/css" rel="stylesheet" href="images/style.css"><!-- 引入外部css样式表 -->
<script type="text/javascript" src="images/teacher.js"></script>
</head><body topMargin=90;background-image:url(images/bg.gif);><f:view><!-- 使用JSF标签库生成登录表单-->
<h:form id="myform" οnsubmit="return checkLogin();"><h:panelGrid styleClass="panel">
<h:panelGrid columns="1" style= "background-image:url(images/aaa.JPG); height:389;width=641;">
<h:outputText value="学籍信息管理系统" styleClass="pname"/>
<h:panelGrid columns="2" style="text-align:right;width=80%;">
<h:panelGrid columns="2" width="70%" ><h:outputText value="用户名："/>
<h:inputText id="uid" value="#{LoginBean.uid}" required="true"/>
<h:outputText value="密 码："/>
<h:inputSecret id="pwd" value="#{LoginBean.pwd}" required="true"/>
<h:outputText value="类 型："/>
<h:selectOneRadio layout="lineDirection" value="#{LoginBean.type}">
<f:selectItem itemLabel="普通学生" itemValue="student"/>
<f:selectItem itemLabel="教职工" itemValue="teacher"/>
</h:selectOneRadio><h:outputText value=""/>
<h:panelGroup><h:message for="uid" style="color:red"/>
<h:message for="pwd" styleClass="msg"/></h:panelGroup></h:panelGrid>
<h:commandButton image="images/login1.gif"
οnmοuseοver="this.src='images/login2.gif'" οnmοuseοut="this.src='images/login1.gif'"
οnmοusedοwn="this.src='images/login3.gif'" οnmοuseup="this.src='images/login2.gif'"
action="#{LoginBean.verify}"/>
</h:panelGrid></h:panelGrid></h:panelGrid></h:form> </f:view></body></html>这是jsp（一个简单的登录页面）
<div class="box">
<div id="header">
<h1>登录</h1>
</div>
<form action="empservlet" method="post">
<div class="group">
<input class="inputMaterial" name="username" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>请输入您的账号</label>
</div>
<div class="group">
<input class="inputMaterial" name="password" type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>请输入您的密码</label>
</div>
<button id="buttonlogintoregister" type="submit">确定登录</button>
</form>
<div id="footer-box">
<p class="footer-text">还没有账号?<span class="sign-up">立刻注册</span></p>
</div>JSF是UI组件状态，处理事件等的标准化方式。JSF是一种技术，同时笔者认为更是一种框架。与许多的Web框架一样，都会有自已的config.xml即faces-config.xml。而JSP则是表现层，借助于JSP即可表现Web应用的界面效果，而JSF则是表现层框架，与此类似Struts也是表现层框架，虽然性质不同但也殊途同归。
JSF是一个标准的服务器端架构，用于简化网络应用软件表示层的构建。开发人员可以组装这些可复用的用户界面组件来创建网页，将这些组件绑定到应用
程序的数据源，并利用服务器端的事件处理器来处理客户端事件。依据JSF规范，组件开发者所制作的组件可以简洁地整合到JSF运行时架构，而且在应用软件
设计过程中，还可以整合到与JSF兼容的集成开发环境中。JSR
127规范定义了这样的JSF架构，还同时提供了比如输入栏和按钮等基本用户界面组件的可供参考的实现。JSF组件中的绝大部分都符合HTML
2.0标准中的HTML组件和标签的规范。这些相对简单的组件对于很多网络应用程序来讲已经足够了。
JSF框架的主要优势之一就是它既是 Java
Web
用户界面标准又是严格遵循模型-视图－控制器
(MVC)
设计模式的框架。用户界面代码（视图）与应用程序数据和逻辑（模型）的清晰分离使
JSF
应用程序更易于管理。为了准备提供页面对应用程序数据访问的
JSF
上下文和防止对页面未授权或不正确的访问，所有与应用程序的用户交互均由一个前端“Faces”servlet（控制器）来处理。
