GUI Help/HTML book
Содержание |
|
Обший вид HTML-файлов с формами
[править]Все HTML-файлы с формами могут иметь следующий вид:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>T</title>
</head>
<body>
<form action=s>
<!-- Код формы.-->
</form>
</body>
</html>
T - заголовок страницы, s - адрес сервера или программы, которая обработает отправленные ей данные формы. Возможно и сразу описывать виджеты.
Типы виджетов
[править]В HTML присутствуют следующие типы виджетов:
- кнопка
- кнопка отправки данных на сервер
- радио-кнопка
- флажок
- поле ввода
- выпадающий список
- «группировщик»
и др.
Виджеты
[править]Кнопка
[править]Общий синтаксис создания кнопки выглядит так:
<input type="button" name="id" value="t" />
id - имя кнопки, t - текст на кнопке.
Событие | Описание |
---|---|
onclick | Хранит ссылку на функцию, которая выполнится когда на кнопку нажмут.
Имя функции с ее параметрами берется в кавычки. |
Кнопка отправки
[править]Общий синтаксис создания кнопки выглядит так:
<input type="submit" name="id" value="t" />
id - имя кнопки, t - текст на кнопке.
Радио-кнопка
[править]Общий синтаксис создания радио-кнопки выглядит так:
<input type="radio" name="id" value="v" /> t
id - имя группы радио-кнопок, в которую входит данная радио-кнопка, v - значение радио-кнопки, которое будет отправлено на сервер; t - текст на радио-кнопке.
Атрибут | Описание |
---|---|
checked | Приписывается для той группы, в которой надо изначально выделить последнюю в группе радио-кнопку. |
Кнопка-флажок
[править]Общий синтаксис создания кнопки-флажка выглядит так:
<input type="checkbox" name="id" value="v" /> t
id - имя кнопки-флажка, v - значение кнопки-флажка, которое будет отправлено на сервер; t - текст на кнопке-флажке.
Атрибут | Описание |
---|---|
checked | Приписывается для того флажка, который изначально должен быть выделен. |
Однострочное текстовое поле
[править]Общий синтаксис создания однострочного текстового поля выглядит так:
<input type="text" name="id" />
id - имя текстового поля.
Выпадающий список
[править]Общий синтаксис создания выпадающего списка выглядит так:
<form>
<select name="id" >
<option value="v"> t </option>
<!--И так сколько надо раз.-->
</select>
id - имя выпадающего списка, v - значение определенного пункта списка, t - текст на определенном пункте списка.
Группировщик
[править]Общий синтаксис создания «группировщика» выглядит так:
<fieldset>
<legend>title_</legend>
</fieldset>
<!--Содержание «группировщика».-->
<fieldset>
title_ - текст, отображаемый в качестве заголовка фрейма.
Пример
[править]<form>
<fieldset>
<legend>Данные о пользователе</legend>
Имя: <br /><input type="text" name="firstname" /><br />
Фамилия:<br /> <input type="text" name="lastname" /><br />
Отчество: <br /><input type="text" name="lastname" /><br />
<p>Укажите Ваш пол:</p>
<input type="radio" name="s" value="m" /> Мужской<br />
<input type="radio" name="s" value="f" /> Женский
</fieldset>
<fieldset>
<legend> Анкета: </legend>
<p>Какую марку машины Вы обожаете?</p>
<input type="checkbox" name="space" value="1" />
Volga<br />
<input type="checkbox" name="space" value="2" />
Toyota<br />
<input type="checkbox" name="space" value="3" />
Lamborgini Callardo<br />
</fieldset>
</form>