-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
145 lines (139 loc) · 9.12 KB
/
form.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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html class="antialiased" lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/form.min.css" rel="stylesheet">
<link href="/assets/css/tailwind.css" rel="stylesheet">
<link href="/assets/css/base.css" rel="stylesheet">
<title>Рога и Сила - Главная страница</title>
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body class="bg-white text-gray-600 font-sans leading-normal text-base tracking-normal flex min-h-screen flex-col">
<div class="wrapper flex flex-1 flex-col bg-gray-100">
<header class="bg-white">
<div class="border-b">
<div class="container mx-auto block overflow-hidden px-4 sm:px-6 sm:flex sm:justify-between sm:items-center py-4 space-y-4 sm:space-y-0">
<div class="flex justify-center">
<a href="/" class="inline-block sm:inline hover:opacity-75">
<img src="assets/images/logo.png" width="222" height="30" alt="">
</a>
</div>
<div>
<ul class="flex justify-center sm:justify-end items-center space-x-8 text-sm">
<li>
<a class="text-gray-500 hover:text-orange" href="/register.html">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block text-orange h-4 w-4" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Регистрация
</a>
</li>
<li>
<a class="text-gray-500 hover:text-orange" href="/login/index.php">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block text-orange h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
Авторизация
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="border-b">
<div class="container mx-auto overflow-hidden px-4 sm:px-6">
<section class="bg-white py-4">
<ul class="list-inside bullet-list-item flex flex-wrap justify-between -mx-5 -my-2">
<li class="px-5 py-2"><a class="text-gray-600 hover:text-orange" href="index.php">Главная</a></li>
<li class="px-5 py-2"><a class="text-orange cursor-default" href="/section1/">Раздел 1</a></li>
<li class="px-5 py-2"><a class="text-gray-600 hover:text-orange" href="inner.html">Раздел 2</a></li>
<li class="px-5 py-2"><a class="text-gray-600 hover:text-orange" href="inner.html">Раздел 3</a></li>
<li class="px-5 py-2"><a class="text-gray-600 hover:text-orange" href="catalog.html">Каталог</a></li>
</ul>
</section>
</div>
</div>
</header>
<main class="flex-1 container mx-auto bg-white overflow-hidden px-4 sm:px-6">
<div class="py-4 pb-8">
<h1 class="text-black text-3xl font-bold mb-4">Веб-форма</h1>
<div class="my-4">
<div class="px-4 py-3 leading-normal text-red-700 bg-red-100 rounded-lg" role="alert">
<p>Пример вывода текста ошибки</p>
</div>
</div>
<div class="my-4">
<div class="px-4 py-3 leading-normal text-green-700 bg-green-100 rounded-lg" role="alert">
<p>Пример вывода успешного сообщения</p>
</div>
</div>
<form>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<div class="block">
<label for="field1" class="text-gray-700 font-bold">Текстовое поле</label>
<input id="field1" type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="">
</div>
<div class="block">
<label for="field2" class="text-gray-700 font-bold">Пример поля с ошибкой валидации</label>
<input id="field2" type="text" class="mt-1 block w-full rounded-md border-red-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="">
<span class="text-xs italic text-red-600">Поле не заполнено</span>
</div>
<div class="block">
<label for="field3" class="text-gray-700 font-bold">Поле Email</label>
<input id="field3" type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="john@example.com">
</div>
<div class="block">
<label for="field4" class="text-gray-700 font-bold">Поле с выбором даты</label>
<input id="field4" type="date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
</div>
<div class="block">
<label for="field5" class="text-gray-700 font-bold">Выпадающий список</label>
<select id="field5" class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</div>
<div class="block">
<label for="field6" class="text-gray-700">Текстарея</label>
<textarea id="field6" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" rows="3"></textarea>
</div>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50" checked="">
<span class="ml-2">Поле - чекбокс</span>
</label>
</div>
</div>
</div>
<div class="block">
<button type="submit" class="inline-block bg-orange hover:bg-opacity-70 focus:outline-none text-white font-bold py-2 px-4 rounded">
Сохранить
</button>
<button type="reset" class="inline-block bg-gray-400 hover:bg-opacity-70 focus:outline-none text-white font-bold py-2 px-4 rounded">
Отменить
</button>
</div>
</div>
</div>
</form>
</div>
</main>
<footer class="border-t bg-white">
<div class="container mx-auto overflow-hidden px-4 sm:px-6">
<div class="space-y-4 sm:space-y-0 sm:flex sm:justify-between items-center py-6 px-2 sm:px-0">
<div class="copy pr-8">© 2021 Рога & Сила. Сайт для изучения php</div>
<div class="text-right">
<a href="https://www.qsoft.ru" target="_blank" class="inline-block">Сделано в <img class="ml-2 inline-block" src="assets/images/qsoft.png" width="59" height="11" alt=""/></a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>