效果演示当您在浏览器中打开包含上述HTML和jQuery代码的页面时，点击“禁用按钮”按钮后，您会发现“点击我”按钮变灰且无法点击，实现了按钮置灰不可用的效果。...按钮置灰不可用的效果经常用于表单提交时，为了避免用户重复提交表单或者在表单提交过程中禁止其他操作。下面是一个示例代码，结合一个简单的表单提交场景，演示如何使用jQuery实现按钮置灰不可用的效果。...当用户点击提交按钮后，按钮将变灰且无法再次点击，确保了表单提交的一致性和有效性。您可以根据实际需求扩展和定制这段代码，提升用户体验和操作安全性。感谢阅读！...应用场景：按钮： 在表单提交或者某些操作需要一定时间处理时，可以将按钮设置为不可点状态，防止用户重复点击。输入框： 在展示信息或者只读模式下，可以将输入框设置为不可编辑状态。2....特点：当元素被禁用时，其外观通常会发生改变，呈现灰色，并无法触发与鼠标或键盘相关的事件。被禁用的元素不会在表单提交时被包含在表单数据中，也不会被包含在表单中的序列化字符串中。
代码中，我们首先监听了表单的submit事件，当表单被提交时执行回调函数。...jQuery的强大功能可以帮助我们简化前端开发中的表单提交操作，提高开发效率。表单提交通常会涉及到用户输入数据的验证、显示提交结果等功能。...同时，下方的resultMessage用来显示提交结果。使用jQuery提交表单并显示结果接下来，我们使用jQuery来实现表单提交功能，并根据提交结果来显示提示信息。...通过serialize()方法获取表单数据，并使用$.ajax()方法向服务器发送POST请求。当提交成功时，通过success回调函数来显示“注册成功”信息，并重置表单。...当提交失败时，通过error回调函数来显示“注册失败”提示信息。Form表单是HTML中用于收集用户输入信息并将其提交给服务器处理的重要元素。
右对齐标签 文字右对齐放置在输入域的左边 优点：明确的视觉关联，有利于用户进行填写，节约垂直空间。 缺点：左边标签参差不齐，给通览标签造成障碍，降低表单可读性；标签和输入域的弹性长度小。...可优化的点 当表单的必填项未填写完整时，提交或保存等主按钮一般为灰色状态，不可进行下一步操作，当完成必填信息的填写后，按钮变为高亮，可进行下一步操作（但表单项超过5个时则不建议使用主按钮禁用原则）。...弹框和页面如何选择 当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。...步骤引导 优势：任务流程清晰，明确当前用户目标，减少用户负担；及时的反馈校验，也避免填写完成后才发现中间的表单填写有误，降低用户的犯错成本。 劣势：无法通篇浏览表单内容，回溯成本高。...其他 关于“只读” 不可编辑的表单项建议使用“readonly",不要用”disable"。 私货 删除二次确认 弹框：需要说明删除信息和影响的情况。 弹框：批量选择，且弹框中不再有其他操作。
表单新特性和函数 2.1 placeholder 当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，...不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。...2.6 required required 属性规定必须在提交之前填写输入域（不能为空）。...属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。...目前任何表单元素都有八种可能的验证约束条件： 名称 用途 用法 valueMissing 确保控件中的值已填写 将required属性设为true， <input type="text"required
如此，注册表单的填写，似乎就成为他们不得不面对的噩梦。但这也不禁让设计师们开始思考，这些表单设计到底存在什么问题，才让用户如此这般抗拒？...自动保存输入信息 表单设计最实用的特性之一, 就是能够自动记住用户所填写的信息。避免当出现任何意外或报错时， 用户需重新逐一输入这些信息。这一特性，对于一些长表单设计，尤为重要。...表单设计尽量简洁或直接划分成更易查看的小模块 表单设计中尽量包含一些最基本的信息。如此，既能节省时间，又能有效避免不必要的错误。而且， 设计过程中，如若某条信息是自选选项， 则无需显示出来。...保证用户能够随时查看密码 如此，能够有效帮助用户在提交表单之前，随时检查输入的密码，避免密码错误。 ? 显示密码强度 绝佳的密码是很难被猜到。...提示用户：大写锁定已打开 如此，才能够有效避免，当用户遇到意外按到 Caps Lock按钮等常见问题时，能够及时更正，避免带来更加严重的问题。 ?
] 默认值："checkbox" 参数值： 值为 "checkbox" 时，显示 checkbox 选择框，setting.check.chkboxType 属性有效。...值为 "radio" 时，显示 radio 选择框， setting.check.radioType 属性有效。 请注意大小写，不要改变 ?...3、可以对节点进行拖拽，且支持多棵树之间进行拖拽。 4、支持拖拽时 复制/移动 节点。...必须在初始化 zTree 以后才可以使用此方法。...[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时有效] 此方法不会触发 beforeCheck / onCheck
比如一个网站的搜索引擎输入框，会将你输入的搜索关键词，显示在另一个DOM中，如果没做任何过滤和转义，那么输入的而已内容将被解析，从而导致XSS。...3.2 表单用户输入攻击 表单输入一般会制造存储型XSS，输入的内容存到了后端，然后再在其它的页面显示出来，显示的时候执行了相关的脚本逻辑，导致被攻击。...图3显示了存储型XSS经历4个环节： (1)前端表单制造内容------(2)提交内容------(3)存储内容-------(4)前端HTML显示存储的内容 其中第2步可以伪造，可以不通过前端页面发布内容...如下所示： //假设有以下表单页面a.html供用户填写个人信息 var domId=location.hash; var sTel=$(domId).val();//获取用户输入的电话号码 假如用户点击了非法的链接进入个人信息填写页面...3 预防 针对本案例，如何有效的避免这类XSS攻击呢。
这个方法将会清空所有的文本框，密码框，文本域里的值，去掉下拉列表所有被选中的项，让所有复选框和单选框里被选中的项不再选中。...： null success 当表单提交后执行的函数。...如果'success' 回调函数被指定，当server端返回对表单提交的响应后，这个方法就会被执行。...一般表单的数据都是按语义顺序序列化的，除非表单里有一个type="image"元素. 所以只有当表单里必须要求有严格顺序并且表单里有type="image"时才需要指定这个。...缺省值： null iframe 布尔值，用来指示表单是否需要提交到一个iframe里。 这个用在表单里有file域要上传文件时。更多信息请参考 代码示例 页面里的File Uploads 文档。
idField，且自由输入内容时触发（与背景警告色显示同步） 4、onShowDropdown：下拉菜单显示时触发 5、onHideDropdown：下拉菜单隐藏式触发 1.5 完整代码实现： 1...// 有效显示于列表中的字段，非有效字段都会过滤，默认全部有效。...', // ajax 搜索时显示的提示内容，当搜索时间较长时给出正在搜索的提示 hideOnSelect: false, // 鼠标从列表单击选择了值时，是否隐藏选择列表...为 true 时，有效字段大于一列则显示表头 showBtn: true, //是否显示下拉按钮 inputBgColor: '',...//输入框背景色，当与容器背景色不同时，可能需要该项的配置 inputWarnColor: 'rgba(255,0,0,.1)', //输入框内容不是下拉列表选择时的警告色 listStyle
有效范围。...单选框 Ext.form.field.Hidden 特殊的-隐藏字段 提交表单时传递到后台。...Ext.form.field.HtmlEditor 特殊的-文本编辑框 5.其中夹杂布局的类 Ext.form.FieldContainer 文本域容器 Ext.form.CheckboxGroup...field 关联 Ext.form.Labelable 一个混合类，允许组件被配置且装饰有标签和错误消息， 作为表单字段的通用组件。...提交之前调用了isValid方法确保每个表单字段都已经填写正确 3.最后调用submit方法，并传递了两个回调函数success和failure，在这两个回调函数的参数中，action.result
： true -----可以编辑元素的内容 false -----无法编辑元素的内容 inherit -----继承父元素的contenteditable属性 当为空字符串时，效果和true一致。...当一个元素的contenteditable状态为true（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。...1.10、autocomplete自动补全属性 当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。...1.11、novalidate不验证属性 novalidate 属性规定在提交表单时不应该验证 form 或 input 域。...3.2、电话 电话 在手机端，当点击电话时将实现拨打电话功能，进入拨打电话界面，自动填写好手机号码 ?
validateNonVisibleFields false 是否验证不可见的元素（如 type=”hidden” 的输入框，或多个输入控件在选项卡切换中） showPrompts true 是否显示提示信息...showOneMessage false 是否只显示一个提示信息 doNotShowAllErrosOnSubmit false 在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage...替代） addSuccessCssClassToField ” 验证通过时，给控件增加 class，当再次验证失败时，会去除。...addFailureCssClassToField ” 验证失败时，给控件增加 class，当再次验证通过时，会去除。...data-validation-placeholder 占位符 当位置为必填的控件验证时，值不能为空，也不能为占位符。
属性规定form或input域应该拥有自动完成功能，当input聚焦时，浏览器应该在域中显示填写的选项。...新增表单属性 H5中新增表单属性指 form 和 input 元素新增属性。 form新属性及意义 autocomplete ：规定form域自动完成功能。...novalidate ：规定提交表单时是否验证域。...- 重写表单 novalidate 属性 formtarget - 重写表单的 target 属性 min、max、step属性 三者用于对数字、日期类型输入框的限制和约束。...pattern属性：验证input域的模式。模式pattern是正则表达式，适用于text、search、url、email、password。 废除的标签 以下是一些在H5中已废弃的元素。
HTML5 中不支持 0x00 表单标签元素 form 标签 描述: 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,其包含 文本框、文本域(textarea)、按钮、下拉列表、单选框...Get 请求：用于没有敏感信息，且少量数据的提交，其表单数据在页面地址栏中是可见的，例如 action page.php?...有效，必须符合的模式 | | placeholder | text、search、url、tel、email、password、number | 当没有值设定时...type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域, 并且当用户单击确认按钮时，表单的内容会被传送到服务端。...比如站点搜索或 Google 搜索，search 域显示为常规的文本域。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 jQuery 事件方法语法 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。...在下面的实例中，当点击事件在某个 元素上触发时，隐藏当前的元素： $("p").click(function(){ $(this).hide(); }); 双击事件 当双击元素时，会发生...; }); 获得焦点事件 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...显示被隐藏的元素，并隐藏已显示的元素： //点击button隐藏p标签，再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出...提示： > 当进行链接时，代码行会变得很差。不过，jQuery语法很宽松；可以按照希望的格式来写，包含换行和缩进。
input 和 textarea 作用 使文本框不能输入，大概表单提交时，使用了disabled的元素的值不会被传递出去。...仅使文本框不能输入 外观 使文本框变灰 围观没有变化 的 “type” 属性的其他值 在上面我们提到了，type 属性除了 “text” 还可以填写 “password” 来让输入显示为黑点... 输入的内容超过一行的长度时，它会自动换行，而单行输入框则不会换行且其存在结束标签。...“cols”属性：表示文本域的可视宽度。 预输入信息可以在开始标签和结束标签之间填写 显示效果： 今天继续学HTML！... 当信息获取需要用户选取合适选项时，往往会出现选项众多的情况，这种情况下 单单 的单选框就显得有些不足了，因而我们需要选项菜单 以及选项 <option
，src填写的是路径，title填写的是提示文本） a 超链接（herf内容是跳转地址，当然此处有一个工作中常用的功能，那便是跳转网站新建一个标签，不用占本网站的位置，target=‘_blank’）...outline：none 去掉焦点框 form 表单 input 输入框（text是文本框，password是密码框，radio是单选框，checkbox是复选框，file是上传文件，textarea...，hidden溢出隐藏，auto溢出滚动（超出内容才加滚动条），scroll溢出滚动（无论内容是否溢出都会加滚动条）） display 转变格式（inline行内，inline-block行内块，block...hide 隐藏 toggle 触发 （在jQuery中，但凡是有两个功能的效果是相反的，肯定会有第三个功能，这个功能会集成那两个功能，这个功能的名称单词中肯定会有toggle） val （jQuery...（向下滑，向下展开，就显示了） slideToggle 一会显示一会隐藏 stop 停止（清除动画机制，在形成动画函数之前加stop） fadeIn 淡入 fadeOut 淡出 fadeToggle
Checkbox 创建一个复选框控件 Radio 创建一个单选按钮控件 Submit…… 7.要在表单中添加一个默认时为选中状态的复选框,应使用语句 ⑨。...表单标签(文本框、密码框、下拉列表) ?...框架 网页实景图 2.1 静态网页制作一个网站…… 制作下拉菜单步骤 3:选中数据有效性,弹出对话框,允许里选 则序列,源填写菜单项目,用英文逗号隔开,一定得是英文逗号才 行哦 制作下拉菜单步骤 4:确定就...表单域:包含了文本框、密码框、隐藏域、多 行文本框、复选框、单选框、下拉列表框和文 件上传框等。 ? 表单按钮:包括提交按钮、复位按钮和一般按 钮。 ?...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
当输入类型为radio或CheckBox使用此属性 文本框 用于输入单行文本信息将表单元素type设为text就可以了 密码框 ...设置了type属性后在密码框输入的字符全都是以黑色实心的来显示，从而实现对数据的处理 单选按钮 用户只能选中一个单选按钮在使用单选按钮时，需要一个显示的... 语法 <textarea name="textarea"cols="<em>显示</em>列数"row="<em>显示</em>行数" 文件域 文件域的作用用于实现文件选择将type设置为file url 用于输入URL地址这类的特殊文本的文本框提交表单时如果输入不是uil地址格式的文本，将不允许提交表单 2 required 属性用于规定文本框填写内容不能为空，否则不允许用户提交表单 3 pattern
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
