表单基础
form action/method、input 输入框、label 标签、submit 提交
HTML 表单基础
<form> 收集用户输入——登录、注册、搜索、评论,所有用户交互都离不开表单。
学完本章你将: 掌握 form action/method、input 输入框、label 标签、submit 提交。
基本表单
html
<form action="/submit" method="post">
<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>
标签说明
| 属性/标签 | 说明 |
|---|---|
| `action` | 提交到哪个 URL |
| `method` | get(URL 可见)/ post(隐藏) |
| ` | 关联输入框——点击文字聚焦输入框 |
| `for` + `id` | 用 `for` 和 `id` 关联 label 与 input |
| `required` | 必填项 |
| `placeholder` | 输入提示 |
常用属性
html
<!-- 占位提示 -->
<input type="text" placeholder="请输入用户名">
<!-- 必填 -->
<input type="email" required>
<!-- 默认值 -->
<input type="text" value="默认内容">
<!-- 只读 -->
<input type="text" value="不可修改" readonly>
<!-- 禁用 -->
<input type="text" value="不可交互" disabled>