这是我的 html 文件，其中存储了一些客户详细信息
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Home.css" />
<title>Customer</title>
</head>
<body>
<form id="formId" jwcid="formId@Form" success="ognl:listeners.addCustomer">
<table>
<h3 id="customerTab1">Customer Data</h3>
<!--TextField for taking customerId-->
<!--TextField for taking customerName-->
<tr>
<td><label id="customerlabel1">Customer Name:</label>
<input type="text" jwcid="@TextField" id="customername" value="ognl:customerName"/></td>
</tr>
<!--TextField for taking customerAddress-->
<tr>
<td><label id="customerlabel2">Customer Address:</label>
<textarea rows="2" cols="20" jwcid="@TextArea" id="address" value="ognl:address"></textarea>
</td>
</tr>
</table>
<h3 id="customerTab2" >Select Gender</h3>
<!--RadioGroup with Radio buttons to select Gender-->
<span id="customerGender" jwcid="customerGender@RadioGroup" selected="ognl:customerGender">
<Input type="radio" name="customerGender" jwcid="@Radio" value="0"/><label id="customermale">Male</label>
<Input type="radio" name="customerGender" jwcid="@Radio" value="1" /><label id="customerfemale">Female</label>
</span>
<h3 id="customerTab3" >Select Service</h3>
<!--Checkbox to select Service-->
<Input type="checkbox" id="customerPrivilege" jwcid="customerPrivilege@Checkbox" value="1" selected="ognl:customerPrivilege"/>
<label id="privilegecustomer">Privileged Customer</label>
<!--List to select PaymnetMode-->
<h3 id="customerTab4">Customer List</h3>
<select>
<span jwcid="@For" source='ognl:customerList' value='ognl:currentCustomerData' keyExpression="id">
<option jwcid="@Any" value='ognl:currentCustomerData.id'><span jwcid="@Insert" value='ognl:currentCustomerData.customerName'></span></option>
</span>
</select>
<!--Buttons to perform desired action-->
<input id="submitform" type="Submit" value="Add Customer" />
</form>
</body>
</html>
2. CSS code
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body
{
margin: 17% 25%;
border-width: 1em;
border-style: groove;
border-color: orange;
background-image:url('blue.BMP');
background-repeat:no-repeat;
background-position:50%;
background-size:100%;
}
textarea {
position: absolute;
left: 48.2%;
height: 5%;
resize: none;
width:12%;
top: 34%;
}
#customerlabel1
{
position: absolute;
left: 34%;
top: 30%;
font-family:verdana;
font-weight:bold;
}
#customerlabel2
{
position: absolute;
left: 34%;
top: 34%;
font-family:verdana;
font-weight:bold;
}
#customername {
position: absolute;
left: 48%;
top: 29.5%;
}
#customerGender
{
position: absolute;
left: 42%;
top: 47%;
}
#customermale
{
font-family:verdana;
font-weight:bold;
}
#customerfemale
{
font-family:verdana;
font-weight:bold;
}
#customerPrivilege
{
position: absolute;
left:40%;
top: 57%;
}
#privilegecustomer
{
position: absolute;
left: 42%;
top: 57%;
font-family:verdana;
font-weight:bold;
}
#customerTab1 {
position: absolute;
left: 42%;
top: 26%;
background-color:fuchsia ;
background-repeat: no-repeat;
color: black;
text-align: left;
font-family: Arial;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
}
#customerTab2 {
position: absolute;
left: 42%;
top: 42%;
background-color: fuchsia;
background-repeat: repeat-x;
color: black;
text-align: left;
font-family: Arial;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
}
#customerTab3 {
position: absolute;
left: 42%;
top: 52%;
background-color: fuchsia;
background-repeat: repeat-x;
color: black;
text-align: left;
font-family: Arial;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
}
#customerTab4 {
position: absolute;
top: 62%;
left: 42%;
background-color: fuchsia;
background-repeat: repeat-x;
color: black;
text-align: left;
font-family: Arial;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
}
select {
position: absolute;
left: 44%;
top: 66%;
font-family:verdana;
font-weight:bold;
}
#submitform
{
position: absolute ;
left: 44%;
top: 70%;
}