讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

给产品经理讲技术｜H5基础知识：表单_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:18:12
原创
1256人浏览过

【文章摘要】表单为你留了一个区域，这个区域等着你输入数据，这些数据讲被上传到后台服务器去，或者校验你的用户名密码，或者你的下单数据，总之，ta为你和网页的数据交互提供了一个友好的界面。

我承认又标题党了，表单这种基础知识从很早的Html版本就已经存在了，表单是用户输入和网页之间数据交互的一个界面，TA在Html中用

这个标签来标记。

但是谁叫Html规范升级到5.0呢，我之所以要解释下，是因为有的朋友并不知道为什么要叫H5，以前的Html其实应该称为Html4或者Html401，那个「5」并不是代表一种新技术，仅仅是一个Html的版本号而已。

不知道为啥要把form翻译为「表单」，不过叫着叫着，用着用着，看着看着也就熟悉了。

立即学习“前端免费学习笔记（深入）”；

看看taobao，你剁手前必须要经过的一个界面，这就是一个表单，表单为你留了一个区域，这个区域等着你输入数据，这些数据讲被上传到后台服务器去，或者校验你的用户名密码，或者你的下单数据，总之，TA为你和网页的数据交互提供了一个友好的界面。

社会主义正确的价值观是，不能只看脸，还要看心灵。看了脸，我才有欲望去了解你的心灵，你的心灵决定了我是否喜欢你的脸。

我们一起看看Html表单代码是如何书写的。

form：标识了这是一个表单

action：标识了所有的数据内容将向引号内的地址进行提交

method：标识了提交到网站的方法，一般为GET或POST

input：标识了一个输入框，type标识为类型为文本输入，user是其参数的名字，最后一个input类型为submit，标识一个按钮的类型为「提交」类型。

巧文书
巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

巧文书 281
查看详情 巧文书

最终的网页长成下面这个样子：

我们在输入框中输入“果果”，这两个字将会以GET方法提交到“http://www.***.com/index.html”地址，至于服务器取到这些值如何操作，是另一个问题了，那涉及到服务器端程序，这也是简单的前端与后台划分的一个标准。

此外，表单中还可以承载很多类型的元素，比如RadioBox和CheckBox，用来丰富用户输入类型和减少交互成本。

小总结：表单是你和服务器数据交互的用户界面，一切向服务器提交的数据都是由这几个简单的标签所组成。

欢迎添加微信公众号：给 产品经理 讲技术

本文由产品100为你推荐并呈现

文章来源：微信公众号：给产品经理讲技术（ID：pm_teacher）

文章作者：果果

友情提示：

若出处标注错误，请联系QQ：2977686517及时更正，感谢理解和支持！

少年关注我们的官方微博@产品100和微信订阅号：chanpin100ghsd，有惊喜哦！

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：关于table中，td的上下边框间距问题_html/css_WEB-ITnose 下一篇：Bootstrap 面包屑导航_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
手机如何流畅玩html_在手机端流畅运行HTML应用优化【优化】 手机端HTML应用流畅运行需五步优化：一、精简DOM结构并语义化标记；二、内联关键CSS、异步加载非核心样式；三、用WebWorkers处理密集JS逻辑；四、启用硬件加速与CSS渲染优化；五、配置viewport并启用ServiceWorker离线缓存。
2025-12-21 15:56:42
156
html5如何连接js_html5连接js文件方法步骤【文件引用】 JavaScript脚本未生效时，可通过五种方式引入：一、用script标签的src属性引入外部JS文件；二、内联书写JS代码；三、用type="module"引入ES6模块；四、动态创建script标签插入DOM；五、用import()函数动态导入模块。
2025-12-21 15:36:44
156
html5怎么设计表格_html5用table标签加tr/td/th设计行列式表格【设计】 HTML5中table元素是创建结构化数据展示的标准语义化方案，需用构建行列框架，添加scope/caption等属性增强可访问性，配合CSS控制样式与响应式布局，并通过rowspan/colspan处理复杂结构，最后用W3C验证确保合规。
2025-12-21 15:23:15
489
HTML如何赚钱的途径_前端开发变现方法解析【方案】 前端开发可通过五种方式变现：一、接定制网站项目，报价800–5000元；二、售HTML模板，单价29–199元；三、运营技术自媒体接广告，单条软广≥1200元；四、参与开源HTML维护获50–300美元bounty；五、开展HTML小班教学，定价199元/期。
2025-12-21 15:19:02
800
html5游戏如何破解_HTML5游戏破解思路与修改技巧【方法】 HTML5游戏修改需掌握五种技术路径：一、分析资源文件结构定位主逻辑脚本；二、动态调试劫持变量；三、篡改localStorage或IndexedDB数据；四、重写关键函数逻辑；五、拦截并伪造网络请求响应。
2025-12-21 15:15:35
635
HTML如何绘制树形结构_CSS图形实现教程【技巧】 可纯CSS实现树形结构：一、无序列表缩进法，用伪元素绘连接线；二、Flexbox布局，配合transform画斜线；三、CSSGrid精确定位节点；四、SVG内联+CSS动画绘制路径。
2025-12-21 15:03:08
824
html5如何文字换行_HTML5控制文本自动换行技巧【换行】 HTML5中文字不换行可采用五种方法：一、white-space属性控制空白处理；二、word-break强制断词；三、overflow-wrap智能换行；四、手动换行；五、结合width与text-align规范块级换行。
2025-12-21 15:01:02
216
html如何查看_查看HTML源代码与页面结构【结构】 要查看网页原始HTML源代码或实时DOM结构，可采用五种方法：一、浏览器“查看网页源代码”获取初始HTML；二、开发者工具“元素”面板检查动态DOM；三、地址栏执行javascript指令提取源码；四、用扩展导出结构化HTML快照；五、命令行curl抓取原始响应。
2025-12-21 14:48:38
209
linux怎么运行html文件_linux运行html文件方法【教程】 可通过图形界面直接右键打开HTML文件；2.使用终端命令如firefox或google-chrome调用浏览器；3.用Python启动http.server搭建本地服务器预览；4.设置文件权限并部署至Apache等Web服务器运行。
2025-12-21 14:45:09
718
怎么学习html5语言_学HTML5先记标签语法再练布局与API实践【学习】 掌握HTML5需按五步系统学习：一、熟记语义化标签（如、）及嵌套规则；二、手写静态页面强化盒模型与Flexbox布局；三、结合JavaScript调用localStorage、Canvas、Geolocation等API；四、用DevTools调试元素结构、控制台与存储状态；五、通过MDN实例反向解析标准文档。
2025-12-21 14:43:56
789
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部