Команды, создающие форму, находятся внутри тегов <form> и </form>. Сами текстовые поля ввода и кнопки создаются в HTML-файле с помощью одного и того же тега <input>. Внутри этого тега нужно указать несколько атрибутов:
□ type — определяет тип элемента управления (для поля ввода type="text", для кнопки type="button");
□ name — задает имя элемента управления;
□ size — определяет длину строки поля ввода в символах;
□ value — задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором — сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов <table> и </table>, внутри которых приводятся теги <tr> и </tr>, задающие начало и конец одной строки таблицы соответственно:
<table border="0" width="100%" style="font-family:Arial; font-size:10pt">
<tr>
</tr>
</table>
Здесь аргумент border задает ширину границ таблицы (в нашем случае границы невидимы), а в аргументе style указываются название и размер шрифта, которым будет выводиться содержимое таблицы.
В свою очередь, внутри тегов <tr> и </tr> находятся теги <td> и </td>, определяющие одну ячейку таблицы, например:
<tr>
<td width="15%">Фамилия</td>
<td width="85%"><input type="text" name="txtLastName" size="50"></td>
</tr>
Для тегов <td> указывается аргумент width, задающий ширину строки в процентах от общей ширины строки.
Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность  ), например:
<input type="button" value="<" name="btnPrevious">
<input type="button" value="Новая запись" name="btnNew">
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форма для записной книжки</title>
</head>
<body bgcolor="silver" scroll="no">
<form name="MainForm">
<table border="0" width="100%" style="font-family:Arial; font-size:10pt">
<tr>
<td width="15%">Фамилия</td>
<td width="85%"><input type="text" name="txtLastName" size="50"></td>
</tr>
<tr>
<td>Имя</td>
<td><input type="text" name="txtName" size="50"></td>
</tr>
<tr>
<td>Телефон</td>
<td><input type="text" name="txtPhone" size="15"></td>
</tr>
<tr>
<td>Улица</td>
<td><input type="text" name="txtStreet" size="50"></td>
</tr>
<tr>
<td>Дом</td>
<td><input type="text" name="txtHouse" size="10"></td>
</tr>
<tr>
<td>Кв.</td>
<td><input type="text" name="txtApp" size="5"></td>
</tr>
<tr>
<td>Примечание</td>
<td><input type="text" name="txtNote" size="80"></td>
</tr>
</table>
<br>
<input type="button" value="<<" name="btnFirst">
<input type="button" value="<" name="btnPrevious">
<input type="button" value="Новая запись" name="btnNew">
<input type="button" value="Записать" name="btnSave">
<input type="button" value="Отменить" name="btnCancel">
<input type="button" value="Удалить" name="btnDelete">
<input type="button" value=">" name="btnNext">
<input type="button" value=">>" name="btnFinal">
</form>
</body>
</html>
Создание объекта для обмена данными между XML-файлом и формой
В отличие от рассмотренного выше сценария PhoneBook.wsf, в сценарии IEPhoneBook.js функции для работы с записной книжкой не будут разделены по разным заданиям, поэтому для более четкой организации сценария мы воспользуемся объектно-ориентированным подходом и создадим два объекта Person и ListPersons, методы которых и будут осуществлять обработку данных и связь между XML-файлом и пользовательской формой.