Это старая версия документа!

Эксперимент 60. Веб- страница и веб- форма

В прошлом эксперименте мы научились передавать данные на сервер через параметры в URL. Мы вручную формировали строку адреса, что не очень удобно. На настоящих сайтах и веб- приложениях такого не происходит. Для удобства пользователя предусмотрены веб- формы. Форма это набор полей для ввода данных и кнопка для отправки формы. При нажатии на кнопку происходит отправка запроса на сервер с передачей данных, введенных в форму.

Ранее мы уже выводили пользователю в браузер разничные строки. Это были просто строки обычного текста, полноценной веб- страницей назвать их нельзя. Чтобы создавать полноценные веб- страницы нужно освоить язык на котором они пишутся — HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»). HTML нельзя назвать языком программирования, это язык форматирования и разметки текста, изображений, форм, ссылок и других объектов. В HTML нет функций, процедур, переменных и прочего. В нем есть только команды, называемые тегами, для описания страницы. Можно указывать размер шрифта, цвет, форматирование. Можно внедрять картинки, таблицы, видео, формы и другое.

Язык HTML заслуживает отдельного большого учебного пособия, поэтому мы, конечно, не будем изучать сейчас все его возможности. Но мы создадим простую веб- страницу с формой для управления яркостью светодиода. Чтобы больше не приходилось вводить цисло прямо в адресной строке.

Если у тебя есть желание, то можно изучить HTML по самоучителям, например вот этим

Схема эксперимента

Схема не изменилась по сравнению с прошлым экспериментом Рисунок 1. Монтажная схема эксперимента

Программный код эксперимента

Сначала создадим файл веб страницы page.html. Этот файл с этим кодом нужно загрузить в корень внутренней файловой системы микроконтроллера.

page.html
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h2>Input led duty between 0 and 1023</h2>
  6.         <form action="/">
  7.             <input type="text" name="duty" value="512">
  8.             <input type="submit" value="Send">
  9.         </form>
  10.     </body>
  11. </html>

Большинство тегов в HTML состоят из двух частей- открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>…</html>. Далее веб страница делится на заголовок <head>…</head> и тело страницы <body>…</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым.

Внутри тела страницы мы создаем заголовок второго уровня <h2>…</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 123. Далее создаем форму: 

  1.         <form action="/">
  2.             <input type="text" name="duty" value="512">
  3.             <input type="submit" value="Send">
  4.         </form>