Crowdly
Add to Chrome
Завдання Створіть форми реєстрації за зразком (рис. 7.3, рис. 7.4) 1 . С...
✅ The verified answer to this question is available below. Our community-reviewed solutions help you understand the material better.
Завдання
Створіть форми реєстрації за зразком (рис. 7.3,рис. 7.4)
1. Створити форму, що дозволяє реєструвати нових користувачів (рис. 7.3). Додайте в таблицю стилів відповідне форматування для створеної форми.
Рис. 7.3. Вигляд форми1 у вікні браузера
2. Створіть форму, зовнішній вигляд якої представлено на рис. 7.4. Додайте в таблицю стилів відповідне форматування для створеної форми.
Рис. 7.4. Вигляд форми 2 у вікні браузера
Порядок виконання завдання
- На локальному диску свого ПК створіть папку pr7_forms.
- Розархівуйте в дану папку архів Додаткові матеріали_ПЗ7, який містить рисунок (логотип WIX), що необхідно буде розмістити на формі 2.
- Відкрийте папку pr7_forms в редакторі коду VS і створіть файл form1.html. Додайте DOCTYPE й інші структурні теги.
- У розділ <body> додайте наступну розмітку для форми1:
<form class="form" action="#">
<h1 class="form-header"> Створити новий обліковий запис</h1>
<div>
<label>Логін:</label>
<input class="form-field" type="text" placeholder="login" >
</div>
<div>
<label>E-mail:</label>
<input type="email" class="form-field" placeholder="e-mail" >
</div>
<div>
<label>Пароль:</label>
<input type="password" class="form-field" placeholder="password">
</div>
<div class="button">
<button class="btn" type="submit" >Відправити</button>
</div>
</form>
- У папці pr7_forms cтворіть файл style-form1.css, підключіть до form1.html за допомогою тега <link> і задайте css-правила форматування форми1.
СSS-правила
*{
box-sizing:border-box;
}
html{
font-size: 14px;
font-family:'Times New Roman', Times, serif;
}
.form{
margin: 0 auto;
width: 340px;
border: 1px solid #CCC;
background-color:rgb(244, 177, 131);
}
.form div{
margin: 20px 0;
}
.form-header{
font-size: 20px;
color: rgb(91, 155, 213);
text-align: center ;
}
label {
display: inline-block;
width: 100px;
text-align: right;
color: rgb(91, 155, 213);
}
.form-field{
width: 180px;
height: 30px;
background: #f1f1f1;
border-radius: 5px;
border: none;
padding-left: 5px;
}
.button{
text-align: center;
}
.btn{
width: 180px;
height: 35px;
border: none;
background: rgb(91, 155, 213);
border-radius: 5px;
font-weight: bold;
color: white;
}
- Збережіть зміни, перегляньте створену форму в браузері.
(Друга частина завдання, створення форми 2)
- У папці pr7_forms створіть файл html. Додайте DOCTYPE й інші структурні теги.
- Використовуючи методичні рекомендації до практичного заняття 7, приклади створених форм, самостійно виконайте верстку форми 2 (рис. 7.4). Додайте в таблицю стилів відповідне форматування для створеної форми (аналогічно до попереднього завдання).
- Перевірте роботу, відкривши створену форму 2 у браузері.
- Запакуйте папку pr7_forms в архів з ім’ям pr7_forms-Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).