2013年7月31日 星期三

html box width setting example sample eg e.g.

html box width and height setting 


<div id="content" style="width:100%;">
<div style="border:solid 1px black; height:200px; width:69%; margin:auto;margin-top:60px;">
<span style="width:100% ; margin-left:2px; float:left;height:20px; color:white; background-color:rgb(67,120,182); margin-bottom:0;">Employee Email Listing</span>
<table border="1" STYLE="float:clear; width:100%">
 <tr>
  <th style="width:80%;">Employee Email</th>
<th style="width:20%;"></th>
 </tr>
 <tr style="height:20px">
<td>someOne@email.com</td>
<td></td>
 </tr>
</table>
</div>
</div>

html label example eg sample e.g. memo input

label example


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=big5" />
<title>SAMPLE</title>
<style type="text/css">
#myform label {display: block;
width: 100px;
float: left;
font-size: 0.875em;}


#myform2  label {display: block;
width: 100px;
float: left;
font-size: 0.875em;
text-align: right;
margin-right: 10px;} 
 
</style>



</head>





<body>
<form method="post" action="#" id="myform">
<p>
<label for="user" >姓名</label>
<input type="text" id="user" name="username" />
</p>
<p>
<label for="mail" >電子郵件信箱</label>
<input type="text" id="mail" name="mailaddress" />
</p>
<p>
<label for="com" >留言內容</label>
<!--long test memo field inut textarea-->
<textarea id="com" name="comment" cols="40" rows="8"></textarea>
</p>
<p><input type="submit" value="傳送" id="submit" /></p>
</form>
</body>
</html>

2013年7月30日 星期二

html return to history

<FORM><INPUT Type="button" VALUE="Back" onClick="history.go(-1);return true;"></FORM>

html dynamic height (ibm website)

http://pic.dhe.ibm.com/infocenter/rbdhelp/v8r5m0/index.jsp?topic=%2Fcom.ibm.egl.lr.doc%2Ftopics%2Fregl_core_str_format_number.html 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highstock API Reference</title>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css"/>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css" />
<link
href="http://api.highcharts.com/resources/css/themes/base/jquery.ui.all.css"
rel="stylesheet" type="text/css" />
<link href="http://api.highcharts.com/resources/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<script src="http://api.highcharts.com/resources/js/jquery-1.7.1.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.core.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.widget.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.position.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.autocomplete.min.js"
type="text/javascript"></script>
<script type="text/javascript">
var PRODUCTNAME = 'Highstock'.toLowerCase();
var RESOURCE = "http://api.highcharts.com";

$(function() {
function updateHeight() {
var height = $(window).height() - $('#top').height();
$("#wrapper").height(height);
$("#nav-wrap").height(height);
$("#details-wrap").height(height);
};

updateHeight();

$(window).resize(updateHeight);

// Make the Highcharts/Highstock links dynamic
$('#highstock-link, #highcharts-link').click(function () {
this.href += location.hash;
});

// Login shortcut (hot corner)
$("<div>")
.css({
position: 'absolute',
display: 'block',
width: '10px',
height: '10px',
right: 0,
cursor: 'pointer'
})
.click(function () {
$.getScript('http://code.jquery.com/ui/1.8.16/jquery-ui.min.js', function () {
$('<iframe src="http://api.highcharts.com/auth/login">').dialog({
height: 300
});
});
})
.appendTo('#top');
});
</script>

<script src="http://api.highcharts.com/resources/js/ref.js"
type="text/javascript"></script>

</head>
<body>
<div id="top">
<!--
<ul>
<li><a id="highcharts-link" href="http://api.highcharts.com/highcharts">Highcharts</a></li>
<li><a id="highstock-link" href="http://api.highcharts.com/highstock">Highstock</a></li>
</ul>
-->
<a href="http://www.highcharts.com" title="Highcharts Home Page" id="logo"><img
alt="Highcharts Home Page"
src="http://api.highcharts.com/resources/images/Highcharts-icon-160px.png"
border="0"></a>
<h1>Highstock Options Reference</h1>

</div>
<div id="wrapper">
<div id="nav-wrap">
<div id="nav">

<div class="ui-widget" id="search-div">
<!--  label for="search">Search:</label -->
<input id="search" />
</div>
<div class="nav-section">
<h3 id="options-header">Configuration options</h3>
<p class="subheader">For initial declarative chart setup. View as <a class="dump" href="http://api.highcharts.com/highstock/option/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/option/dump.xml">XML</a>.</p>
<div id="global-options-tree">
<code>Highcharts.setOptions({</code>
<div id="global-options" class="tree"></div>
<code>});</code>
</div>
<div id="options-tree">
<code>$("#container").highcharts("StockChart", {</code>
<div id="options" class="tree"></div>
<code>});</code>
</div>
</div>

<div class="nav-section">
<h3>Methods and properties</h3>

<p class="subheader">For dynamically modifying the chart. View as <a class="dump" href="http://api.highcharts.com/highstock/object/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/object/dump.xml">XML</a>. </p>
<div id="methods-and-properties-toc"></div>

<div id="objects-tree">
<div id="objects" class="tree"></div>
</div>
</div>
</div>
</div>

<div id="details-wrap">
<div id="details"></div>
</div>
</div>
</body>
</html>

highchart highstock add / destroy series from click button

add series from click button

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/

$(function() {
$('#container').highcharts('StockChart', {

   scrollbar: {
            enabled: true
        },

        navigator: {
            enabled: true
        },

   rangeSelector: {
    selected: 1
   },

        series: [{
name: 'MSFT',
data: MSFT
        }]
});

$('#button').click(function() {
var chart = $('#container').highcharts();
        chart.addSeries({
name: 'ADBE',
data: ADBE
});
        $(this).attr('disabled', true);
});
});

Destroy a chart


$(function() {
$('#container').highcharts('StockChart', {

   scrollbar: {
            enabled: true
        },

        navigator: {
            enabled: true
        },

   rangeSelector: {
    selected: 1
   },

        series: [{
name: 'MSFT',
data: MSFT
        }]
});

$('#button').click(function() {
var chart = $('#container').highcharts();
        chart.addSeries({
name: 'ADBE',
data: ADBE
});
        $(this).attr('disabled', true);
});
});

html ul li e.g. example eg sample

to css page header

<ul id=:"nav">
<li><a href="home.html">home</a>,/li>
<li><a href="about.html">About Us</a>,/li>
<li><a href="product.html">Our Product</a>,/li>
</ul>

no . style
ul#nav,ul#nav li{
list-style:none;
margin:0;
padding:0;
}

on a line style
ul#nav,ul#nav li{
float:left;
list-style:none;
margin:0;
padding:0;
}

Button style 

ul#nav{
font-family:aaaaa;
font-size:.82em;
background-color:#DDD;
}

ul#nav li a{
border: 1px solid #000;
display:block;
float:left;
padding: 3px;
}




html a record eg sample example call href html-window iframe a-record

arecord

<li><a href="home.html"  style="text-decoration:none;">home</a></li>



arecord change iFrame

<p>Click on link bellow to change iframe content:</p>
<a href="http://www.bing.com" target="search_iframe">Bing</a> -
<a href="http://en.wikipedia.net" target="search_iframe">Wikipedia</a> -
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe)

<iframe src="http://en.wikipedia.net" width="100%" height="100%" name="search_iframe"></iframe>

arecord with image icon jpg
<a href="menu2.jsp?menu=menu6&http=welcome.jsp">
<img border="0" style="float:right;" src="images/Home-icon.png" width="30" height="30">
</a>


arecord with button
<a href="input.jsp?input=payrollEntryList.txt&config=payrollEntryListConfig.txt&mode=LIST">         <button style="float:right;">X</button>
</a>

click-or-dbclick open new window or not 

<a href="#" onclick="window.open('http://google.com/', '_blank')">Go_blank</a>;
<a href="#" onclick="window.open('http://google.com/', '_self')">Go_Self</a>;
<a href="#" ondblclick="window.open('http://google.com/', '_blank')">dblclick Go_blank</a>;
<a href="#" ondblclick="window.open('http://google.com/', '_self')">dblclick Go_Self</a>;


click-href 
<button style=" " class="formButton" type="button" onclick="location.href='/hr/ir56b.zip'">test1</button>

css selector eg sample example css-selector

http://hongkong2000.freehostia.com/html/css0.html

selector {property  :  value}

[lang] [rel] [href]
:hover, :visited, :first-child
li.active


Attribute Selector  
input [type="text"]{color:#000; font-size:12px; font-family:}
input[type="text"] {font-size:<%=FontSize%>;} 
p[lang="fr"]
html: <p lang="fr" class="className">

p[lang~="fr"]
html: <p lang="fr" class="className">
html: <p lang="la sp fr" class="className">

p[lang |= "en"]
html: <p lang="en" class="className">
html: <p lang="en-US" class="className">





Type Selector
body {color:#000; font-size:12px; font-family:}
h1{color:red}

Universal Selector : * {color : #000}

Descendant Selectors
<p> I just <em> Love </em> emphasis</p>
<ul><li>I just <em> Love </em> emphasis</li></ul>
em {text-transform: uppercase;}
ul em {text-transform: uppercase;} 


Class Selector : 
input.box{border:1px solid #000;}
.text{}
.box{}

id Selectors :
#page-title{}



Child Selectors : 
body p {}

Group Selectors :
h1 , h2 ,h3 {}

#content, #footer, #supplement{}


http://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
SelectorExampleExample descriptionCSS
.class.introSelects all elements with class="intro"1
#id#firstnameSelects the element with id="firstname"1
**Selects all elements2
elementpSelects all <p> elements1
element,elementdiv,pSelects all <div> elements and all <p> elements1
element elementdiv pSelects all <p> elements inside <div> elements1
element>elementdiv>pSelects all <p> elements where the parent is a <div> element2
element+elementdiv+pSelects all <p> elements that are placed immediately after <div> elements2
[attribute][target]Selects all elements with a target attribute2
[attribute=value][target=_blank]Selects all elements with target="_blank"2
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word "flower"2
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"2
:linka:linkSelects all unvisited links1
:visiteda:visitedSelects all visited links1
:activea:activeSelects the active link1
:hovera:hoverSelects links on mouse over1
:focusinput:focusSelects the input element which has focus2
:first-letterp:first-letterSelects the first letter of every <p> element1
:first-linep:first-lineSelects the first line of every <p> element1
:first-childp:first-childSelects every <p> element that is the first child of its parent2
:beforep:beforeInsert content before  the content of every <p> element2
:afterp:afterInsert content after every <p> element2
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to "it" (Italian)2
element1~element2p~ulSelects every <ul> element that are preceded by a <p> element3
[attribute^=value]a[src^="https"]Selects every <a> element whose src attribute value begins with "https"3
[attribute$=value]a[src$=".pdf"]Selects every <a> element whose src attribute value ends with ".pdf"3
[attribute*=value]a[src*="w3schools"]Selects every <a> element whose src attribute value contains the substring "w3schools"3
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3
:only-childp:only-childSelects every <p> element that is the only child of its parent3
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child3
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child3
:last-childp:last-childSelects every <p> element that is the last child of its parent3
:root:rootSelects the document’s root element3
:emptyp:emptySelects every <p> element that has no children (including text nodes)3
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)3
:enabledinput:enabledSelects every enabled <input> element3
:disabledinput:disabledSelects every disabled <input> element3
:checkedinput:checkedSelects every checked <input> element3
:not(selector):not(p)Selects every element that is not a <p> element3
::selection::selectionSelects the portion of an element that is selected by a user3


















css overflow html example

overflow-x,
overflow-y

W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.
Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE.
In all the following test cases the green box has fixed dimensions (80px × 80px, with padding 9px, border 10px.) The blue bar (width 119px, border 1px) should overflow at the right, and the red one (height 119px, border 1px) at the bottom. When one of the two properties is ‘auto’ there are four cases: two with only one overflowing bar at a time, one with both overflowing, one with no overflow (the third case should behave as with ‘scroll’ instead of ‘auto’).
According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....
All browsers seem to further reduce the number of combinations giving different results:
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content.


Neglecting the cases with ‘auto’ (which depend on content), there are 9 (= 3 × 3) possible combinations of values of overflow-x and overflow-y, but only five distinct results in Gecko, Safari, Opera. These correspond to:
visible,visible
hidden,hidden
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden; visible,hidden (2 combinations)
hidden,scroll; hidden,visible (2 combinations)
In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values:
visible,visible
hidden,hidden; visible,hidden; hidden,visible (3 combinations)
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden
hidden,scroll

html window eg sample example

javascript window windows
 
function openNewWindow(url) {
 _top=_top*1+numWindows*20;
 _left=_left+20; 
        numWindows += 1;
 parameters = "toolbar=0,scrollbars=0,location=0,statusbar=0,"+
 "menubar=0,resizable=0,width=600,height=800,top = 1 ,left =650 ";
var title = "Window #"+numWindows;
myWindow=window.open(url,'','location=false,width=200,height=110');
myWindow.focus();   
} 
 
 
$("#ID").click(function()   // click function
      {
      var _1="callHttp.jsp?KeyCode="+_lookup('InputValue');
      openNewWindow(_1);
      }
      ); 

Open in same window

a link with button 

<a href="input.jsp?input=payrollEntryList.txt&config=payrollEntryListConfig.txt&mode=LIST"><button class="SaveButton" style="float:right;">close</button></a>





Open in next window


<!DOCTYPE html>
<html>
<head>
<script>
function open_win() 
{
window.open("http://www.w3schools.com");
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>

</html>

html-checker html-check-box



checkbox readonly

onclick="return false;"

<div style="border:solid 1px black; width:100%; height:200px;">
<span class="interBoxHeader" style="">Employee Payroll Frequency</span>
<div style="clear:both; height:30px; width:100%; border:0px solid black;">
<div style="float:left; width:20%;">
<input type="checkbox" id="weekly">
<label for="weekly">weekly</label>
</div>
<div style="float:left;width:30%;">
<input type="checkbox" id="bi_weekly">
<label for="bi_weekly">BI Weekly</label>
</div>
</div>
<div style="clear:both; height:30px; width:100%; border:0px solid black;">
<div style="float:left;width:20%;">
<input type="checkbox" id="Monthly">
<label for="Monthly">Monthly</label>
</div>
<div style="float:left;width:30%;">
<input type="checkbox" id="Semi_Monthly">
<label for="Semi_Monthly">Semi Monthly</label>
</div>
</div>
<div style="clear:both; height:30px; width:100%; border:0px solid black;">
<div style="float:left;width:20%;">
<input type="checkbox" id="Quarterty">
<label for="Quarterty">Quarterty</label>
</div>
<div style="float:left;width:30%;">
<input type="checkbox" id="Semi_Quarterty">
<label for="Semi_Quarterty">Semi Quarterty</label>
</div>
<div style="float:left;">
<input type="checkbox" id="Annuality">
<label for="Annuality">Annuality</label>
</div>
</div>
</div>

2013年7月29日 星期一

css - layout template : multi setting 1,2,3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<%String contentHeight="700px";%>
<head>
<style type="text/css">
body {
background: url(images/bg.png) repeat;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
}
.boxH {width:100% ; margin-left:2px; float:left;height:20px; color:white;
background-color:rgb(67,120,182); margin-bottom:10px;
}
</STYLE>
</head>
<body>
<div style="height:20px; color:white; background-color:rgb(67,120,182); border: 1px white solid; margin:0;">
<span>Create Entries</span>
</div>
<div id="content" style="width:100%; margin-top:10px; ">
<div style="border:solid 1px black; height:<%=contentHeight%>; width:20%;float:left;">
<span class="boxH" style="">Payroll Setting</span>
</div>
<div style="border:solid 1px black; height:<%=contentHeight%>; width:79%;float:right;">
<span class="boxH" style="">Payroll Parameter</span>
<div style="float:left; border:solid 0px black; width:50%;margin: 0px 0;">
<div style=" height:500px;">
<div style="border:solid 1px black; width:100%; height:350px;">
</div>
<div style="border:solid 1px black; width:100%; height:300px;">
</div>
</div>
</div>
<div style="float:right; height:500px; border:solid 0px black; width:49%;margin: 0px 0;">
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
</div>
</div>
</div>
</body>
</html>




2013年7月28日 星期日

html-table-template eg sample example

This code can copy to your blog html

<div style="border:solid 1px black; height:200px; width:49%;float:left;">
<span style="width:100% ; margin-left:2px; float:left;height:20px; color:white; background-color:rgb(67,120,182); margin-bottom:0;">Update</span>

<table style="margin-top:20px;">
<colgroup>
<col span="1" style="width: 60%;"> <!--  column width  -->
<col span="1" style="width: 40%;">
</colgroup>
<tr>
<td>key<td>
<td>value</td>
</tr>
</table>
</div>

Update


keyvalue

jquery each eg sample example

            aMAs=[<%=CompareNo%>];
            $.each(aMAs, function(i, ma) {
            $.getJSON('ServletProgram?code='+cCODE+'&Type=ModeName &value='+ma+'&callback=?',
            function(data) {
            chart.addSeries( {type: 'line',name: xxx,yAxis: 0, data: data,dataGrouping: { units: groupingUnits} })
            })}
            );

jquery resize html eg sample example

$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
 
 
$(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    ); 
});
 

2013年7月27日 星期六

aspx example asp.net

http://youtu.be/w0gpUxOArZA


Login.aspx

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Login.aspx.vb" Inherits="BasicFormAuthVbWeb.Login" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>登入網頁</title>
<meta name="GEN-ERATOR" content="Microsoft Visual Studio .NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="新細明體">
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 13px; POSITION: absolute; TOP: 71px" runat="server">請輸入使用者的名稱:</asp:Label>
<asp:RequiredFieldValidator id="RequiredFieldValidator2" style="Z-INDEX: 109; LEFT: 439px; POSITION: absolute; TOP: 107px" runat="server" ControlToValidate="txtPassword" Width="229px">務必輸入密碼不可以空白</asp:RequiredFieldValidator>
<asp:Label id="Label2" style="Z-INDEX: 102; LEFT: 13px; POSITION: absolute; TOP: 107px" runat="server">請輸入使用者的密碼:</asp:Label>
<asp:TextBox id="txtUserName" style="Z-INDEX: 103; LEFT: 202px; POSITION: absolute; TOP: 68px" runat="server" Font-Size="12pt"></asp:TextBox>
<asp:TextBox id="txtPassword" style="Z-INDEX: 104; LEFT: 202px; POSITION: absolute; TOP: 104px" runat="server" Font-Size="12pt"></asp:TextBox>
<asp:Button id="btnSubmit" style="Z-INDEX: 105; LEFT: 213px; POSITION: absolute; TOP: 180px" runat="server" Font-Size="12pt" Text="登入"></asp:Button>
<asp:Label id="Message" style="Z-INDEX: 106; LEFT: 13px; POSITION: absolute; TOP: 228px" runat="server" ForeColor="Red"></asp:Label>
<asp:CheckBox id="PersistentCookie" style="Z-INDEX: 107; LEFT: 74px; POSITION: absolute; TOP: 140px" runat="server" Font-Size="12pt" Text="永久性 Cookie:" TextAlign="Left"></asp:CheckBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" style="Z-INDEX: 108; LEFT: 439px; POSITION: absolute; TOP: 71px" runat="server" ControlToValidate="txtUserName" Width="302px">務必輸入使用者名稱不可以空白</asp:RequiredFieldValidator><IMG style="Z-INDEX: 110; LEFT: 16px; POSITION: absolute; TOP: 7px" alt="" src="Images/Title1.jpg"></FONT>
</form>
</body>
</HTML>







Login.aspx.vb

Imports System.Web.Security
Public Class Login
    Inherits System.Web.UI.Page
    Protected WithEvents Label1 As System.Web.UI.WebControls.Label
    Protected WithEvents RequiredFieldValidator2 As System.Web.UI.WebControls.RequiredFieldValidator
    Protected WithEvents Label2 As System.Web.UI.WebControls.Label
    Protected WithEvents txtUserName As System.Web.UI.WebControls.TextBox
    Protected WithEvents txtPassword As System.Web.UI.WebControls.TextBox
    Protected WithEvents btnSubmit As System.Web.UI.WebControls.Button
    Protected WithEvents Message As System.Web.UI.WebControls.Label
    Protected WithEvents PersistentCookie As System.Web.UI.WebControls.CheckBox
    Protected WithEvents RequiredFieldValidator1 As System.Web.UI.WebControls.RequiredFieldValidator

#Region " Web Form 設計工具產生的程式碼 "

    '此呼叫為 Web Form 設計工具的必要項。
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: 此方法呼叫為 Web Form 設計工具的必要項
        '請勿使用程式碼編輯器來修改它。
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此加入要初始化頁面的使用者程式碼
    End Sub

    Private Sub btnSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
        If ((txtUserName.Text = "章立民") And (txtPassword.Text = "iamalex") Or _
            (txtUserName.Text = "周時恕") And (txtPassword.Text = "ilovemydaughter") Or _
            (txtUserName.Text = "洪志豪") And (txtPassword.Text = "naturalplayer")) Then

            ' 將通過驗證之使用者重新導向至原來所要求的URL
            FormsAuthentication.RedirectFromLoginPage(txtUserName.Text, PersistentCookie.Checked)
        Else

            Message.Text = "憑證資料錯誤,請再次嘗試!!"
        End If
    End Sub
End Class











tomcat servlet java web.xml example

The following sample web.xml deployment descriptor shows how to declare the HelloServlet servlet in the HelloWorld Web application. See also Description of the web.xml File.
<?xml version="1.0" encoding="ISO-8859-1" ?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="2.4">

    <display-name>HelloWorld Application</display-name>
    <description>
        This is a simple web application with a source code organization
        based on the recommendations of the Application Developer's Guide.
    </description>

    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>examples.Hello</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>

</web-app>     

Description of the web.xml File

In the preceding web.xml deployment descriptor file, the <servlet> XML element declares the HelloServlet, the examples.Hello Java class implements the servlet, and the <servlet-mapping> XML element specifies the/hello URL pattern that invokes the servlet in a browser. This URL pattern is used in the index.html file.