web лабки / WEB-5lab-boiko
.docxСтудент Бойко Євгеній група 410-і
Лабораторна робота №5
Тема: Форми в HTML.
Мета: Вивчити основи організації форм в HTML.
Хід роботи
Завдання №1
Текст завдання.
За допомогою елементів HTML5 створити веб-сторінку з формою.
Скріншот готової програми.
Одним скріншотом:
Код програми.
<html lang="ru"><head> <meta charset="UTF-8"><title>Boiko</title> </head><body>
<form method="post" action="1.php">
<IMG SRC="a1.jpg" WIDTH="1300" HEIGHT="400" ALIGN="top" ALT="photo"> <p><b><left>Заполните данные:</b></p> <fieldset> <p>Фамилия:<br><label> <input type="text" maxlength="20" name="surname"> </label></p> <p>Имя:<br><label> <input type="text" maxlength="20" name="name"> </label></p> <p>Отчество:<br><label> <input type="text" maxlength="20" name="patronymic"> </label></p> </fieldset><br><fieldset> <p>Введите номер телефона +380:<label> <input type="text" name="phone" maxlength="9"> </label></p> </label></p> <p>Введите Email:<label> <input type="text" name="email" maxlength="20"> @gmail.com </label></p> </fieldset><br><fieldset> <label> Способ доствки <select name="delivery_method" size="1"> <option disabled>Способ доствки </option> <option value="Courier">курьер</option> <option value="branch">В отделение НП</option> </select> </label> </p> <p>Адрес доставки: <br><label> <input type="text" maxlength="20" name="adress"> </label></p> <p>Способ Оплаты:<br><br> <label> <input name="typedelivery" type="radio" value="Nova_Poshta"> </label>Наложеный платеж </p> <p><label> <input name="typedelivery" type="radio" value="Card"> </label>Перевод денег на карту </p> <p><label> <p>Выбирете дату отправки товара:<label> <input type="date" name="date" value="2020-09-29" min="2020-09-28" max="2025-11-01"> </label></p></fieldset><br><fieldset> <p> <label> Кол-во единиц товара <INPUT type="number" min="1" name="Number" class=input2 value="1" maxlength=6> </label> </p> </p> <label> Вебирете цвет товара <select name="color" size="1"> <option disabled>цвет </option> <option value="Courier">Чорный</option> <option value="branch">Белый</option> <option value="branch">Желтый</option> <option value="branch">Серый</option> <option value="branch">Красный</option> </select> </label> </p> <p><b>гарантия</b> <label> <input name="Garantiya" type="checkbox" value="12 month"> </label>12 месяцев +500грн</p> <p>перезвонить вам для уточнения заказаного товара, а ткаже способа доствки <label> <input name="Call" type="checkbox" value="+"> </label></p> <p>кометарии к заказу<br><label> <textarea rows=20 cols=80></textarea> </label></p> </fieldset> <button>Отправить</button> </div> </form> </body> </html>
Контрольні запитання
Що таке форма?
Це елемент вебсторінки, який дає користувачам можливість вводити інформацію і відправляти її на сервер для подальшої обробки.
Який тег описує форму у HTML коді?
<form></form>
Які атрибути є обов’язковими при додаванні форми на web-сторінку?
action
Назвіть елементи форми.
Input с різним типом
Який атибут допомагає створити кнопку із зображенням?
src
Висновок : на лаборторній роботі було вивчено основи організації форм в HTML.