html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<h3>Exampl CSS and HTML Form</h3>
<div>
<form id="form" action="#">
<label for="input">Input Some Text</label>
<input id="input" type="text" name="firstname" placeholder="Scrabble Word..">
<input type="submit" value="Submit" onclick="getText()">
</form>
</div>
</body>
</html>
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
28
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
//Event handler for the Submit Button
function getText() {
var input= document.getElementById('input').value;
alert("your input :"+input);
document.getElementById("form").reset();
return false ; //do not submit the form
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run