Здравствуйте, подписчики и случайные гости моего блога. В предыдущих публикациях я рассказывал вам о большом количестве тегов, свойств и атрибутов, которыми снабжены такие веб-языки, как 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 id="but" type="submit" value="Отправить"> <input id="but" type="reset" value="Очистить"></p> </fieldset> </form> </body> </html> |
На этой ноте я закончу. Не забывайте вступать в сообщество подписчиков данного блога и делиться ссылкой с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов