用typescript+html5写一个登录页面
时间: 2023-05-24 22:03:14 浏览: 104
A:
以下是一个基本的 TypeScript 和 HTML5 登录页面示例代码:
```typescript
interface User {
username: string;
password: string;
}
const loginUser = (user: User) => {
// handle login logic
}
const form = document.querySelector('form') as HTMLFormElement;
const usernameInput = document.querySelector('#username') as HTMLInputElement;
const passwordInput = document.querySelector('#password') as HTMLInputElement;
form.addEventListener('submit', (event) => {
event.preventDefault();
const user: User = {
username: usernameInput.value,
password: passwordInput.value
};
loginUser(user);
});
```
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username</label>
<input type="text" id="username" required>
<label for="password">Password</label>
<input type="password" id="password" required>
<button type="submit">Log In</button>
</form>
</body>
</html>
```
以上代码演示了如何使用 TypeScript 编写表单事件处理程序以及如何将 HTML5 表单元素与 TypeScript 变量进行关联。您可以根据自己的需求进行调整和修改。