-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
43 lines (43 loc) · 2.41 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Regular Expressions</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header">
<img class="header__logo" src="https://pictures.s3.yandex.net/frontend-developer/dom_bom/logo.svg" alt="logo">
<p class="header__logo-sub">Регулярные выражения</p>
</header>
<main class="container">
<div class="cover">
<div class="cover__image"></div>
<h1 class="cover__heading">RegExp</h1>
</div>
<div class="block">
<form novalidate class="form" name="register" action="http://httpbin.org/post" method="POST">
<h3>Форма регистрации</h3>
<fieldset class="form__fieldset">
<div class="form__field">
<input class="form__input" type="text" name="name" pattern="^(([А-Я]{1}[а-яё]{1,19})$|([А-Я]{1}[а-яё]{1,19}+)(-[А-Я]{1}[а-яё]{1,19}+)$)" placeholder="Имя" minlength="2" maxlength="20" required />
</div>
<div class="form__field">
<input class="form__input" type="email" name="name" pattern="^[A-Za-z0-9\_\-\.]{1,}@[A-Za-z0-9\_\-\.]{1,}\.{1}\w{2,}$" placeholder="E-Mail" />
<span class="form__error">e-mail в формате: sega@yandex.ru</span>
</div>
<div class="form__field">
<input class="form__input" type="tel" name="name" placeholder="Телефон" pattern="^(\+7(\(\d{3}\)\s?| ?\d{3}-)\d{3}-\d{2}-\d{2}|\+7\d{10}|8\d{10})$" minlength="11" maxlength="20" />
<span class="form__error">телефон в формате: +7 (123) 456-78-90</span>
</div>
<div class="form__field">
<input class="form__input" type="url" name="name" pattern="^(http[s]?\:\/\/([w]{3}.)?([A-Za-z]{1,}\.{1}[A-Za-z]{1,}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:\d{2,5})?(\/[A-Za-z\/]{1,})?(\#)?)$" placeholder="Ваш сайт" />
<span class="form__error">URL в формате: http://mysite.ru</span>
</div>
<button class="form__button" type="submit">Отправить</button>
</fieldset>
</form>
</div>
</main>
</body>
</html>