質問編集履歴

2

例文の修正

2020/11/29 20:12

投稿

chocon
chocon

スコア14

test CHANGED
File without changes
test CHANGED
@@ -18,270 +18,236 @@
18
18
 
19
19
 
20
20
 
21
- 表示・非表示にしているのが原因なのでしょうか?
21
+ 表示・非表示にしている部分が必須なに入力されていないと認識されることが原因なのでしょうか?
22
+
23
+
22
24
 
23
25
  ```html
24
26
 
25
- <form action="index02.html" method="POST">
26
-
27
-
28
-
29
-
30
-
31
- <div class="container">
32
-
33
-
34
-
35
- <div>
36
-
37
- <label for="i_name" class="question">お名前</label>
38
-
39
- </div>
40
-
41
- <div>
42
-
43
- <em>必須</em>
44
-
45
- </div>
46
-
47
- <div>
48
-
49
- <input id="i_name" type="text" name="name" required>
50
-
51
- </div>
52
-
53
- </div>
54
-
55
-
56
-
57
- <div class="container">
58
-
59
- <div>
60
-
61
- <label for="i_mailadrees" class="question">メールアドレス</label>
62
-
63
- </div>
64
-
65
- <div>
66
-
67
- <em>必須</em>
68
-
69
- </div>
70
-
71
- <div>
72
-
73
- <input id="i_mailadrees" type="text" name="mailadrees" required>
74
-
75
- </div>
76
-
77
- </div>
78
-
79
-
80
-
81
- <div class="container">
82
-
83
- <div>
84
-
85
- <label for="i_telnumber" class="question">電話番号</label>
86
-
87
- </div>
88
-
89
- <div>
90
-
91
- <em>必須</em>
92
-
93
- </div>
94
-
95
- <div>
96
-
97
- <input id="i_telnumber" type="text" name="telnumber" required>
98
-
99
- </div>
100
-
101
- </div>
102
-
103
- <!-- 問い合わせ項目選択 -->
104
-
105
-
106
-
107
- <div class="fprm_container">
108
-
109
- <p class="qtype_title">お問い合わせ項目</p><em class="must">必須</em>
110
-
111
- <!-- <div class="qtype_item"> -->
112
-
113
- <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ" >
114
-
115
- <label for="i_qtype01" class="qtype_item">お問い合わせ</label><br>
116
-
117
- <input id="i_qtype02" type="radio" name="qtype" value="資料請求" >
118
-
119
- <label for="i_qtype02" class="qtype_item">資料請求</label><br>
120
-
121
- <input id="i_qtype03" type="radio" name="qtype" value="キャンペーン" >
122
-
123
- <label for="i_qtype03" class="qtype_item">キャンペーン</label>
124
-
125
- <!-- </div> -->
126
-
127
- <div class=clearfix></div>
128
-
129
- <div class="data-contents">
130
-
131
- <div class="siryou">
132
-
133
- <div class="textarea_01">
134
-
135
- <label>お問い合わせ内容</label>
136
-
137
- </div>
138
-
139
- <div class="textarea_01">
140
-
141
- <em class=c_em>必須</em></div>
142
-
143
- <div class="textarea_01">
144
-
145
- <textarea required cols="65"></textarea></div>
146
-
147
- </div>
148
-
149
- <!-- <資料請求選択時に表示 -->
150
-
151
-
152
-
153
- <div class="siryou-02">
154
-
155
- <div class="textarea_01">
156
-
157
- <label class="s_02title">お問い合わせ内容</label></div>
158
-
159
- <div class="textarea_01">
160
-
161
- <em class="s_02em">任意</em></div>
162
-
163
- <div class="textarea_01">
164
-
165
- <textarea cols="65"></textarea></div>
166
-
167
- <div class="clearfix"></div>
168
-
169
- </div>
170
-
171
-                  <!-- キャンペーン選択時に表示 -->
172
-
173
-
174
-
175
- <div class="siryou-03">
176
-
177
- <div class="s_con">
178
-
179
- <label for="url01">対象サイトURL</label>
180
-
181
- </div>
182
-
183
- <div class="s_con"><em>必須</em></div>
184
-
185
- <div class="s_con">
186
-
187
- <input id="url01" type="text"name="url_name" placeholder="http://www.j-mamenoki.co.jp" required>
188
-
189
- </div>
190
-
191
-
192
-
193
- <div class="clearfix"></div>
194
-
195
-
196
-
197
-
198
-
199
- <div class="s_con02">
200
-
201
- <label for="url02">記事</label></div>
202
-
203
- <div class="s_con02">
204
-
205
- <em class="con02_em">必須</em>
206
-
207
- </div>
208
-
209
- <div class="s_con02">
210
-
211
- <input id="url02" type="text"name="url_name" class="con02_input"required>
212
-
213
- </div>
214
-
215
- <div class="clearfix"></div>
216
-
217
-
218
-
219
- <div class="s_con03">
220
-
221
- <label for="url03">目的・狙い</label></div>
222
-
223
- <div class="s_con03">
224
-
225
- <em class="con03_em">必須</em></div>
226
-
227
- <div class="s_con03">
228
-
229
- <input id="url03" type="text"name="url_name" class="con03_input" required>
230
-
231
- </div>
232
-
233
- <div class="clearfix"></div>
234
-
235
- <div class="title_sc03">
236
-
237
-
238
-
239
- <label>現状の課題<br>(※複数回答可)</label>
240
-
241
- </div>
242
-
243
- <em class="sc03_em">必須</em>
244
-
245
- <div class="item_sc03">
246
-
247
- <div>
248
-
249
- <input id="check02_01" type="checkbox">
250
-
251
- <label for="check02_01" required>検討している</label>
252
-
253
- </div>
254
-
255
-
256
-
257
- <div>
258
-
259
- <input id="check02_02" type="checkbox">
260
-
261
- <label for="check02_02" required>他社乗り換え</pre>
262
-
263
- </label>
264
-
265
- </div>
266
-
267
-
268
-
269
- <div>
270
-
271
- <input id="check02_03" type="checkbox">
272
-
273
- <label for="check02_03" required>その他</label>
274
-
275
- </div>
27
+ <form action="index02.html" method="post">
28
+
29
+
30
+
31
+ <div class="fprm_container">
32
+
33
+ <p class="qtype_title">お問い合わせ項目</p>
34
+
35
+ <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ">
36
+
37
+ <label for="i_qtype01">お問い合わせ</label><br>
38
+
39
+ <input id="i_qtype02" type="radio" name="qtype" value="資料請求">
40
+
41
+ <label for="i_qtype02">資料請求</label><br>
42
+
43
+ <input id="i_qtype03" type="radio" name="qtype" value="キャンペーン">
44
+
45
+ <label for="i_qtype03">キャンペーン</label>
46
+
47
+ <div class="clearfix"></div>
48
+
49
+
50
+
51
+ <div class="data-contents">
52
+
53
+
54
+
55
+ <!-- お問い合わせを選択時に表示 -->
56
+
57
+
58
+
59
+ <div class="siryou">
60
+
61
+ <div class="title">
62
+
63
+ <label>サイトを知ったきっかけ</label><br>
64
+
65
+ <em>必須(複数回答可)</em>
66
+
67
+ </div>
68
+
69
+ <div class="item">
70
+
71
+ <div>
72
+
73
+ <input id="check01_01" type="checkbox" required>
74
+
75
+ <label for="check01_01">紹介</label>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ <div>
82
+
83
+ <input id="check01_02" type="checkbox" required>
84
+
85
+ <label for="check01_02">広告</label>
86
+
87
+ </div>
88
+
89
+
90
+
91
+ <div>
92
+
93
+ <input id="check01_03" type="checkbox" required>
94
+
95
+ <label for="check01_03">SNS</label>
96
+
97
+ </div>
98
+
99
+
100
+
101
+ <div>
102
+
103
+ <input id="check01_04" type="checkbox" required>
104
+
105
+ <label for="check01_04">DM</label>
106
+
107
+ </div>
108
+
109
+       <div>
110
+
111
+ <input id="check01_05" type="checkbox" required>
112
+
113
+ <label for="check01_05">FAX</label>
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+ <label class="title">
120
+
121
+ お問い合わせ内容<em>必須</em>
122
+
123
+
124
+
125
+ </label>
126
+
127
+
128
+
129
+ <textarea class="item" required></textarea>
130
+
131
+
132
+
133
+ </div>
134
+
135
+ <!-- <資料請求選択時に表示 -->
136
+
137
+ <div class="siryou02">
138
+
139
+ <label class="title">お問い合わせ内容(必須)</label>
140
+
141
+ <textarea class="item" required></textarea>
142
+
143
+ </div>
144
+
145
+ <!-- <親タグ閉じる -->
146
+
147
+
148
+
149
+ </div>
150
+
151
+ <!-- <家族閉じる -->
276
152
 
277
153
  </div>
278
154
 
279
- </div>
280
-
281
- <p class="btn"><input type="submit" value="送信内容を確認する"></p>
155
+ <p class="btn"><input type="submit" value="送信内容を確認する"></p>
282
156
 
283
157
  </form>
284
158
 
285
- </section>
159
+
286
160
 
287
161
  ```
162
+
163
+ ```CSS
164
+
165
+ .fprm_container {
166
+
167
+ max-width: 900px;
168
+
169
+ margin: 0 auto;
170
+
171
+ }
172
+
173
+ .qtype_title {
174
+
175
+ float: left;
176
+
177
+ margin: 25px;
178
+
179
+ width: 200px;
180
+
181
+ }
182
+
183
+ .clearfix {
184
+
185
+ clear: both;
186
+
187
+ }
188
+
189
+
190
+
191
+ .siryou,
192
+
193
+ .siryou02 {
194
+
195
+ display: none;
196
+
197
+ flex-wrap: wrap;
198
+
199
+ align-items: center;
200
+
201
+ margin: 20px 0;
202
+
203
+ }
204
+
205
+
206
+
207
+ .title {
208
+
209
+ margin: 25px;
210
+
211
+ width: 200px;
212
+
213
+ }
214
+
215
+
216
+
217
+ .item {
218
+
219
+ width: calc(100% - 260px);
220
+
221
+ }
222
+
223
+ textarea.item {
224
+
225
+ height: 150px;
226
+
227
+ }
228
+
229
+
230
+
231
+ .data-contents .siryou,
232
+
233
+ .data-contents .siryou02 {
234
+
235
+ display: none;
236
+
237
+ }
238
+
239
+
240
+
241
+ input[value="お問い合わせ"]:checked ~ .data-contents .siryou{
242
+
243
+ display: flex;
244
+
245
+ }
246
+
247
+ input[value="資料請求"]:checked ~ .data-contents .siryou02{
248
+
249
+ display: flex;
250
+
251
+ }
252
+
253
+ ```

1

修正

2020/11/29 20:12

投稿

chocon
chocon

スコア14

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  ```html
24
24
 
25
- <form action="index.html" method="POST">
25
+ <form action="index02.html" method="POST">
26
26
 
27
27
 
28
28