これは、顧客の詳細を保存する私の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%;
}