Перейти к содержанию

GUI Help/HTML book

Материал из Викиучебника — открытых книг для открытого мира

Содержание

  1. Python
    1. tkinter Стандратный модуль для создания приложений с GUI интерфейсом.
  2. VBA
    1. VBA GUI в среде MS Excel.
  3. HTML
    1. HTML book Обзор GUI в HTML.
  4. Pascal
    1. Windows Forms Интерфейс (API) для создания GUI-приложений.

Обший вид HTML-файлов с формами

[править]

Все HTML-файлы с формами могут иметь следующий вид:

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>T</title>
 </head>
 <body>
  <form action=s>
   <!-- Код формы.-->
  </form>
 </body>
</html>

T - заголовок страницы, s - адрес сервера или программы, которая обработает отправленные ей данные формы. Возможно и сразу описывать виджеты.

Типы виджетов

[править]

В HTML присутствуют следующие типы виджетов:

  1. кнопка
  2. кнопка отправки данных на сервер
  3. радио-кнопка
  4. флажок
  5. поле ввода
  6. выпадающий список
  7. «группировщик»

и др.

Виджеты

[править]

Кнопка

[править]

Общий синтаксис создания кнопки выглядит так:

<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>