怎么用web表单写用户名和密码框

在Web表单中，创建一个包含用户名和密码输入框的基本步骤如下：

1. **HTML结构**：
使用`<form>`元素来包裹整个表单，然后添加两个`<input>`元素分别用于用户名和密码输入。

<form id="login-form" action="/api/login" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>

  <br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <!-- 提交按钮 -->
  <button type="submit">登录</button>
</form>

- `type="text"`用于文本输入，`type="password"`隐藏用户输入的内容，防止明文显示。
- `name`属性用于提交表单时的字段名，服务器端可以根据此名称获取数据。
- `required`属性表示该输入项是必填的。

2. **CSS样式**（可选）：
为了美化表单，可以添加一些基本的CSS样式，比如改变字体、颜色、间距等。

#login-form {
  width: 300px;
  margin: auto;
}

label, input {
  display: block;
  padding: 8px 16px;
  margin-bottom: 16px;
}

3. **JavaScript事件监听**（可选）：
如果你需要在用户点击提交按钮时进行验证或处理，可以在`<form>`上添加`onSubmit`事件处理器：

<form id="login-form" action="/api/login" method="POST" onsubmit="event.preventDefault(); validateForm()">

...

<script>
function validateForm() {
  // 对用户名和密码进行验证，成功后再提交...
}
</script>

以上就是创建简单用户名和密码输入框的基础设置，实际项目中可能会根据需求添加更多的功能，比如验证码、记住我选项、提交后的提示等。