質問編集履歴
2
文章を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
<head>
|
|
19
19
|
<meta charset="UTF-8">
|
|
20
20
|
<meta name="viewport" content="width=device-width">
|
|
21
|
-
|
|
22
|
-
<link rel="stylesheet" href="style.css">
|
|
21
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
22
|
+
<link rel="stylesheet" href="style.css">
|
|
23
23
|
<script type="text/javascript" src="script.js"></script>
|
|
24
24
|
|
|
25
25
|
<title> ログイン</title>
|
1
文章を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
|
-
提示コードですが`<input`タグのメールアドレス入力フォームの横にチェックマークの`<svg`タグを横並びにしたいのですがこれをするにはどうしたらいいのでしょうか？参考サイトを参考に
|
|
1
|
+
提示コードですが`<input`タグのメールアドレス入力フォームの横にチェックマークの`<svg`タグを横並びにしたいのですがこれをするにはどうしたらいいのでしょうか？参考サイトを参考にしましたが値が書き換わる度にアイコンが複数表示されてしまい実現できません。
|
|
2
2
|
|
|
3
|
-
参考サイト：https://hsmt-web.com/blog/css-side-by-side/
|
|
4
3
|
|
|
4
|
+
##### 実現したいこと
|
|
5
|
+
入力フォームの横にアイコンを表示させたい。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
参考サイト：https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
```html
|
|
6
16
|
<!DOCTYPE html>
|
|
7
17
|
<html lang="ja">
|
|
@@ -10,6 +20,7 @@
|
|
|
10
20
|
<meta name="viewport" content="width=device-width">
|
|
11
21
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
|
12
22
|
<link rel="stylesheet" href="style.css">
|
|
23
|
+
<script type="text/javascript" src="script.js"></script>
|
|
13
24
|
|
|
14
25
|
<title> ログイン</title>
|
|
15
26
|
</head>
|
|
@@ -30,12 +41,9 @@
|
|
|
30
41
|
<form action="signup.php" method="post">
|
|
31
42
|
|
|
32
43
|
<label class="form-label text">メールアドレス(Gmailのみ可能)</label>
|
|
33
|
-
<input id="email" type="email" class="form-control mailInput" name="mail">
|
|
44
|
+
<input id="email" type="email" class="form-control mailInput" name="mail" onChange="DrawCheckMark()">
|
|
34
45
|
|
|
35
|
-
|
|
46
|
+
|
|
36
|
-
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
|
37
|
-
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
|
|
38
|
-
</svg>
|
|
39
47
|
|
|
40
48
|
|
|
41
49
|
<button type="submit" class="btn btn-primary" name="submit">ログイン</button>
|
|
@@ -54,10 +62,42 @@
|
|
|
54
62
|
```
|
|
55
63
|
|
|
56
64
|
```css
|
|
65
|
+
|
|
66
|
+
header
|
|
67
|
+
{
|
|
68
|
+
margin-top: 30px;
|
|
69
|
+
color: #C0C0C0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
hr
|
|
73
|
+
{
|
|
74
|
+
border-width: 3px;
|
|
75
|
+
border-color: #2E99A9;
|
|
76
|
+
margin: 30px 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.text
|
|
80
|
+
{
|
|
81
|
+
color: #C0C0C0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
.title
|
|
86
|
+
{
|
|
87
|
+
font-weight: bold;
|
|
88
|
+
|
|
89
|
+
margin: 0;
|
|
90
|
+
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
body
|
|
94
|
+
{
|
|
95
|
+
background-color: #15202B; /*背景色*/
|
|
96
|
+
}
|
|
97
|
+
|
|
57
98
|
/*メールアドレス入力フォーム*/
|
|
58
99
|
.mailInput
|
|
59
100
|
{
|
|
60
|
-
display: inline-block;
|
|
61
101
|
|
|
62
102
|
width: 500px;
|
|
63
103
|
}
|
|
@@ -65,7 +105,6 @@
|
|
|
65
105
|
/*パスワード入力フォーム*/
|
|
66
106
|
.passwordInput
|
|
67
107
|
{
|
|
68
|
-
display: inline-block;
|
|
69
108
|
width: 500px;
|
|
70
109
|
}
|
|
71
110
|
|
|
@@ -73,12 +112,22 @@
|
|
|
73
112
|
.checkIcon
|
|
74
113
|
{
|
|
75
114
|
display: inline-block;
|
|
76
|
-
|
|
77
115
|
color: #00FF00;
|
|
78
116
|
|
|
79
117
|
}
|
|
80
118
|
|
|
81
119
|
```
|
|
82
120
|
|
|
121
|
+
```js
|
|
122
|
+
function DrawCheckMark()
|
|
123
|
+
{
|
|
124
|
+
console.log("check");
|
|
83
125
|
|
|
84
126
|
|
|
127
|
+
document.getElementById("email").insertAdjacentHTML("afterend",'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-check-circle-fill checkIcon" viewBox="0 0 16 16">'+
|
|
128
|
+
'<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>'+
|
|
129
|
+
+'</svg>');
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
|