2024html常见表单控件及特点

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”>

　　密码域：password 　　语法：<input type=”password” name=”field_name”maxlength=max_value size=size_value >

　　单选按钮：radio 　　语法：<input type=”radio” name=”field_name” checked value=”value”>

　　复选框 ：checkbox 　　语法：<input type=”checkbox” name=”field_name” checked value=”value”>

　　普通按钮：button 　　语法：<input type=”button” name=”field_name” value=”button_text”>

　　提交按钮：submit 　　语法：<input type=”submit” name=”field_name” value=”submit_text”>

　　重置按钮：reset 　　语法：<input type=”reset” name=”field_name” value=”reset_text”>

　　图像域：image 　　语法：<input type=”image” name=”field_name” src=https://www.zhihu.com/question/”image_url”>

　　隐藏域：hidden 　　语法：<input type=”hidden” name=”field_name” value=”value”>

　　文件域：file 　　<input type=”file” name=”field_name”maxlength=max_value size=size_value >

　　文本域：<textarea> 　　语法：<textarea name=”textname”rows=rows_value cols=cols_value >content</textarea>

　　选择域：<select>和<option> 　　语法 ：

　　

　　“这里是云端源想IT，帮你轻松学IT” 　　嗨~ 今天的你过得还好吗？ 　　世界微尘里 　　吾宁爱与憎 　　- 2024.03.18 – 　　在互联网的世界中，表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物，表单都扮演着至关重要的角色。在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签。 　　HTML提供了一系列的表单标签，使得开发者能够轻松地创建出功能丰富的表单。今天我们就来深入探讨这些标签，了解它们的作用以及如何使用它们来构建一个有效的用户界面。 　　一、表单的组成 　　在HTML中，一个完整的表单通常由表单域、表单控件（表单素）和提示信息三个部分构成。

　　表单域 表单域是一个包含表单素的区域在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>标签的属性

　　下面举个例子来说明： 　　

　　3、<label>标签：关联说明 　　它与输入字段如文本框、单选按钮、复选框等关联起来，以改善网页的可用性和可访问性。<label>标签有两种常见的用法： 　　1）包裹方式： 　　在这种用法中，<label>标签直接包裹住关联的表单素。例如： 　　这样做的好处是用户标签文本时，关联的输入字段会自动焦点，从而提供更好的用户体验。 　　2）使用for属性关联： 　　在这种用法中，<label>标签通过for属性与目标表单素建立关联，for属性的值应与目标素的id属性相匹配。例如： 　　这样做的优势是单击标签时，相关的表单素会自动选中（焦点），从而提高可用性和可访问性。 　　4、<select>和<option>标签：下拉选择 　　在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。 　　注意点：<select>中至少包含一对<option>在<option>中定义selected=“selected”时，当前项即为默认选中项 　　

　　5、<textarea>标签：多行文本输入 　　当用户输入内容较多的情况下，我们可以用表单素标签替代文本框标签。允许用户输入多行文本。 　　<textarea name=”message” rows=”5″ cols=”30″> 　　默认文本</textarea>，rows和cols属性分别定义了文本区域的行数和列数。 　　代码示例： 　　

　　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定义任务的总量或最大值。 　　示例： 　　

　　在上面的示例中，我们创建了一个名为”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表单标签是构建动态网页的基石，它们使得用户能够与网站进行有效的交互。通过合理地使用这些标签，开发者可以创建出既美观又功能强大的表单，从而提升用户体验和网站的可用性。所以说，掌握这些标签的使用，对于前端开发者来说是至关重要的。

　　我们下期再见！ 　　END 　　文案编辑|云端学长 　　文案配图|云端学长 　　内容由：云端源想分享