2023年6月20日发(作者：)
HTML表单是什么？HTML表单内容的详细介绍HTML 表单是⽤于搜集不同类型的⽤户输⼊的，表单是⼀个包含表单元素的区域；表单元素是允许⽤户在表单中（⽐如：⽂本域、下拉列表、单选框、复选框等等）输⼊信息的元素；表单使⽤表单标签（
以上代码表⽰这个表单的作⽤是⽤来提交这个页⾯的数据属性该属性的作⽤是告诉浏览器数据是以何种⽅式提交上去的，该属性下有两个选择:"get"和"post"，默认情况下，数据被提交的⽅ 式是get,表单域中输⼊的内容会添加在action指定的URL中，当表单提交后⽤户便获得⼀个明确的URL,由于这种⽅式下数据会添 加到URL中，所以好处是可以保存在收藏夹中和他⼈分享，直接访问主页的URL可以达到和填写注册后⼀样的效果，如有些时 候，⽤户将⾃⼰已经注册过的⼀些⽹站主页加⼊到⾃⼰的收藏夹，再次从收藏夹中打开时，会发现已经是登录的状态。⽽post 这种⽅式，数据将以HTTP头的形式发送，表单数据不再是URL中的⼀部分。⼆者区别是get在安全性上较差，所有表单域的值 直接呈现，⽽post除了可见的处理脚本程序以外，别的东西都可以隐藏，所以在实际运⽤时通常选择post这种处理⽅式属性作⽤是令提交上去的表单数据可以被处理这些数据的程序识别，⼤部分页⾯中放⼊的表单很可能不⽌⼀个，此时就需要给不同 的表单起不同的名字，以便程序识别1
3
4
<6上述部分代码说明通过表单me获取输⼊的length数值，代码中有不同的表单可以通过name来识别e属性该属性代表HTML表单数据的编码⽅式，分别有application/x-www-form-urlencoded（标准编码⽅式，提交的数据被编码为名称/ 值对）、multipart/form-data（表⽰数据编码为⼀条信息，为表单定义了MIME编码⽅式，创建了⼀个与传统不同的POST缓冲 区，页⾯上每个控件对应消息的⼀个部分）和text/plain（表⽰数据以纯⽂本的形式进⾏编码，这样在信息中将不包含控件或格 式字符）共三种⽅式属性⽬标显⽰⽅式，表⽰在何处打开⽬标URL，可以设置4种⽅式，_blank表⽰在新的页⾯中打开链接，_self表⽰在相同的窗⼝打开 页⾯，_parent表⽰在⽗级窗⼝打开页⾯，_top表⽰将页⾯载⼊到包含该链接的窗⼝，取代任何当前在窗⼝中的页⾯.12
这段代码表明该表单的动作是发送到邮箱depp59@，使⽤post的传输⽅式，使⽤text/plain编码⽅式的me表单，使之 在新页⾯中打开3.表单域：即⽤户输⼊数据的地⽅表单域可以分为input、textarea、select 3个对象，其中⼤部分表单通过input属性来实现，textarea和select创建⼀种控制类型⼆、input对象下的多种表单表现形式页⾯中⼤部分表单的形式都是通过输⼊标记input来实现的1
name=""2 type=""3 value=""4 size=""5 maxlength="">a.其中name表⽰输⼊数据的名字，其作⽤是为了让程序明⽩所提交的数据1
type="text"
name="length"> 这个输⼊的数据命名为length2 var length=;如果缺少了这样⼀个name属性，虽然在浏览器中的显⽰没有什么变化，但是后台程序后JavaScript程序就不能获得提交的数据属性表⽰所定义的是哪种类型的表单形式，该属性有九个可选值:text 单⾏的⽂本框password 将⽂本替换为"*"的⽂本框checkbox 只能做⼆选⼀的是或否选择radio 从多个选项中确定的⼀个⽂本框submit 确定命令⽂本框hidden 设定不可被浏览⽤户修改的数据image ⽤图⽚表⽰的确定符号file 设置⽂件上传button ⽤来配合客户端脚本:表⽰⽂本框字段的长度gth:表⽰可输⼊的最长的字符数量
:表⽰预先设置好的信息⽂本框的样式表单12
3
text样式表单4 910
141516代码中size定义了⽂本框的长度，⽽maxlength定义了这个⽂本框最多只能输⼊12个字符，如果超出了这个长度数据将不能输⼊，这两个text样式的数据定义了不同的名字这很关键，否则⼀旦需要被程序调⽤数据将⽆法辨认。rd输⼊密码的样式表单（可以将⽂本使⽤保密形式展⽰出来的⼀个功能，根据不同的浏览器会使⽤点状形态或星号符表⽰）12345
password样式表单 9ox复选框的表单样式（浏览器会在选择栏前⾯提供⼀个⼩⽅框如果选择⼩框中会添加⼩勾符号表⽰选中）12345678
checkbox样式表单 910
11
12
上⾯代码中添加了checked="checked"表⽰复选框默认值设置为checked,那么√符号会被默认添加单选按钮的样式表单（多选⼀表单）radio样式类似于选择题，在⼀组选项中选出唯⼀的⼀项，发送这列数据，其中给这组选项定义相同的名字，但是通过value属性 来加以区别，因此，这⾥必须给input对象设定value值，⽽且不同对象的value值不能相同，否则数据⽆法辨认12345
radio样式表单 910617
18提交数据的样式表单该属性创建⼀个按钮，该按钮的作⽤就是提交数据。当点击"提交"按钮时，数据会发送到指定的地⽅。其中通过value值可以修 改按钮上显⽰的内容。此外还有⼀个reset属性，这是⼀个复位按钮，当被点击时表单的内容会被重新设置，回到页⾯初始位置1234
submit样式表单5
11
12
隐藏域的样式表单hidden属性可以创建⼀个隐藏域，数据会被隐藏起来，⽤户⽆法对其进⾏操作（这些数据通常是⽤户不关⼼的但是必须被提交 的数据）样式的表单（可以看做图像替换按钮的技术，当图像被点击时，数据⼀并被提交⾄服务器）
使⽤src属性指定这张图像的路径，使⽤alt属性来添加⽂本注释，此时提交按钮被替换成⼀个⼩⼩的图像，当点击图像时，其作 ⽤就相当于submit按钮，但是当表单数据被提交的同时，⽤户所单击的图像的位置坐标（image.x=23 image.y=59）也会被发送表单中还有⼀种触发事件的button表单，它只是⼀个按钮，单个button按钮并不会提交任何数据，它的作⽤是⽤来调⽤前端页 ⾯，即客户端的脚本程序
上传⽂件的样式表单该表单允许⽤户上传⾃⼰的⽂件，例如⽤户上传⾃⼰的图像给服务器，⽤来改变⽤户在不同⽹站上的形象图⽚。需要注意的 是，当使⽤file样式的表单时，必须在
6三、textarea对象的表单该对象就像是input对象中的text表单，只不过是扩展过的text样式表单，可以通过⾏(rows)属性和列(cols)属性来编辑⽂本域的⼤ ⼩，常见于留⾔板、论坛中回帖时的⽂本框等123
textarea对象的表单4 1112
161718textarea属性标签必须要封闭，且⽣成页⾯时在⽂本框中会预先设置好⽂本“请⽂明⽤语”，但是⽤户不得不先删去预先的⽂本再 编辑⾃⼰的内容。当⽂本框中输⼊的内容超出预先设置的⾏数时会⾃动出现滚动条，如果没有超出⽂本框的范围则滚动条是灰 ⾊的四、select对象表单使⽤select将创建⼀个列表样式的表单，显⽰为出现⼀个下拉列表框，令⽤户可以⽅便的选择其中⼀个⽬录，通常在⼀些要求填 写地区、⽣⽇等信息中，设计者可以给使⽤者准备好选项，需要使⽤
,否则默认初始值应该是第⼀个出现的
![[elementui]el-table在同时使用固定列和合计行时横向滚动条被遮挡](/uploads/image/0784.jpg)
发布评论