Калькулятор div онлайн – division calculator online (�)

Кнопки и команды онлайн-калькулятора

В списке ниже указаны все клавиши и команды калькулятора и выполняемые ими операции.

novostynauki.com

Html код калькулятора для сайта и первое знакомство с формами

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

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

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

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

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

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

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

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

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

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

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

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

Тег <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 type="submit" value="Отправить"> <input type="reset" value="Очистить"></p>
</fieldset>
 </form>
 </body>
</html>

<!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 type=»submit» value=»Отправить»> <input type=»reset» value=»Очистить»></p> </fieldset> </form> </body> </html>

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

Пока-пока!

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

Прочитано: 533 раз

romanchueshov.ru