action:交给谁
/signup 是当前网站根目录下的处理地址,不是本地文件夹。服务器需要提供处理程序;写出这个地址,不等于实现了报名功能。
form(表单)组织输入控件;input(输入)接收单行数据;button(按钮)触发操作。
<form action="/signup" method="post">
<label for="nickname">报名昵称</label>
<input id="nickname"
name="nickname" type="text">
<button type="submit">报名</button>
</form>
输入 laozhang → 提交字段 nickname=laozhang。左边是 name,右边是输入值。
知识点解释 · 在此区域滚动或拖动右侧滚动条
/signup 是当前网站根目录下的处理地址,不是本地文件夹。服务器需要提供处理程序;写出这个地址,不等于实现了报名功能。
post 表示使用 POST 请求,数据放在请求体中;省略 method 时默认 get。POST 本身不代表加密。
for="nickname" 对应输入框的 id="nickname"。点击“报名昵称”文字,也能让输入框获得焦点。
type="text" 指定单行文本框。id 用于识别元素,供 label 关联或 CSS、JavaScript 定位;name 是提交字段名。两者可以不同。
点击 type="submit" 的按钮,浏览器检查表单、收集数据并按 action 和 method 提交。基本提交流程不需要 JavaScript。
当前输入框允许空着提交。在 input 中增加 required 后,浏览器会阻止空值提交并提示填写;服务器仍需验证数据。
输入 laozhang 后,按表单默认编码提交的请求体包含 nickname=laozhang:等号左边来自 name,右边来自用户输入。去掉 name、只保留 id,输入框仍能填写,但不会提交这个昵称字段。
action 决定交到哪里,method 决定如何提交,name 决定数据叫什么,用户输入决定数据是什么。
预览能显示和操作控件,但限制真正提交;只有服务端确认接收,才可以显示“报名成功”。form不能嵌套。