-- 提交按钮 -- type属性设置不同的值,即可得到不同的表单控件 name属性用于指定控件的名称,用以区分表单中多个相同的控件 value属性用于设置表单控件的默认值 //input控件 <!...option是定义下拉列表中具体选项的标记 selected属性用于设置默认选中项 4.准备表单—label标记 在编写表单控件时,为了提供更好的用户体验,经常将input控件与label标记联合使用...----label标签内显示的内容 'attr' = [], // 属性数组----表单元素的属性,如type 'option' = [], // 选项数组----单选框或复选框中的每个选项...1.表单的自动生成——读取$elements数组 实现思路 为了方便处理用户提交的数据,将$elements中的每个表单项与指定的数组进行合并,使得每个表单项都含有键为tag、text、attr、option...attr, items = ‘’)用于完成表单元素属性的拼接 $attr数组中元素的键为属性名称,元素的值为属性的值 通过遍历完成属性与$items的拼接并返回,如type=“radio” name=“
的群组,中至少输入或选择一项 condRequired[string] validate[condRequired[ids]] 当 ids 的某个控件不为空时,那么该控件也为必填项。...date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now equals[string] validate[equals[id]] 当前控件的值需与控件...) + “&fieldValue=” + field.val() 额外参数:extraData 可以设置为字符串或对象,会在参数结尾追加 “&extraData” 返回数据格式:数组 返回数据内容:[String...validateNonVisibleFields false 是否验证不可见的元素(如 type=”hidden” 的输入框,或多个输入控件在选项卡切换中) showPrompts true 是否显示提示信息...[] isOverflown false 表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll) PS:设置为 ture 后,提示内容的插入位置将更改为在验证的控件之前插入
模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令和技术在Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...这个表格中的三个字段中的两个是必需的。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意的风格显示验证错误: ?...使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...请注意,您还为标记添加了一个ngControl指令,并将其设置为“name”,这对于英雄的名字是有意义的。 任何唯一值将会这样做,但使用描述性名称是有帮助的。...您可以通过根据名称控制的状态设置的隐藏属性来控制错误消息的可见性。
-- jquery.validationEngine-zh_CN.js 为配置文件,可根据需求自行调整或增加,也可以更换为其他语言配置文件 --> 给表单加上 ID ... 给控件添加验证类型 <!...PS:如果希望只在表单提交时验证,可以设置为空。...validateNonVisibleFields false 是否验证不可见的元素(如 type=”hidden” 的输入框,或多个输入控件在选项卡切换中) showPrompts true 是否显示提示信息...’).validationEngine(‘detach’); 移除表单验证 validate alert($(‘#id’).validationEngine(‘validate’)); 验证控件或表单
字段的先后顺序如何确定?就用这个数组。 columnsNumber 表单控件的列数,表单只能单列?太单调,支持多列才是王道。...、"" (不分栏) cols: Array<{ // 栏目信息 title: string, // 栏目名称 colIds: Array // 栏目里有哪些控件ID...: string } /** * 表单的验证规则集合 */ export interface IRuleMeta { /** * 控件的ID作为key, 一个控件,可以有多条验证规则.../** * 显示控件的联动设置 */ export interface ILinkageMeta { /** * 控件的ID作为key,每个控件值对应一个数组,数组里面是需要显示的控件ID...*/ [key: string | number]: { /** * 控件的值作为key,后面的数组里存放需要显示的控件ID */ [id: string | number
html的name和id可以类比身份证的姓名和身份证编号, 编号id具有唯一性,一个id只出现一次。 名称name具备可重复性,可以多次出现。...与表单相关的元素也可以赋ID值, 但为这些元素赋ID值的时候引用这些元素的方法就要变一下了,具体的如下: 赋name时引用元素的方式: document.formName.inputName或document.frames...但是name主要是提交表单用的 ,而class是设置标签的类,用于指定元素属于何种样式的类,主要用来设置css样式的。但两种都可以用来识别css,推荐除了表单外都用class。...用途6: 某些特定元素的属性,如attribute,meta和param。例如为Object定义参数或Meta中。...当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在DHTML对象树中,我们可 以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组
表单的目的是为了跟用户进行交互,收集用户资料 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。...表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。...input 控件(重点) 标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,标签还可以定义很多其他的属性 ?...创建表单的基本语法格式如下: 各种表单控件 常用属性: Action 在表单收集到信息后...method 用于设置表单数据的提交方式,其取值为get或post。 name 用于指定表单的名称,以区分同一个页面中的多个表单。 注意: 每个表单都应该有自己表单域。
表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。...input 控件(重点) 在上面的语法中,标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。...创建表单的基本语法格式如下: 各种表单控件 常用属性: Action 在表单收集到信息后...method 用于设置表单数据的提交方式,其取值为get或post。 name 用于指定表单的名称,以区分同一个页面中的多个表单。 注意: 每个表单都应该有自己表单域。...url为音频或视频文件及其路径,可以是相对路径或绝对路径。
PS:如果希望只在表单提交时验证,可以设置为空。...bindMethod “bind” 验证事件的绑定方式,可设置为:bind, live PS:设置 live 似乎绑定事件无效,但是表单提交时能验证,建议不修改。...scroll) PS:设置为 ture 后,提示内容的插入位置将更改为在验证的控件之前插入; 此时需要在控件外层再套一个元素,并设置 class=”inputContainer” overflownDIV...“” 设置了溢出滚动的元素,格式为 jQuery 的选择器。....validationEngine(“hidePrompt”); 隐藏该元素的提示内容 hide $(“#form_id”).validationEngine(“hide”); 关闭表单中的提示 hideAll
PS:如果希望只在表单提交时验证,可以设置为空。...bindMethod “bind” 验证事件的绑定方式,可设置为:bind, live PS:设置 live 似乎绑定事件无效,但是表单提交时能验证,建议不修改。...scroll) PS:设置为 ture 后,提示内容的插入位置将更改为在验证的控件之前插入; 此时需要在控件外层再套一个元素,并设置 class=”inputContainer” overflownDIV...“” 设置了溢出滚动的元素,格式为 jQuery 的选择器。...-- ID 必须设置在 Form 标签中,否则无效 --> 给控件加上 ID 及 设置验证类型 <input id="test_1" name="test_1" type="text" class="validate
此方法的参数一为元素数组,可在一行中添加多个元素 {// 元素一 显示文本内容为 “机器号” element: '机器号', color...: '#fff' } ], [0.1, 0.1]);// 参数二为每个元素宽度信息数组,宽度值大于1代表固定绝对值,小于等于1代表相对值,也可为80+0.3的组合 fp.addRow...([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 {// 元素一 显示文本内容为 “机器号” element: '抓棉机动画',...fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 {// 元素一 显示文本内容为“小车行走速度” element...} ], [0.1, 0.1]); fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 { element
,默认为”get”(也可以是post) name:控件名称;value:input控件默认文本值;size:input控件在页面中的显示宽度...在最新的html5中,有一些表单的新增属性,多用于js,如 datalist : 定义填写一个input时,提示几个option用于提示。可通过input的list特性与此元素作关联。...3. form:一个字符串(为关联的form表单的id),用于表明该input属于哪个form表单(作用类似list)。...4. formmethod:表明使用GET还是POST,能覆盖form表单的method。仅在type为image或submit,且上面的form特性被设置的情况下才能使用。...如在登陆页面不想显示上一个登陆的用户名等时,可设置为off。
类型 作用 on 该字段无需保护,值可以被保存和恢复 off 该字段需要保护,值不可以保存 unspecified 包含的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on 如...2.3 autofocus 页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。...那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。...目前任何表单元素都有八种可能的验证约束条件: 名称 用途 用法 valueMissing 确保控件中的值已填写 将required属性设为true, <input type="text"required...处理应用代码明确设置能计算产生错误 例如验证两次输入的密码是否一致,等会DEMO细说 下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看: 源代码: <form name
HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客户端脚本里用...例如为Object定义参数或Meta中<META NAME = "Author" CONTENT = "Dave...与<em>表单</em>相关<em>的</em>元素也可以赋<em>ID</em>值, 但<em>为</em>这些元素赋<em>ID</em>值<em>的</em>时候引用这些元素<em>的</em>方法就要变一下了,具体的如下: 赋name时,引用元素<em>的</em>方式: document.formName.inputName <em>或</em>...打个比较恰当<em>的</em>比方就是剧本:一个class可以定义剧本<em>中</em><em>每个</em>人物<em>的</em>故事线,你可以通过cSS,javascript等来使用这个类。...而这时重复<em>的</em><em>id</em>会在引用时自动变成一个<em>数组</em>,<em>id</em>重复<em>的</em>元素按Render<em>的</em>顺序依次存在于<em>数组</em><em>中</em>,<em>数组</em><em>的</em>脚下标依次表示<em>id</em>出现<em>的</em>先后顺序。
属性名称与标记名称之间用空格隔开,如或 (3). 属性值与属性间 用 "=" 来连接,属性值要用 " "引起来,如 (4)....表单元素,用于定义表单的提交信息如:提交地址,提交方式… … ②. 表单控件,能够与用户交互的界面元素 如:文本框,密码框… (2). 表单提交后的处理(服务器端) (3)....④. name 定义表单的名称 ⑤. id 定义表达独一无二的标 (4). 注意事项 ①....占位符,一般给予用户提示 ②. type="radio" 单选按钮type="checkbox" 复选框 A. name 定义控件的名称,一组单选或复选框名称必须相同 B. value 控件的值 C.... 关联文本与表单控件,关联后,点击文本如同点击表单控件 (1). for 表示与该元素关联的控件的 id 值 <input type="radio" value="0"
fp.addRow([// 向表单中添加一行 此方法的参数一为元素数组,可在一行中添加多个元素 {// 元素一 显示文本内容为 “机器号”...: 'Machine', color: '#fff' } ], [0.1, 0.1]);// 参数二为每个元素宽度信息数组,宽度值大于1代表固定绝对值,小于等于...1代表相对值,也可为80+0.3的组合 fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 {// 元素一 显示文本内容为 “机器号...fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 {// 元素一 显示文本内容为“小车行走速度” element...} ], [0.1, 0.1]); fp.addRow([// 向表单中添加一行 此方法的参数为一个数组,可在一行中添加多个元素 { element
似乎应该可以用 interface ,但是看官方文档,好像思考角度不是这样的。 应对方式 先定义组件需要哪些属性的 interface: /** * 表单子控件的共用属性。..., /** * 表单的 model,含义多个属性,any */ model: IPropsValidation, /** * 字段名称,string */ colName...: IPropsValidation, } ItemProps:目的是约束一个组件需要设置哪些属性,限制属性名称。.../types/type' /** * 基础控件的共用属性,即表单子控件的基础属性 */ const itemProps: ItemProps = { /** * 字段ID、控件ID...*/ model: { type: Object }, /** * 字段名称,控件使用 model 的哪个属性,多个字段名称用 “_” 分割 */ colName:
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。...**表单控件: ** 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。...2.1 input 控件(重点) 语法: input 输入的意思 标签为单标签 type属性设置不同的属性值用来指定不同的控件类型...用来指定不同的控件类型 value 表单值 表单里面默认显示的文本 name 表单名字 页面中的表单很多,name主要作用就是用于区别不同的表单。...method get/post 用于设置表单数据的提交方式,其取值为get或post。 name 名称 用于指定表单的名称,以区分同一个页面中的多个表单。 注意: 每个表单都应该有自己表单域。
如:var id = document.getElementById("hid"); //获取id值为hid的标签对象 document.getElementsByTagName...[i]); } 这种语句可以遍历对象中的所有属性或数组中的所有元素。... obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。 ...obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。 obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。 ...textContent设置或返回节点及其后代的文本内容。 b.
2、表单的组成 1、表单元素- 2、表单中的控件 只有放在 中的表单控件才能被提交给服务器...用于提供可视化的元素与用户进行数据交互 表单控件只有放在表单中,才能被提交给服务器,并且表单只能提交表单控件的数据。...值,去创建不同的输入类型的空间 2、name 定义控件的名称,在提交给服务器时使用(必须设置)...或 一组的复选框,名称必须相同 2、checked 设置默认被选中...ID值 2、fieldset 和 legend 元素 作用:为控件分组,提供分组的显示效果
领取专属 10元无门槛券
手把手带您无忧上云