html
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
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!-- button to form-->
<button onclick="toggleForm()">Show Form</button>
<!--just a simple form -->
<form id="myForm">
<div class="form-input">
<label>Name:</label>
<input type="text">
</div>
<div class="form-input">
<label>Email:</label>
<input type="email">
</div>
<button type="submit">Submit</button>
</form>
<!-- JS role -->
<script>
function toggleForm() {
Enter to Rename, Shift+Enter to Preview
css
css
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
#myForm {
/* See, Used hide form by default */
display: none;
margin-top: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #ffa500;
color: 0000;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #ffa500;
}
.form-input {
margin: 10px 0;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run