Defining the Layout

Procedure

For the layout of page default.htm program the following:

<%@page language="abap"%>
<html>
<head>
<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
<title> Fehlermeldungen ausgeben </title>
</head>

<body class="bspBody1">

<H1 class="bspH1"> Beratungs-Service </H1>

<form method = "post" action="<%=page->get_page_url( )%>">
<table class="bspTbvStd" cellpadding="4">
<tr>
  <td class="bspTbvHdrStd" colspan="2" align="center">
  <font size="4">Adresse</font></td>
</tr>
<tr class="bspTbvCellStd">
  <td>Name</td>
  <td><input type="text" name="name"
      value="<% page->write( value = name ). %>" size="40" ></td>
</tr>
<tr class="bspTbvCellStd">
  <td>Straße und Hausnr.</td>
  <td><input type="text" name="street"
      value="<% page->write( value = street ). %>" size="40"></td>
</tr>
<tr class="bspTbvCellStd">
  <td>Postleitzahl</td>
  <td><input type="text" name="zipcode"
      value="<% page->write( value = zipcode ). %>" size="5"></td>
</tr>
<tr class="bspTbvCellStd">
  <td>Wohnort</td>
  <td><input type="text" name="city"
      value="<% page->write( value = city ). %>" size="40"></td>
</tr>
<tr class="bspTbvCellStd">
  <td>Besuch erwünscht am</td>
  <td><input type="text" name="date_at"
      value="<% page->write( value = date_at ). %>" size="10"></td>
</tr>
<tr class="bspTbvCellStd">
  <td>zwischen</td>
  <td><input type="text" name="time_from"
      value="<% page->write( value = time_from ). %>" size="5"></td>
</tr>
<tr class="bspTbvCellStd">
  <td>und </td>
  <td><input type="text" name="time_to"
      value="<% page->write( value = time_to ). %>"size="5">&nbsp;Uhr</td>
</tr>
<tr class="bspTbvCellStd">
  <td>Senden</td>
  <td><input type="submit" name="OnInputProcessing(ok)" value="OK"></td>
</tr>
</table>
</form>
</body>
</html>

Not much emphasis was placed on design here. The following points, however, are important:

With <form> the page is specified as a destination URL. The input is therefore processed on the same page.
The names of the input fields must agree with the attribute names, otherwise input cannot be transferred automatically.
The submit button has the name OnInputProcessing(..). You can check the input in this event handler yourself and edit it later.
Incorrect input is not yet considered.

You can test this page already and will see that the input is processed. So, for example, the time 18 becomes 18:00 and even the zipcode is extended to 5 characters. If you enter invalid input (such as abcd as the date, or 99.99.2001), you will see an error message.