HTML零基础入门教学 第四期：表单标签与交互页面制作

 

本期学习目标

 

掌握HTML核心表单体系，熟练使用输入框、密码框、单选、多选、下拉菜单、提交按钮；

能够独立制作登录页、注册页、留言提交页；

理解表单数据提交原理，为后续对接后端、API数据交互打基础。

 

一、表单核心总标签：form

 

所有输入交互内容，

` 标签内部**。

 

常用基础属性

 

1.  action ：提交数据的地址（后端接口/处理页面）

2.  method ：提交方式，常用两种

 

–  get ：数据显示在网址上，简单查询用

–  post ：数据隐藏传输，登录、注册、提交内容必用

 

结构模板

 

 

 

二、input 万能输入标签（最常用）

 

input 是单标签，依靠  type  属性切换功能，是表单核心。

 

1. 普通文本输入框

 

用于：用户名、昵称、关键词搜索

 

 

 

3. 单选框 radio

 

只能选一个，性别选择、状态选择必备

 

重点：同一组单选必须 name 相同，才能实现互斥<input type=”radio” name=”女

 

 

 

5. 提交按钮 submit

 

点击后自动把 form 内部数据提交到 action 地址

 

 

 

7. 普通按钮 button

 

纯点击按钮，不会自动提交数据，多用于JS交互

 

 

 

–  <select> ：下拉外框`：每一个下拉选项

 

四、多行文本域 textarea

 

适合：长文本输入、留言、简介、内容备注

支持换行、多行输入

 

 

 

–  rows ：显示行数

–  cols ：显示宽度

 

五、label 优化点击体验

 

作用：点击文字也能选中输入框，提升页面体验

 

用法：绑定 id

<input type=”radio” name=”sex”男生

 

 

 

七、拓展实战：留言提交页面<h3</h3

昵称：

 

四星好评较差

八、本期知识点总结

 

1. 掌握  form  表单容器、get/post 提交区别

2. 精通 input 七大常用类型：文本、密码、单选、多选、按钮

3. 会用下拉菜单 select、多行文本域 textarea

4. 掌握 label 优化用户点击体验

5. 可独立制作：登录页、注册页、留言提交页

6. 初步掌握网页交互逻辑，为对接API、后端数据做铺垫

 

下期预告

 

第五期：HTML语义化标签 + 页面完整布局

学会让网页结构更规范、适配搜索引擎，制作完整首页结构框架