forms 相关问题

使用单击事件监听器添加和删除类

我正在使用 CSS 制作叠加层，但需要一个 onclick 事件来更改类的内容。 我在登录表单下制作了一个注册表单。点击注册后，注册表格类

限制表单输入文本字段中允许的字符数

如何限制或限制用户在文本框中最多只能输入五个字符？ 下面是我的表单的输入字段： 如何限制或限制用户在文本框中最多只能输入五个字符？ 下面是我表单的一部分的输入字段： <input type="text" id="sessionNo" name="sessionNum" /> 是否使用了 maxSize 之类的东西？ 最大长度： 接受输入的最大字符数。这可以大于 SIZE 指定的值，在这种情况下，该字段 将适当滚动。默认无限制。 <input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" /> 但是，这可能会或可能不会受到您的处理程序的影响。您可能还需要使用或添加另一个处理程序函数来测试长度。 最简单的方法： maxlength="5" 所以..将此属性添加到您的控件中： <input type="text" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" maxlength="5" /> 让事情变得更简单 <input type="text" maxlength="3" /> 并使用警报来显示已使用最大字符数。 将以下内容添加到标题中： <script language="javascript" type="text/javascript"> function limitText(limitField, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } } </script> <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" onKeyUp="limitText(this,5);"" /> 根据 w3c，MAXLENGTH 属性的默认值是无限数量。因此，如果您没有指定最大值，用户可以多次剪切和粘贴圣经并将其粘贴在您的表单中。 即使您确实将 MAXLENGTH 指定为合理的数字，请确保在处理之前仔细检查服务器上提交的数据的长度（使用 php 或 asp 等），因为无论如何，绕过基本的 MAXLENGTH 限制都很容易 <input type="text" maxlength="5"> 输入中最多可以输入 5 个字母。 最大长度 接受输入的最大字符数。 maxlength 属性指定元素中允许的最大字符数。 Maxlength W3 学校 <form action="/action_page.php"> Username: <input type="text" name="usrname" maxlength="5"><br> <input type="submit" value="Submit"> </form> 我总是这样做： $(document).ready(function() { var maxChars = $("#sessionNum"); var max_length = maxChars.attr('maxlength'); if (max_length > 0) { maxChars.on('keyup', function(e) { length = new Number(maxChars.val().length); counter = max_length - length; $("#sessionNum_counter").text(counter); }); } }); 输入： <input name="sessionNum" id="sessionNum" maxlength="5" type="text"> Number of chars: <span id="sessionNum_counter">5</span> 您可以使用 <input type = "text" maxlength="9"> 或 <input type = "number" maxlength="9"> 表示数字 或者 <input type = "email" maxlength="9"> 用于电子邮件 验证将会显示 <input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10"> function maxLengthCheck(object) { if (object.value.length > object.maxLength) object.value = object.value.slice(0, object.maxLength) } 以下代码包含了一个计数... var count = 1; do { function count_down(obj, count){ let element = document.getElementById('count'+ count); element.innerHTML = 80 - obj.value.length; if(80 - obj.value.length < 5){ element.style.color = "firebrick"; }else{ element.style.color = "#333"; } } count++; } while (count < 20); .text-input { padding: 8px 16px; width: 50%; margin-bottom: 5px; margin-top: 10px; font-size: 20px; font-weight: 700; font-family: Raleway; border: 1px solid dodgerblue; } <p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80" class="text-input" name="bikeTitle" ></p> <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br> 晚了，但如果你想要一个完整的证明方法来限制数字或字母，这只是 javascript 并且还限制字符长度： 更改.slice后的第二个数字以设置字符数。这对我来说效果好多了maxlength。 只是数字： oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1').slice(0, 11); 只是字母： oninput="this.value=this.value.replace(/[^A-Za-z\s]/g,'').slice(0,20);" 完整示例： <input type="text" name="MobileNumber" id="MobileNumber" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1').slice(0, 11);"/> 不要为旧的解决方案而烦恼。 这就是您需要的： function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; // Allowing only numbers and specific keys (backspace, delete, arrow keys) if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } // Checking maximum character limit if (evt.target.value.length >= 11) { return false; } return true; } <input type="text" placeholder="ID Number" maxlength="11" onkeypress="return isNumberKey(event)"> 使用 maxlenght="字符数" <input type="text" id="sessionNo" name="sessionNum" maxlenght="7" /> <input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);" placeholder="MobileNumber"> <script> function checkNumber(key) { console.log(key); var inputNumber = document.querySelector("#MobileNumber").value; if(key.key >= 0 && key.key <= 9) { inputNumber += key.key; } else { key.preventDefault(); } } </script>

一个表单元素可以使用多个标签吗？

以下是 HTML5 中 label 元素的有效用法吗？ 一些文字 ... ....

我怎样才能有一个输入组？

我正在开发一个创建医院软件的项目。我需要创建一个带有矩形的表单来选择一个组，就像设计中一样。我不知道该怎么做。我怎样才能做到这一点，...

具有自定义名称的 Rails 表单未向控制器发送正确的参数

我在 Rails 中有一个调查表单，它循环遍历数据库表中的问题，并为每个问题生成一组单选按钮（答案选择）。 每组单选按钮应该...

如何使用下拉列表从数据库获取数据并显示到php mysql中的输入字段？

当我从下拉列表中选择年份之一时，如何在下面表单的输入字段中显示与年份相关的标题。 $formationSQL = "从 Formationacademique 中选择标题"; $资源...

Laravel 表单不发送 ID

ID输入 转储后 “_token”=>“

Grails Master-Detail 如何从表单进行管理

阅读有关使用 Grails 的主从结构非常令人困惑。 我认为用数据库术语理解它没有问题，但是对于 grails 中的模型来说...... 我最多希望使用一种形式来

使用 Yup 进行图像字段验证

目前，我有我的 React 应用程序，我正在其中处理表单。我有一个图像字段，应该允许上传 jpeg、png、gif 等图像文件。但由于某种原因，它不起作用。我试过了...

在 django 视图中将表单字段作为属性访问

根据 Django 教程，您应该使用 clean_data 字典访问表单字段。我想知道为什么我不能直接访问表单的属性？我的表格验证得很好，但是...

HTML/CSS/PHP 联系表单正在发送空白字段

我绝不是网页设计师/编码员，但我有足够的常识来让我的网站正常运行。只是一个简单的投资组合网站。 不过，我的联系表存在一些问题。很严格...

HTML 表单数据到 CSV - 无需服务器文件

我有这个 HTML 表单： 文件 姓名 ... 我有这个 HTML 表单： <!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <form> <label>Name</label> <input type="text" name="name" id="name"> <br> <label>Surname</label> <input type="text" name="name" id="name"> <br> <label>Birthday</label> <input type="date" name="date" id="date"> <button type="submit">Submit</button> </form> </body> </html> 我需要将插入的数据放入已存在的 CSV 文件中，并且该文件与 HTML 文件位于同一文件夹中。我需要在没有任何类型的服务器的情况下离线使用此文件：我不想安装任何额外的东西。有什么办法可以做到这一点吗？ 我考虑过使用 PHP，但这意味着使用某种本地服务器，我想让事情尽可能简单。 不幸的是，由于浏览器的安全限制，浏览器中运行的 JavaScript 无权读取或写入本地文件系统上的文件。这是一项安全措施，旨在防止恶意和危险的脚本访问您计算机上的敏感数据。 将数据附加到本地文件系统上的现有文件需要服务器端编程，例如 Node.js、Python 和 PHP。 作为替代方案，您可以将表单数据存储在浏览器的本地存储中，然后在需要时下载 CSV 文件。这样，每个表单提交的数据都会添加到本地存储中的现有数据中，当您准备使用数据时，只需下载一次 CSV 文件。 如果您需要在客户端持久存储和追加数据，您可能需要考虑使用 IndexedDB 等技术，它是一种低级 API，用于客户端存储大量结构化数据（包括文件/blob）。这可以处理更大量的数据并且具有更复杂的 API。

HTML 表单数据到 CSV，无需 PHP文件

所以，我有这个 HTML 表单： 文件 姓名... 所以，我有这个 HTML 表单： <!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <form> <label>Name</label> <input type="text" name="name" id="name"> <br> <label>Surname</label> <input type="text" name="name" id="name"> <br> <label>Birthday</label> <input type="date" name="date" id="date"> <button type="submit">Submit</button> </form> </body> </html> 我需要将插入的数据放入已经存在的 .csv 文件中，并且它与 html 文件位于同一文件夹中。我需要在没有任何类型的服务器的情况下离线使用此文件，我不想安装任何额外的东西，有什么方法可以做到这一点吗？ 我感谢任何形式的帮助，提前致谢 我考虑过使用 php，但这意味着使用某种本地服务器，我想让事情尽可能简单。 您可以使用 JavaScript 和 HTML5 的 Blob 对象来实现此目的，它允许您在客户端处理类似文件的对象。我发布了一些 HTML 代码，下面包含一些 JS 代码，以展示如何使用它来将输入数据保存到提交的 CSV 文件中。 <!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <form id="myForm"> <label>Name</label> <input type="text" name="name" id="name"> <br> <label>Surname</label> <input type="text" name="surname" id="surname"> <br> <label>Birthday</label> <input type="date" name="date" id="date"> <button type="submit">Submit</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); var name = document.getElementById('name').value; var surname = document.getElementById('surname').value; var date = document.getElementById('date').value; var csvContent = 'Name,Surname,Birthday\n' + name + ',' + surname + ',' + date; var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); if (navigator.msSaveBlob) { // IE 10+ navigator.msSaveBlob(blob, 'data.csv'); } else { var link = document.createElement("a"); if (link.download !== undefined) { // feature detection // Browsers that support HTML5 download attribute var url = URL.createObjectURL(blob); link.setAttribute("href", url); link.setAttribute("download", 'data.csv'); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } } }); </script> </body> </html> 在表单的提交事件中添加一个事件监听器，因此当提交表单时，它会阻止表单实际提交（这会刷新页面），而是获取输入字段的值，创建一个 CSV 格式的字符串这些值，然后从此字符串创建一个新的 Blob 对象。

数据库清理，即使我不想要它

作为我用 VB.NET 表单编写的程序的一部分，可以选择删除数据库的内容。此功能并不打算在最终版本中经常使用，我也不会...

渐进式形式的 Jquery 电子邮件验证

我正在使用渐进式表单，并在单击下一步按钮后寻求集成电子邮件验证的帮助。 目前，无论是否...

为什么按下提交按钮后会发生引导表单验证？

我有一个用bootstrap构建的表单，我发现表单验证不会在提交按钮的onclick事件之前运行，这有点无用。 请参阅此小提琴的示例 -...

Prisma Nextjs 在表单上提交数据之前获取未定义的会话

我正在为我的 postgres 数据库中的对象创建一个编辑功能。我也在我的会话中使用 nextauth。当我尝试提交表单数据（例如更新架构中定义的字段）时，我得到一个

我无法在TYPO3中创建表单

在TYPO3平台后端的表单部分，尝试创建新表单时会显示以下消息 没有可访问的表单存储文件夹 我已经做了调查，哈哈...

Laravel 表单验证

我想要做的是传递当前用户的ID来创建属于该用户的新链接。当我点击提交时，它不断显示错误消息：需要用户 ID 字段。我想可能有一个

Laravel 10.x 中通过 JavaScript 进行表单验证将不起作用

我使用 JavaScript 和 Bootstrap 5 类在 Laravel 10.x Blade 中进行了自定义验证。当我按下提交按钮时，存储操作不起作用，并且表单重新加载为空而没有 putt...