2024html常见表单控件及特点

2024html常见表单控件及特点HTML 与 form 表单相关的素有哪些?问题由来定义上传文件接口时,都会选择使用 multipart/form-data 方式,即要求表单的enctype属性为multipart/form-da

HTML 与 form 表单相关的素有哪些?   问题由来   定义上传文件接口时,都会选择使用 multipart/form-data 方式,即要求表单的enctype属性为multipart/form-data,文件以file类型提交,参数以key-value方式提交。最近在写个小工具,功能是把本地的swagger格式的接口文档一键上传到接口管理平台yapi和metersphere上,在看两个平台的导入接口文档openapi后发现都不是很规范。   先看下ypai导入接口文档接口的设计,yapi要求使用 application/x-www-form-urlencoded 方式导入文件(将文件内容作为一个key的value,本质上不是上传文件,文件比较大的时候这种方式性能很低)   再看下metersphere导入接口文档接口的设计,因为官方文档写的不够详细,文档中没有体现传参方式,所以通过抓包看。抓包后参数部分如下:   可以看出是使用了multipart/form-data方式,需要导入的文件也是以file类型提交的,但是参数部分竟然也要求使用file类型提交。正常的方式应该是这样的:   enctype属性   enctype规定了form表单发送到服务器的编码方式,有如下的三个值:application/x-www-form-urlencoded:在发送前编码所有字符,把表单数据转换成一个字串(key1=value1&key2=value2…),当请求方式为get时拼接到url后面并使用用?分割(例如http://test.com/xxx/detail?key1=value1&key2=value2);当请求方式为post时放到到body中。multipart/form-data:不对字符编码,如果表单中既有文本数据,又有文件等二进制数据,必须使用此值。浏览器(自己构造表单也需要这么做)会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition、分割符(boundary),另外文件类型的会加上Content-Type(默认为application/octet-stream)。text/plain:将空格转换为”+”号,但不对特殊字符编码,不建议使用。   小结   如果接口没有上传文件的需求,使用 application/x-www-form-urlencoded 即可。   如果接口有上传文件的需求,使用 multipart/form-data,文件以file类型提交,参数以key-value方式提交。   一、常见的表单素   form :表单,一般情况下,其他表单相关素都是它的后代素   input :单行文本输入框、单选框、复选框、按钮等素   textarea :多行文本框   select、option:下拉选择框   button :按钮   label :表单素的标题   二、input 素的使用   1、input 素有如下常见的属性:   type:input 的类型   text:文本输入框(明文输入)   password:文本输入框(密文输入)   radio:单选框   checkbox:复选框   button:按钮   reset:重置   submit:提交表单数据给服务器   file:文件上传   readonly:只读   disabled:禁用   checked:默认被选中,只有当 type 为 radio 或 checkbox 时可用。   autofocus:当页面加载时,自动聚焦   name:名字,在提交数据给服务器时,可用于区分数据类型。   value:取值   常见的布尔属性有 disabled、checked、readonly、multiple、autofocus、selected   布尔属性可以没有属性值,写上属性名就代表使用这个属性。如果要给布尔属性设值,值就是属性名本身。   2、表单按钮   表单可以实现按钮效果:   普通按钮(type=button):使用 value 属性设置按钮文字   重置按钮(type=reset):重置它所属 form 的所有表单素(包括 input、textarea、select)   提交按钮(type=submit):提交它所属 form 的表单数据给服务器(包括 input、textarea、select)   3、input 和 label 的关系   label 素一般跟 input 配合使用,用来表示 input 的标题   label 可以跟某个 input 绑定, label 就可以激活对应的 input 变成选中。   4、radio的使用   将 type 类型设置为 radio 变成单选框: name 值相同的 radio 才具备单选功能   5、checkbox 的使用   将 type 类型设置为 checkbox 变成多选框: 属于同一种类型的 checkbox,name 值要保持一致   三、textarea 的使用   textarea的常用属性: cols 列数 rows 行数   四、select和option的使用   option是select的子素,一个option代表一个选项。   select常用属性:multiple 可以多选;size 显示多少项   option常用属性 :selected 默认被选中   五、form常见的属性   form通常作为表单素的父素:   form可以将整个表单作为一个整体来进行操作;   比如对整个表单进行重置;   比如对整个表单的数据进行提交;   form常见的属性如下:   1、action   用于提交表单数据的请求URL   2、method   请求方法(get和post),默认是get   3、target   在什么地方打开URL(参考a素的target)   文字域 text   语法:<input type=”text” name=”field_name”maxlength=max_value size=size_value value=”field_value”>
2024html常见表单控件及特点
2024html常见表单控件及特点   密码域:password   语法:<input type=”password” name=”field_name”maxlength=max_value size=size_value >
2024html常见表单控件及特点
2024html常见表单控件及特点   单选按钮:radio   语法:<input type=”radio” name=”field_name” checked value=”value”>
2024html常见表单控件及特点
2024html常见表单控件及特点   复选框 :checkbox   语法:<input type=”checkbox” name=”field_name” checked value=”value”>
2024html常见表单控件及特点
2024html常见表单控件及特点   普通按钮:button   语法:<input type=”button” name=”field_name” value=”button_text”>
2024html常见表单控件及特点
2024html常见表单控件及特点   提交按钮:submit   语法:<input type=”submit” name=”field_name” value=”submit_text”>
2024html常见表单控件及特点
2024html常见表单控件及特点   重置按钮:reset   语法:<input type=”reset” name=”field_name” value=”reset_text”>
2024html常见表单控件及特点
2024html常见表单控件及特点   图像域:image   语法:<input type=”image” name=”field_name” src=https://www.zhihu.com/question/”image_url”>
2024html常见表单控件及特点
2024html常见表单控件及特点   隐藏域:hidden   语法:<input type=”hidden” name=”field_name” value=”value”>
2024html常见表单控件及特点
2024html常见表单控件及特点   文件域:file   <input type=”file” name=”field_name”maxlength=max_value size=size_value >
2024html常见表单控件及特点
2024html常见表单控件及特点   文本域:<textarea>   语法:<textarea name=”textname”rows=rows_value cols=cols_value >content</textarea>
2024html常见表单控件及特点
2024html常见表单控件及特点   选择域:<select>和<option>   语法 :
2024html常见表单控件及特点
2024html常见表单控件及特点   
2024html常见表单控件及特点
2024html常见表单控件及特点   “这里是云端源想IT,帮你轻松学IT”   嗨~ 今天的你过得还好吗?   世界微尘里   吾宁爱与憎   - 2024.03.18 –   在互联网的世界中,表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物,表单都扮演着至关重要的角色。在网页中,我们需要跟用户进行交互,收集用户资料,此时就需要用到表单标签。   HTML提供了一系列的表单标签,使得开发者能够轻松地创建出功能丰富的表单。今天我们就来深入探讨这些标签,了解它们的作用以及如何使用它们来构建一个有效的用户界面。   一、表单的组成   在HTML中,一个完整的表单通常由表单域、表单控件(表单素)和提示信息三个部分构成。
2024html常见表单控件及特点
2024html常见表单控件及特点   表单域 表单域是一个包含表单素的区域在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递<form>会把它范围内的表单素信息提交给服务器   表单控件   这些是用户与表单交云的各种素,如<input>(用于创建不同类型的输入字段)、<textarea>(用于多行文本输入)、<button>(用于提交表单或执行其他操作)、<select>和<option>(用于创建下拉列表)等。   提示信息   这些信息通常通过<label>标签提供,它为表单控件提供了描述性文本,有助于提高可访问性。<label>标签通常与<input>标签一起使用,并且可以通过for属性与<input>标签的id属性关联起来。   这三个部分共同构成了一个完整的HTML表单,使得用户可以输入数据,并通过提交按钮将这些数据发送到Web服务器进行处理。   二、表单素   在表单域中可以定义各种表单素,这些表单素就是允许用户在表单中输入或者选择的内容控件。下面就来介绍HTML中常用的表单素。   1、<form>标签:基础容器   作用:定义一个表单区域,用户可以在其中输入数据进行提交。   其中action属性指定了数据提交到的服务器端脚本地址,method属性定义了数据提交的方式(通常为GET或POST)。   2、<input>标签:数据输入   <input>标签是一个单标签,用于收集用户信息。允许用户输入文本、数字、密码等。   type属性决定了输入类型,name属性定义了数据的键名,placeholder属性提供了输入框内的提示文本。   <input>标签的属性
2024html常见表单控件及特点
2024html常见表单控件及特点   下面举个例子来说明:   
2024html常见表单控件及特点
2024html常见表单控件及特点   3、<label>标签:关联说明   它与输入字段如文本框、单选按钮、复选框等关联起来,以改善网页的可用性和可访问性。<label>标签有两种常见的用法:   1)包裹方式:   在这种用法中,<label>标签直接包裹住关联的表单素。例如:   这样做的好处是用户标签文本时,关联的输入字段会自动焦点,从而提供更好的用户体验。   2)使用for属性关联:   在这种用法中,<label>标签通过for属性与目标表单素建立关联,for属性的值应与目标素的id属性相匹配。例如:   这样做的优势是单击标签时,相关的表单素会自动选中(焦点),从而提高可用性和可访问性。   4、<select>和<option>标签:下拉选择   在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用标签控件定义下拉列表。   注意点:<select>中至少包含一对<option>在<option>中定义selected=“selected”时,当前项即为默认选中项   
2024html常见表单控件及特点
2024html常见表单控件及特点   5、<textarea>标签:多行文本输入   当用户输入内容较多的情况下,我们可以用表单素标签替代文本框标签。允许用户输入多行文本。   <textarea name=”message” rows=”5″ cols=”30″>   默认文本</textarea>,rows和cols属性分别定义了文本区域的行数和列数。   代码示例:   
2024html常见表单控件及特点
2024html常见表单控件及特点   6、<button>标签:按钮控件   创建一个可的按钮,通常用于提交或重置表单。它允许用户放置文本或其他内联素(如<i>、<b>、<strong>、<br>、<img>等),这使得它比普通的<input type=”button”>具有更丰富的内容和更强的功能。   type属性为submit时表示这是一个提交按钮。   7、<fieldset>和<legend>标签:分组和标题   通常用于在HTML表单中对相关素进行分组,并提供一个标题来描述这个组的内容。   <fieldset>标签:该标签用于在表单中创建一组相关的表单控件。它可以将表单素逻辑分组,并且通常在视觉上通过围绕这些素绘制一个边框来区分不同的组。这种分组有助于提高表单的可读性和易用性。   <legend>标签:它总是与<fieldset>标签一起使用。<legend>标签定义了<fieldset>素的标题,这个标题通常会出现在浏览器渲染的字段集的边框上方。<legend>标签使得用户更容易理解每个分组的目的和内容。   代码示例:   在这个示例中,我们使用了两个<fieldset>素来组织表单的不同部分。第一个<fieldset>包含姓名和邮箱字段,而第二个<fieldset>包含三个复选框,用于选择用户的兴趣爱好。每个<fieldset>都有一个<legend>素,用于提供标题。这样,用户在填写表单时可以更清晰地了解每个部分的内容。   8、<datalist>标签:预定义选项列表   <datalist>标签是HTML5中引入的一个新素,它允许开发者为输入字段提供预定义的选项列表。当用户在输入字段中输入时,浏览器会显示一个下拉菜单,其中包含与用户输入匹配的预定义选项。   使用<datalist>标签可以提供更好的用户体验,因为它可以帮助用户选择正确的选项,而不必手动输入整个选项。此外,<datalist>还可以与<input>素的list属性结合使用,以将预定义的选项列表与特定的输入字段关联起来。   下面是一个使用<datalist>标签的代码示例:   9、<output>标签:计算结果输出   <output>标签是HTML5中引入的一个新素,它用于显示计算结果或输出。该标签通常与JavaScript代码结合使用,通过将计算结果赋值给<output>素的value属性来显示结果。   <output>标签可以用于各种类型的计算和输出,例如数学运算、字符串处理、数组操作等。它可以与<input>素一起使用,以实时更新计算结果。   下面是一个使用<output>标签的示例:   想要快速入门前端开发吗?推荐一个前端开发基础课程,这个老师讲的特别好,零基础学习无压力,知识点结合代码,边学边练,可以免费试看试学,还有各种辅助工具和资料,非常适合新手!点这里前往学习哦!   10、<progress>标签:任务进度展示   <progress>标签是HTML5中用于表示任务完成进度的一个新素。它通过value属性和max属性来表示进度,其中value表示当前完成的值,而max定义任务的总量或最大值。   示例:   
2024html常见表单控件及特点
2024html常见表单控件及特点   在上面的示例中,我们创建了一个名为”fileDownload”的<progress>素,并设置了初始值为0,最大值为100。我们还添加了一个按钮,当用户该按钮时,会触发名为”startDownload”的JavaScript函数。这个函数模拟了一个文件下载过程,通过循环逐步增加<progress>素的value属性值,从而显示下载进度。   11、<meter>标签:度量衡指示器   <meter>标签在HTML中用于表示度量衡指示器,它定义了一个已知范围内的标量测量值或分数值,通常用于显示磁盘使用情况、查询结果的相关性等。例如:   在这个示例中,我们使用了两个<meter>标签来分别显示CPU和内存的使用率。value属性表示当前的测量值,min和max属性分别定义了测量范围的最小值和最大值。通过这些属性,<meter>标签能够清晰地显示出资源的使用情况。   需要注意的是,<meter>标签不应该用来表示进度条,对于进度条的表示,应该使用<progress>标签。   12、<details>和<summary>标签:详细信息展示   <details>和<summary>标签是HTML5中新增的两个素,用于创建可折叠的详细信息区域。   <details>标签定义了一个可以展开或折叠的容器,其中包含一些额外的信息。它通常与<summary>标签一起使用,<summary>标签定义了<details>素的标题,当用户该标题时,<details>素的内容会展开或折叠。   示例:   在这个示例中,我们使用了<details>标签来创建一个可折叠的容器,并在其中添加了一个<summary>标签作为标题。当用户这个标题时,容器的内容会展开或折叠。   总结:   HTML表单标签是构建动态网页的基石,它们使得用户能够与网站进行有效的交互。通过合理地使用这些标签,开发者可以创建出既美观又功能强大的表单,从而提升用户体验和网站的可用性。所以说,掌握这些标签的使用,对于前端开发者来说是至关重要的。
2024html常见表单控件及特点
2024html常见表单控件及特点   我们下期再见!   END   文案编辑|云端学长   文案配图|云端学长   内容由:云端源想分享   
2024html常见表单控件及特点
2024html常见表单控件及特点

2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/82079.html

(0)
上一篇 2024年 7月 29日 上午7:23
下一篇 2024年 7月 29日 上午7:26

相关推荐

关注微信