Способы включения JavaScript в XHTML

Формы.

Для чтения данных от пользователя на сайтах используют формы.

Форма – это набор элементов, таких как строки ввода, выпадающие списки, кнопки и т.п., позволяющий пользователю вводить данные и передавать их на сервер. На сервере данные обрабатываются при помощи программ (скриптов), написанных на серверном языке программирования, например на РНР.

Форма создается при помощи контейнерного тега <form>. Синтаксис формы, которая не использует передачу файлов на сервер:

<form action=”имя_скрипта” method=”метод”>

…

</form>

method – метод передачи данных формы на сервер (get, post).

Формы также могут передавать дынные на сервер. Например, при прикреплении файла к письму, передаваемому по электронной почте или загрузку фотографий в социальных сетях.

Синтаксис формы, в которой есть поле выбора файла для загрузки на сервер.

<form action=”имя_скрипта” enctype="multipart/form-data">

…

</form>

При этом автоматически выбирается метод POST.

Элементы форм.

Однострочное текстовое поле.

<input type="text" name="имя" />

Параметры:

· size – ширина текстового поля (в символах).

· maxlength – максимальное количество символов, которое можно ввести в поле;

· value – начальное значение (текст, которые будет сразу находится в форме при загрузке страници);

Поле для ввода пароля.

<input type="password" name="имя" />

Параметры те же, что и у однострочного текстового поля. Разница лишь в том, что введенные данные будут печататься кружочками или звездочками.

3. Многострочное текстовое поле.

<textarea name="имя" rows="высота" cols="ширина">

начальный текст

</textarea>

Параметры:

· rows – высота поля в символах, т.е. число строк;

· cols – ширина поля в символах, т.е. число стобцов.

4. Кнопка “submit”. Кнопка, при нажатии на которую происходит отправка данных формы на сервер.

<input type="submit" name="имя" value="надпись" />

Если требуется на кнопке разместить многострочный текст, изображения или другие теги, то следует использовать контейнерный тег <button>:

<button type="submit" name="имя">надпись</button>

5. Кнопка “reset”.Кнопка, при нажатии на которую происходит очистка формы в состояние, заданное параметрами value.

<input type="reset" name="имя" value="надпись" />

<button type="reset" name="имя">надпись</button>

6. Обычная кнопка.Кнопка, при нажатии на которую выполняется код JavaScript.

<input type="button" name="имя" value="надпись" />

<button type=" button " name="имя">надпись</button>

Флажки (ckeckbox).

<input type="checkbox" name="имя" value="значение" />

Параметры:

· checked="checked"

· value – значение, которое будет оправлено на сервер.

Переключатели (radiobutton)

<input type="radio" name="имя" value="значение1"/>

<input type="radio" name="имя" value="значение2"/>

Группа переключателей должна иметь одно и то же имя, задаваемое параметром name. Каждый переключатель должен иметь различное значение параметра value.

Параметры:

· checked="checked"

Скрытое поле.

<input type="hidden" name="имя" value="значение" />

Скрытое поле не отображается и как следствие, в него ничего нельзя ввести. Используется для передачи технической информации на сервер.

Выпадающий список

<select name="имя" size=”размер”>

<option value="значение1">Пункт 1</option>

<option value="значение2">Пункт 2</option>

<option value="значение3">Пункт 3</option>

</select>

Для установки по умолчанию выбранного пункта следует указывать параметр selected="selected" в соответствующем теге <option>.

Cписок с множественным выбором.

<select name="имя" multiple="multiple" size=”размер”>

<option value="значение1">Пункт 1</option>

<option value="значение2">Пункт 2</option>

<option value="значение3">Пункт 3</option>

</select>

Для установки отмеченных по умолчанию пунктов следует добавить параметр selected="selected" к соответствующим тегам <option>.

Кнопка “submit” в виде рисунка.

<input type="image" name="имя" align="выравнивание" alt="альтернативний текст" src="путь"/>

Поле для оправки файлов на сервер.

<input type="file" name="имя">

Параметры:

· size

· maxlength

Пример.

<form name="auth" action="obr.php" method="get">

Логін: <input type="text" name=”login” /> <br />

Пароль: <input type="password" name="password" /> <br />

<input type="submit" value="Увійти" />

</form>

Лекция 8. Основы JavaScript

Способы включения JavaScript в XHTML

1. Подключение внешнего файла со скриптом.

<script type=”text/javascript” language=”javascript” src=”путь”></script>

2. Размещение скрипта в любом месте документа.

<script type=”text/javascript” language=”javascript”> …

</script>

3. Размещение скрипта непосредственно в теге:

<тег событие=”код скрипта”>…</тег>

<тег событие=”код скрипта”/>

Например:

<a href=”delete.php” onclick=”return confirm(‘Вы уверены?’);”>Удалить</a>