Crowdly
Додати до Chrome
Завдання Створіть форми реєстрації за зразком (рис. 7.3, рис. 7.4) 1 . С...
✅ Перевірена відповідь на це питання доступна нижче. Наші рішення, перевірені спільнотою, допомагають краще зрозуміти матеріал.
Завдання
Створіть форми реєстрації за зразком (рис. 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-Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).