-easyPopup/index.html at main · igarok88/-easyPopup · GitHub

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="style.css" />
		<title>Document</title>
	</head>
	<body>
		<button class="popup__btn">click me</button>
		<div class="popup show">
			<div class="popup__window">
				<div class="popup__close">&times;</div>
				<div class="popup__content">
					<div class="form">
						<form action="#" id="form" class="form__body">
							<h1 class="form__title">Отправка данных на почту</h1>
							<div class="form__item">
								<label for="formName" class="form__label">Имя*:</label>
								<input
									id="formName"
									type="text"
									name="name"
									class="form__input _req"
								/>
							</div>
							<div class="form__item">
								<label for="formEmail" class="form__label">E-mail*:</label>
								<input
									id="formEmail"
									type="text"
									name="email"
									class="form__input _req _email"
								/>
							</div>
							<div class="form__item">
								<div class="form__label">Левша или правша?</div>
								<div class="options">
									<div class="options__item">
										<input
											checked
											value="right"
											id="formRightHanded"
											type="radio"
											name="hand"
											class="options__input"
										/>
										<label for="formRightHanded" class="options__label"
											><span>Правша</span>
										</label>
									</div>
									<div class="options__item">
										<input
											value="left"
											id="formLeftHanded"
											type="radio"
											name="hand"
											class="options__input"
										/>
										<label for="formLeftHanded" class="options__label"
											><span>Левша</span>
										</label>
									</div>
								</div>
							</div>
							<div class="form__item">
								<label for="formMessage" class="form__label">Сообщение:</label>
								<textarea
									class="form__input"
									name="message"
									id="formMessage"
								></textarea>
							</div>
							<div class="form__item">
								<div class="form__label">Возраст:</div>
								<select name="age" class="select">
									<option value="от 18 до 25" selected>Молодой</option>
									<option value="от 25 до 45">Стар</option>
									<option value="от 45">Супер стар</option>
								</select>
							</div>
							<div class="form__item">
								<div class="form__label">Прикрепить фото</div>
								<div class="file">
									<div class="file__item">
										<input
											id="formImage"
											accept=".jpg, .png, .gif"
											type="file"
											name="image"
											class="file__input"
										/>
										<div class="file__button">Выбрать</div>
										<div id="formPreview" class="file__preview"></div>
									</div>
								</div>
							</div>
							<div class="form__item">
								<div class="checkbox">
									<input
										id="formAgreement"
										type="checkbox"
										name="agreement"
										class="checkbox__input _req"
									/>
									<label for="formAgreement" class="checkbox__label"
										><span
											>Я даю свое согласие на обработку персональных данных, в
											соответствии с <a href="#">условиями</a></span
										></label
									>
								</div>
							</div>

							<button type="submit" class="form__button">Отправить</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script src="script.js"></script>
	</body>
</html>