<!DOCTYPE html>
<html>
<head>
<title>JavaScript 表单控件</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input[type="text"] {
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>表单控件示例</h1>
<form id="myForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="提交">
</form>
<script>
document.getElementById('myForm').onsubmit = function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
alert('用户名: ' + username + ', 密码: ' + password);
};
</script>
</body>
</html>这个代码示例展示了如何使用HTML、CSS和JavaScript创建一个简单的登录表单，并在用户提交表单时使用JavaScript阻止默认的表单提交行为，并显示输入的用户名和密码。这是学习Web开发的一个基本示例，展示了如何处理和验证用户输入。