質問編集履歴

1

cssとJavaScriptを追加

2020/06/17 16:13

投稿

takuson
takuson

スコア36

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,11 @@
4
4
 
5
5
  ###作成したソース
6
6
 
7
+ HTML
8
+
9
+ ```
10
+
7
- ```<h1>新規会員登録</h1>
11
+ <div class="add_user">
8
12
 
9
13
  <table border="1" style="border-collapse: collapse">
10
14
 
@@ -80,13 +84,95 @@
80
84
 
81
85
  <td><input type="radio" name="example" value="girl"checked>女
82
86
 
83
- <input type="radio" name="example" value="boy" >男</td>
87
+ <input type="radio" name="example" value="boy" id="set">男</td>
84
88
 
85
- </tr>
89
+ </tr>
90
+
91
+ <tr>
92
+
93
+ <td><div id="result"><div></td>
94
+
95
+ </tr>
86
96
 
87
97
  </table>
88
98
 
89
99
  <button type="submit" name="name" class="btn-square-little-rich">入力確認画面へ</button>
100
+
101
+ </div>
102
+
103
+ ```
104
+
105
+ CSS
106
+
107
+ ```
108
+
109
+ .add_user{
110
+
111
+ width:800px;
112
+
113
+ margin-top:30px;
114
+
115
+ margin-left:20%;
116
+
117
+ margin-bottom:50px;
118
+
119
+ padding-top:20px;
120
+
121
+ padding-bottom:20px;
122
+
123
+ background-color:#fff;
124
+
125
+ border-radius:10px;
126
+
127
+ text-align:center;
128
+
129
+ }
130
+
131
+
132
+
133
+ .add_user table{
134
+
135
+ margin-left:50px;
136
+
137
+ text-align:left;
138
+
139
+ }
140
+
141
+ .add_user input{
142
+
143
+ height: 25px;
144
+
145
+ margin-top:5px;
146
+
147
+ margin-bottom: 5px;
148
+
149
+ }
150
+
151
+
152
+
153
+ .add_user button{
154
+
155
+ margin-top:20px;
156
+
157
+ margin-bottom:20px;
158
+
159
+ }
160
+
161
+ ```
162
+
163
+ JavaScript
164
+
165
+ ```
166
+
167
+ var element = document.getElementById( "set" ) ;
168
+
169
+
170
+
171
+ if ( element.checked ) {
172
+
173
+ test.insertAdjacentHTML('result','職業<td><input type="text"></td>');
174
+
175
+ }
90
176
 
91
177
  ```
92
178