我们已经准备好了,你呢？

获取网站建设报价

2026我们与您携手共赢，为您的企业形象保驾护航！

textarea html5_AI表格填写助手_LLM函数调用表单填写

我们一致认为，填写表格是一项既乏味又费时的活动。假若我们能够开发出一个能自动帮我们填写表格的人工智能助手，那么我们就能把宝贵的时间用于更加有意义的任务上了。

AI助手能够利用基于表单字段参数的函数来完成表单的填写任务。该函数执行后，会输出一个JSON格式的对象，其中表单字段充当键，相应的值则对应于需要填写的具体内容。

网络上充斥着各式各样的表格，每一份表格都拥有其特有的格式和命名规则。然而，直到近期，要打造一个能够适用于所有表格的通用助手几乎是不可能的任务。然而，随着大型语言模型（LLM）的问世，我们如今已经能够实现这一目标。

通常情况下，LLM 可以通过函数调用与 API 进行交流，然而，绝大多数的 Web 应用程序并未对外公布其 API，因此，与之进行互动的唯一途径是通过填写相应的表格。

本文的受众

本指南面向那些希望掌握大型语言模型（例如，或）中“函数调用”基本原理的软件开发者。

函数调用构成了 LLM 的核心功能，它使得我们能够打造出能够与外界进行交流的特定工具、智能代理或助手。在本篇文章中，我将向大家演示如何构建一个能够自动填写 HTML 表单的简易人工智能助手。

你将学到什么

通过定义函数签名的形式，我们可以激活 LLM 的函数调用功能。函数签名具体说明了函数所需的输入属性。

你将掌握构建动态生成JSON模式函数签名的技巧，这一技能将使AI助手能够与HTML表单进行有效的交互。

JSON格式是一种强有力的手段，用于定义及核实JSON对象的架构。为了教学之需，我们将完全依赖原生代码，不引入任何外部库。

1、原理及实现代码

表单的种类可能千差万别，然而，无论它们如何各异，都离不开输入字段、文本区域、复选框以及单选按钮等这些常见的构建模块。

我们将仅讨论脚本中最重要的部分。完整脚本可在此处找到。

首先，我们必须对表单中的各个元素及其类别进行辨别。不论这些元素的类别是何种，每个元素都必须具备一个名为“name”的属性。这个属性将在后续步骤中被用作构建 JSON 对象时的键值。

对于每一种元素类别，我们计划构建一个特定的函数；该函数的任务是输出构成该元素定义的 JSON 格式片段；这个 JSON 模式将详细记载元素的用途说明。

这对于语言学习模型（LLM）来说极为有益，它有助于掌握元素的应用或预估效果。描述性文本的信息将主要来源于元素的标签或占位符属性。

每个元素的 Json 模式属性至少包含：

随后，我们可以依据不同元素类别，增设更多辅助信息。比如，针对输入型元素，我们能够设定最小值、最大值、预设模式以及是否必填等属性。

在处理选择项，无论是单选还是复选框时，我们特别增设了涵盖所有潜在选项的枚举属性。需要注意的是，对于这些特定的复选框和单选元素，它们可能关联着多个与名称对应的值选项，因此需要采取特定的处理方法。

定义一个名为getInputSchema的函数，该函数接受一个参数input。
从输入对象中提取了名称、类型、最小值、最大值、模式以及是否必需等属性。
  if (!name) return null;
  const schema = {
    name,
若类型等于“数字”，则返回“数字”，否则返回“字符串”。
描述：获取输入元素的详细信息，通过getElementDescription函数实现。
  };
若存在最小值，则将模式中的minimum属性设置为min参数的数值类型。
若存在最大值，则将模式中的最大值属性设置为最大值的数值表示。
若条件成立，则将模式赋值给模式架构中的pattern属性。
返回包含格式化名称、模式以及是否必需信息的数组。
};
定义一个名为getSelectSchema的函数，该函数接受一个名为select的参数。
从select对象中提取出其属性name和required。
  if (!name) return null;
  return [
    formatName(name),
    {
      name,
      type: 'string',
描述：获取选择器的详细信息，即getElementDescription(select)。
枚举：通过将选择框的选项转换成数组，再对每个选项进行映射处理，最终获取其值。
    },
    required,
  ];
};
定义一个函数，名为getTextareaSchema，它接受一个名为textArea的参数。
从textArea对象中提取出其属性name和required。
  if (!name) return null;
  return [
    formatName(name),
名称为{name}，数据类型为字符串，其描述信息由文本区域中的内容{getElementDescription(textArea)}生成。
    required,
  ];
};
定义一个名为getCheckboxesSchema的函数，该函数接受一个包含两个元素的数组作为参数，第一个元素为name，第二个元素为values。
document.querySelector(`元素属性为name且值为${name}的元素`)。
判断是否为数组，需检查名称是否以“[]”结尾。
  const schema = {
    name,
类型：若为数组则返回 'array'，否则返回 'boolean'。
描述：获取元素描述，即getDescription(element)。
  };
  if (isArray) {
    schema.uniqueItems = true;
schema的items属性被设置为包含一个oneOf键，其值对应于values。
  }
返回格式化后的名称和模式，以列表形式呈现。
};
定义一个名为getRadioSchema的函数，该函数接收一个包含两个元素的数组作为参数，第一个元素为名称，第二个元素为值。
  const element = document.querySelector(`[name="${name}"]`);
  return [
    formatName(name),
    {
      name,
      type: 'string',
description: 获取element的描述信息，具体方法为getDescription(element)，
将values数组中的每个元素通过映射操作转换为对应的常量值。
    },
  ];
};

我们现在将聚焦于一个至关重要的函数，该函数将调用所有可用的函数，并为每一个表单构建相应的模式。

定义一个名为generateSchema的函数，该函数接受一个名为form的参数。
  const inputSelectors = [
    'input[type="text"]',
对具有属性值为“email”的输入元素进行限制。
选取具有“number”类型的输入元素，不得进行修改。
针对输入类型为“密码”的元素，实行限制。
    'input[type="tel"]',
    'input[type="url"]',
    'input[type="date"]',
    'input[type="time"]',
对具有属性“datetime-local”的输入元素进行限制。
选取具有“month”类型的输入元素，即指定为月份格式的输入框。
    'input[type="week"]',
针对具有特定属性“type”等于“color”的输入元素，予以禁止。
针对具有属性type等于range的input元素。
指定为搜索类型的输入元素，
  ].join(', ');
    .map(getInputSchema)
    .filter(Boolean);
const checkboxes = 通过名为“groupByName”的函数进行分组，以获取。
将表单中所有类型为“checkbox”的输入元素通过Array.from方法转换成数组。
  ).map(getCheckboxesSchema);
  const radios = groupByName(
将表单中所有类型为“radio”的输入元素通过Array.from方法转换成数组。
  ).map(getRadioSchema);
const selects = 通过将表单中获取到的所有