-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
347 lines (345 loc) · 19.6 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="練習用LP">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/pc_style.css" type="text/css">
<link rel="stylesheet" href="css/sp_style.css" type="text/css">
<link rel="stylesheet" href="css/form.css" type="text/css">
</head>
<body>
<header id="header">
<div class="museum-name">
<h1>目黒美術館</h1>
<h2>Meguro Museum of Art, TOKYO</h2>
</div>
<nav class="nav">
<ul id="g-navi">
<li><a href="index.html" >アールヌーヴォーとは</a></li>
<li><a href="#index.html">イベントスケジュール</a></li>
<li><a href="#index.html">アクセス</a></li>
</ul>
</nav>
</header>
<form id="contant-form" class="form" name="contact-form">
<h1 class="form__headline">ワークショップお申し込みフォーム</h1>
<div class="form__description">
<p>必要事項をご入力のうえ、確認画面へお進みください。</p>
<p><span class="form__required-label">必須</span>の項目はお手数ですが必ず入力をお願いいたします。</p>
</div>
<fieldset class="form__group">
<legend class="form__group-header">
<span class="form__group-label">姓名<strong class="form__required-label">必須</strong></span>
</legend>
<div class="form__group-content">
<div class="form__name">
<div class="form__text-input">
<label class="visually-hidden" for="family-name">姓</label>
<p class="text-input">
<input id="family-name" class="text-input__body" type="text" name="family-name" autocomplete="family-name" placeholder="姓" title="姓の入力は必須です" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
<div class="form__text-input">
<label class="visually-hidden" for="given-name">名</label>
<p class="text-input">
<input id="given-name" class="text-input__body" type="text" name="given-name" autocomplete="given-name" placeholder="名" title="名の入力は必須です" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
</div>
<p class="form__validation" data-validation="family-name" role="alert" aria-live="assertive"></p>
<p class="form__validation" data-validation="given-name" role="alert" aria-live="assertive"></p>
</div>
</fieldset>
<fieldset class="form__group">
<legend class="form__group-header">
<span class="form__group-label">姓名(フリガナ)<strong class="form__required-label">必須</strong></span>
</legend>
<div class="form__group-content">
<div class="form__name">
<div class="form__text-input">
<label class="visually-hidden" for="family-name-furigana">セイ</label>
<p class="text-input">
<input id="family-name-furigana" class="text-input__body" type="text" name="family-name-furigana" placeholder="セイ" pattern="(?=.*?[\u30A1-\u30FC])[\u30A1-\u30FC\s]*" title="姓のフリガナは全角カタカナで記入してください" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
<div class="form__text-input">
<label class="visually-hidden" for="given-name-furigana">メイ</label>
<p class="text-input">
<input id="given-name-furigana" class="text-input__body" type="text" name="given-name-furigana" placeholder="メイ" pattern="(?=.*?[\u30A1-\u30FC])[\u30A1-\u30FC\s]*" title="名のフリガナは全角カタカナで記入してください" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
</div>
<p class="form__notion">フリガナは全角カタカナで記入してください</p>
<p class="form__validation" data-validation="family-name-furigana" role="alert" aria-live="assertive"></p>
<p class="form__validation" data-validation="given-name-furigana" role="alert" aria-live="assertive"></p>
</div>
</fieldset>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="tel">電話番号</label>
</p>
<div class="form__group-content">
<div class="form__text-input">
<p class="text-input">
<input id="tel" class="text-input__body -placeholder-visible" type="tel" name="tel" placeholder="(例) 090-0000-0000" autocomplete="tel" pattern="\d{2,4}-?\d{2,4}-?\d{3,4}" title="電話番号は正しく記入してください">
<span class="text-input__validator"></span>
</p>
</div>
<p class="form__notion">電話番号はハイフン(-)ありなしどちらでもご記入頂けます</p>
<p class="form__validation" data-validation="tel" role="alert" aria-live="assertive"></p>
</div>
</div>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="email">メールアドレス<strong class="form__required-label">必須</strong></label>
</p>
<div class="form__group-content">
<div class="form__text-input">
<p class="text-input">
<input id="email" class="text-input__body" type="email" name="email" placeholder="(例) example@example.com" autocomplete="email" title="メールアドレスは正しく記入してください" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
<p class="form__validation" data-validation="email" role="alert" aria-live="assertive"></p>
</div>
</div>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="postal-code">郵便番号<strong class="form__required-label">必須</strong></label>
</p>
<div class="form__group-content">
<div class="form__postal-code">
<div class="form__text-input -narrow">
<p class="text-input">
<input id="postal-code" class="text-input__body" type="text" name="postal-code" placeholder="000-0000" autocomplete="postal-code" pattern="\d{3}-?\d{4}" title="郵便番号はハイフンありなしの7桁で記入してください" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
<div class="form__address-search-button">
<button class="button -small js-address-search" type="button">郵便番号から住所を検索する</button>
</div>
</div>
<p class="form__notion">郵便番号はハイフン(-)ありなしどちらでもご記入頂けます</p>
<p class="form__validation" data-validation="postal-code" role="alert" aria-live="assertive"></p>
</div>
</div>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="address-level1">都道府県<strong class="form__required-label">必須</strong></label>
</p>
<div class="form__group-content">
<div class="form__select-box">
<div class="select-box">
<select id="address-level1" class="select-box__body" name="address-level1" title="都道府県は必ず指定してください" required aria-required="true">
<option value="" disabled selected hidden>選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</div>
</div>
<p class="form__validation" data-validation="address-level1" role="alert" aria-live="assertive"></p>
</div>
</div>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="address-level2">以降の住所<strong class="form__required-label">必須</strong></label>
</p>
<div class="form__group-content">
<div class="form__text-input -wide">
<p class="text-input">
<input id="address-level2" class="text-input__body" type="text" name="address-level2" autocomplete="address-level2" title="住所の入力は必須です" required aria-required="true">
<span class="text-input__validator"></span>
</p>
</div>
<p class="form__validation" data-validation="address-level2" role="alert" aria-live="assertive"></p>
</div>
</div>
<fieldset class="form__group">
<legend class="form__group-header">
<span class="form__group-label">性別</span>
</legend>
<div class="form__group-content">
<!-- 性別のコードはISO 5218で定められたものに従う。 -->
<!-- @see https://ja.wikipedia.org/wiki/ISO_5218 -->
<ul class="form__group-list">
<li class="form__group-list-item">
<label class="radio">
<input class="radio__input" type="radio" name="sex" value="1">
<span class="radio__icon"></span>
<span class="radio__text">男性</span>
</label>
</li>
<li class="form__group-list-item">
<label class="radio">
<input class="radio__input" type="radio" name="sex" value="2">
<span class="radio__icon"></span>
<span class="radio__text">女性</span>
</label>
</li>
<li class="form__group-list-item">
<label class="radio">
<input class="radio__input" type="radio" name="sex" value="9">
<span class="radio__icon"></span>
<span class="radio__text">その他</span>
</label>
</li>
<li class="form__group-list-item">
<label class="radio">
<input class="radio__input" type="radio" name="sex" value="0">
<span class="radio__icon"></span>
<span class="radio__text">不明・回答しない</span>
</label>
</li>
</ul>
</div>
</fieldset>
<fieldset class="form__group">
<legend class="form__group-header">
<span class="form__group-label">当店をどこで知りましたか？</span>
</legend>
<div class="form__group-content">
<ul class="form__group-list">
<li class="form__group-list-item">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" name="survey" value="twitter">
<span class="checkbox__icon"></span>
<span class="checkbox__text">Twitter</span>
</label>
</li>
<li class="form__group-list-item">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" name="survey" value="facebook">
<span class="checkbox__icon"></span>
<span class="checkbox__text">Facebook</span>
</label>
</li>
<li class="form__group-list-item">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" name="survey" value="instagram" disabled>
<span class="checkbox__icon"></span>
<span class="checkbox__text">Instagram</span>
</label>
</li>
<li class="form__group-list-item">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" name="survey" value="other">
<span class="checkbox__icon"></span>
<span class="checkbox__text">その他</span>
</label>
</li>
</ul>
</div>
</fieldset>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="datetime">来館予定時間</label>
</p>
<div class="form__group-content">
<div class="form__text-input">
<p class="text-input">
<input id="datetime" class="text-input__body" type="date" name="datetime" title="翌日から二週間後までで指定してください">
<span class="text-input__validator"></span>
</p>
</div>
<p class="form__notion">翌日から二週間後まで指定いただけます</p>
<p class="form__validation" data-validation="datetime" role="alert" aria-live="assertive"></p>
</div>
</div>
<div class="form__group">
<p class="form__group-header">
<span class="form__group-label">添付ファイル</span>
</p>
<div class="form__group-content">
<div class="form__file-select">
<div class="file-select js-flie-select">
<input id="file" class="file-select__input" type="file" name="file">
<label class="file-select__button" for="file">ファイルを選択する</label>
</div>
</div>
</div>
</div>
<div class="form__group">
<p class="form__group-header">
<label class="form__group-label" for="message">お問い合わせ内容<strong class="form__required-label">必須</strong></label>
</p>
<div class="form__group-content">
<div class="form__textarea">
<div class="textarea js-flexible-textarea">
<textarea id="message" class="textarea__body" name="message" title="お問い合わせ内容は必ず記入してください" required aria-required="true"></textarea>
</div>
</div>
<p class="form__validation" data-validation="message" role="alert" aria-live="assertive"></p>
</div>
</div>
<div class="form__confirm">
<p class="form__confirm-text">
<a class="form__link" href="#privacy-policy">プライバシーポリシー</a>に同意の上、「送信する」ボタンからお進みください。
</p>
</div>
<div class="form__submit">
<p class="form__validation" data-validation="submit" role="alert" aria-live="assertive"></p>
<button class="button" type="submit">送信する</button>
</div>
</form>
<footer id="footer">
<ul id="bottom-btn">
<li id="top-btn"><a href="#">TOP</a></li>
</ul>
<small>© HITOMI KOMORI</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/form.js"></script>
</body>
</html>