Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Простой html код калькулятора для сайта, который поможет узнать все прелести языка гипертекстовой разметки

Здравствуйте, подписчики и случайные гости моего блога. В предыдущих публикациях я рассказывал вам о большом количестве тегов, свойств и атрибутов, которыми снабжены такие веб-языки, как html и css, приводил множество примеров, касающихся оформления и структурирования веб-страниц.

Если следовать логике, то у вас должен был возникнуть вопрос: «Неужели перечисленные языки годятся только для верстки сайтов?». Ответ на этот вопрос отрицательный.

Человек, который отлично владеет языком разметки и с легкостью при помощи стилей задает дизайн своим творениям, может использовать знания для написания учебных приложений, игр и других видов программ. Именно поэтому после прочтения данной статьи вы научитесь писать html код калькулятора для сайта. Начнем обучение!

Инструменты для создания калькулятора

В просторах интернета можно найти бесконечно множество разнообразных реализаций одного и того же вида калькулятора, с использованием разных языков и плагинов. Наша с вами задача состоит создать простой ипотечный калькулятор при помощи средств и языков, которые вы уже знаете. К ним относятся html, css и их встроенный инструментарий.

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

Наш калькулятор

Главными тегами для написания калькулятора являются <input> и <form>.

Элемент <input> используется для создания различных важных объектов, позволяющих осуществлять ввод, редактирование и обработку данных.

При помощи данного тега на странице вашего веб-сервиса можно создать:

  • простое текстовое поле (text)
  • элементы для выбора нескольких параметров одновременно (checkbox)
  • поле для ввода пароля (password)
  • специальное скрытое поле (hidden)
  • элементы для выбора одного из нескольких предложенных вариантов, которые называются переключателями (radio)
  • специальную кнопку для передачи данных, введенных в диалоговом окне (submit)
  • для очистки всей формы (reset)
  • пользовательские кнопки (button)
  • поле для передачи документов (file)
  • графические кнопки (image)

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

Хочу обратить внимание на один атрибут, который позже я задействую в программе. Это required. Указание данного параметра запрещает оставлять поле незаполненным, предотвращая тем самым возникающие в будущем ошибки.


Тег <form> — очень важный инструмент, без которого не может обойтись ни один уважающий себя интернет-сервис.

тег form

Формы нужны для связи клиентского приложения (в данном случае калькулятора) с сервером. Так, <form> используют для организации страниц регистрации или входа, отправки сообщений, мультимедиа, комментариев и другой информации, которую нужно каким-то образом обработать.

Также я использовал еще парочку тегов для организации раскрывающегося списка. Это такие единицы языка разметки, как <select> и <option>.

<select> задает каркас для списка с раскрывающимися пунктами меню, а <option> создает один пункт открывающегося списка.

Второй элемент обязательно прописывается внутри тега <select>. Начальное значение задается при помощи встроенного атрибута autofocus.

Пришло время запрограммировать ипотечный калькулятор

Выше я подробно описал каждый тег и атрибут, который использовал при программной реализации калькулятора, так что теперь весь код вам будет понятен. Как всегда небольшой совет от меня: при возможности обязательно опробуйте данный пример практически, а лучше постарайтесь повторить код самостоятельно. Это ускорит ваш процесс обучения.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ипотечный калькулятор</title>
 <style> 
   body {
     background:#FFFFF0;
      font-size:20px;
      text-shadow: 1px 1px 2px #2F4F4F; 
      font-weight: bold;
    }
   form {
    width:50%;
    margin-left:25%;
    background:#F0F8FF;
   }
   select {
    width: 315px;   
    }
   #but {
    margin-left:85px;
    width:150px;
    padding:8px;
    text-shadow: 2px 3px 3px #2F4F4F;
    background:	#696969;
    border: 2px inset #2E8B57;
   }
 
</style>
 </head>
 <body>
 <form name="test" method="post" action="function.php">
<fieldset>
  <legend>Ипотечный калькулятор</legend>
  <p><input type="text" size="40" value="Стоимость апартаментов" autofocus required> <input type="text" size="40" value="Первый взнос" required></p>
  <p><input type="text" size="40" value="Процентная ставка" required> <input type="text" size="40" value="Количество месяцев ипотеки" required></p>
  <p><select>
    <option value="s2" selected>Погашение</option>  
    <option value="s1">Простое</option>
    <option value="s3">Аннуитет</option>
   </select> 
</p>
 <p><input id="but" type="submit" value="Отправить"> <input id="but" type="reset" value="Очистить"></p>
</fieldset>
 </form>
 </body>
</html>

На этой ноте я закончу. Не забывайте вступать в сообщество подписчиков данного блога и делиться ссылкой с друзьями. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 169 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: