Web前端开发|什么是表单?_惠州前端培训学校
作者:alu发布时间:2022-03-21分类:前端开发专业浏览:735
什么是表单?今天我们跟着惠州北大青鸟老师一起来学习一下,希望对大家学习有帮助。
JS 最早是为表单而发明的,因此在没有JS之前,所有操作都需要提交后端验证,发现有误再重定向回原页面。JS最初发明出来,就是做表单验证的。
围绕表单,添加了各种语义化的元素,事件,属性.
比如说label,在某个radio外围上它,既能说明它是什么东西,也能扩大点击范围
比如说fieldset,它拥有默认的框框,方便圈定某个区域,表明这里面的东西是表单(form默认不可见,CSS此时还未发明)
比如说, onchange, oninput, onsubmit等事件,提交与用户交互的友好度
比如说,readOnly, disabled, checked, 为表单元素增加各种状态
我们可以给一个定义,何谓表单元素 ?就是能向后端提供数据的元素
而这些元素通常都放在form元素中,但如果将它们单个拎出来,这个不好判定,我们还可以通过其他”外观”特征获得,就是它们的tagName都是input, button, select, textarea。其实option元素也算是表单元素,但它的数据需要提交到select 元素 进行过滤,才能提交。
function isFormElement(el){
return /input|button|select|textarea/i.test(el.tagName)
}
在HTML5中,还添加类似datalist, output等元素,但它们只是辅助设施,没有直接给form提交数据的能力,因此不算是表单元素
form元素作为AJAX出现前唯一的提交通道,杭州达内web培训专家重点说下:
form拥有如下属性
accept:值MIME_type 规定通过文件上传来提交的文件的类型
accept-charset:值charset 服务器处理表单数据所接受的字符集
enctype:值MIME_type 规定表单数据在发送到服务器之前应该如何编码
method:值get/post 规定表单数据发送的方式,get方法和post方法
name:值name 规定表单的名称
target:值_blank/_parent/_self/_top 规定在何处打开action URL
其中有三个重要属性:
1、action指定该表单发送时接受操作的地址
2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。
3、enctype指定表单数据在发送的服务器之前如何编码,特别注意的是,当含有上传域时要设置编码方式为enctype=”multipart/form-data”,否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候,也有个选项是以二进制方式上传。
表单里面的元素布置有一定的要求,如form里面一定放着fieldset,fielset里面包着legend,label包着说明文字与input,textearea…… label里要指定tabindex,就是tab切换的顺序。
<form>
<fieldset>
<legend>health information</legend>
<label tabindex="1">height: <input type="text"></label>
<label tabindex="2">weight: <input type="text"></label>
</fieldset>
</form>
不同的表单拥有不同的外形,它们的用法也各有不同,序列化数据也不一样。
想学前端,联系在线客服,或者可以来惠州北大青鸟新方舟校区详细了解。
标签:惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟
- 前端开发专业排行
- 标签列表
-
- Java (3694)
- 北大青鸟 (3713)
- 软件开发 (3613)
- JAVA (3413)
- UI设计入门 (2093)
- 惠州北大青鸟 (4375)
- 惠州IT培训 (2558)
- UI设计培训 (2090)
- 惠州UI设计培训 (2095)
- 惠州UI设计培训学校 (2090)
- 惠州计算机软件培训 (6260)
- 惠州计算件软件开发 (6260)
- 惠州计算机软件基础 (6261)
- 惠州计算机JAVA培训 (3574)
- 惠州计算机Java软件开发 (3620)
- 惠州计算机JAVA软件开发 (4645)
- 惠州计算机JAVA软件开发学校 (3338)
- 惠州计算机Java软件开发培训 (3338)
- 北大青鸟IT计算机学校 (5048)
- 北大青鸟IT软件学校 (5062)
- 北大青鸟IT学校 (5059)
- 惠州计算机UI设计软件开发 (2088)
- UI设计基础教程 (2088)
- UI设计是什么 (2088)
- UI设计教程 (2088)
- 网站分类
-
- 计算机教程
- 计算机入门
- 职业学校
- 新闻动态
- 专业课程
- 热门技术
- SEO
- 培训教程
- windows
- linux教程
- 系统集成
- 网站开发
- Html5
- 办公软件
- 师资力量
- 热点问答
- 联系我们
- 计算机学校
- 惠州计算机学校
- 河源计算机学校
- 广州计算机学校
- 深圳计算机学校
- 湛江计算机学校
- 佛山计算机学校
- IT计算机培训信息
- 设计专业
- UI
- 影视特效
- 游戏动漫设计
- Photoshop
- AI设计
- 软件教程
- Java技术
- C语言/C++语言培训
- C#
- Python技术
- PHP
- 数据库
- SQL Server
- 网络教程
- 网络安全
- 网络营销
- 软件专业
- 大数据专业
- 前端开发专业
- 软件测试专业
- Python专业
- 软件实施
- 珠海计算机学校
- 初中生学什么好
- 计算机认证
- 文章归档
-
- 2024年11月 (14)
- 2024年10月 (32)
- 2024年9月 (29)
- 2024年8月 (68)
- 2024年7月 (59)
- 2024年6月 (43)
- 2024年5月 (48)
- 2024年4月 (80)
- 2024年3月 (65)
- 2024年2月 (54)
- 2024年1月 (25)
- 2023年12月 (12)
- 2023年11月 (73)
- 2023年10月 (134)
- 2023年9月 (34)
- 2023年8月 (3)
- 2023年7月 (3)
- 2023年6月 (12)
- 2023年5月 (30)
- 2023年4月 (72)
- 2023年3月 (11)
- 2023年2月 (34)
- 2023年1月 (37)
- 2022年12月 (78)
- 2022年11月 (359)
- 2022年6月 (1193)
- 2022年5月 (570)
- 2022年4月 (1567)
- 2022年3月 (982)
- 2022年2月 (54)
- 2022年1月 (182)
- 2021年9月 (308)
- 2021年8月 (1704)
- 2021年7月 (2423)
- 2021年6月 (1806)
- 2021年5月 (1569)
- 2021年4月 (1380)
- 2021年3月 (1255)
- 2021年2月 (709)
- 2021年1月 (1521)
- 2020年12月 (3626)
- 2020年11月 (1646)
- 2020年10月 (1046)
- 2020年9月 (592)
- 最近发表
-
- 清远信息:2024年广清杯清远南粤家政技能大赛举行决赛|||计算机培训机构
- 汕尾信息:陈良川带队到汕尾技师学院调研|||计算机职业技能培训班
- 东莞信息:凤岗凤岗镇组织召开社保参保缴费及劳动用工政策宣讲会|||计算机软件培训学校
- 阳江信息:2024年度注册城乡规划师职业资格考试的合格标准是怎样的?|||计算机软件培训学校
- 阳江信息:职业技能提升补贴对象有哪些?|||大学生计算机培训学校
- 清远信息:清远市首家社保服务合作网点在清城区举办启动仪式|||计算机职业技能培训班
- 汕头信息:招聘658名中高端人才!2024年汕头市引进中高端人才专场招聘会举行|||北大青鸟计算机培训中心
- 东莞信息:广东省社保智能经办现场会在东莞召开|||大学生计算机培训学校
- 东莞信息:东坑镇举办2024年重点群体系列招聘活动|||计算机职业技能培训班
- 东莞信息:万江万江街道成功举办第四届粤菜师傅烹饪技能竞赛|||广州计算机编程培训