用HTML,CSS,javaScript和TypeScript写一个简单的用户登入小程序

首先，我们可以使用 HTML 来构建登录表单的布局。这可以使用表单标签（`<form>`）和输入字段（`<input>`）来实现。

例如，以下是一个简单的登录表单的 HTML 示例：

<form>
  <label for="username">用户名</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码</label><br>
  <input type="password" id="password" name="password"><br><br>
  <button type="submit">登录</button>
</form> 

接下来，我们可以使用 CSS 来美化表单的外观。例如，我们可以调整字体大小和颜色，改变输入字段的背景颜色，并为按钮添加渐变效果。

然后，我们可以使用 JavaScript 或 TypeScript 来添加表单的动态行为。例如，我们可以在用户提交表单时进行验证，以确保输入的用户名和密码符合特定的格式要求。

下面是使用 JavaScript 的示例代码，它使用了 HTML 表单的 `onsubmit` 事件来检查用户名和密码的有效性：

const form = document.querySelector('form');
form.onsubmit = function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  const username = form.elements.username.value;
  const password = form.elements.password.value;

  if (username === 'admin' && password === '123456') {
    alert('登录成功');
  } else {
    alert('用户名或密码