怎样在html表单中添加不需要用户输入的数据

怎样在html表单中添加不需要用户输入的数据,第1张

一般的方法是在表单中加入hidden

<form>

用户提填写:<input type="text" />

<input type="hidden" value="生成的数据,页面不可见" name="data" id="data" />

</form>

或使用readonly

<form>

用户提填写:<input type="text" />

生成数据:<input type="text" value="生成的数据,页面上可见,但用户不可修改" readonly name="data" id="data" />

</form>

两种你试一下就知道了

在Rushcrm系统中,我们为“客户”、“合同”等标准功能模块预设了通用性字段(即符合大多数企业需求的,业务逻辑不可或缺的字段)。但通常这些字段可能不足以满足企业数据信息的完整需求,因此多数用户都希望在原有基础上增加或调整字段:比如为“客户”增加性别、修改符合企业特色的客户类型等——这就是自定义字段。 Rushcrm为用户提供了十分便捷的字段定义功能,您可以自定义字段的格式、布局、排序,从而使表单信息和企业实际业务需求一致。

字段类型

在填写一张表单数据时,通常会涉及到录入文本、数值和日期等不同的数据,而字段类型就决定了数据的输入内容和输入形式——或限制内容长度、或限制内容类型,或直接输入,或只能选择。 Rushcrm系统自定义字段支持以下类型

--文本:可输入任意文本内容,最大长度255

--数字:只能输入数字类型值,可以设置保留小数位的长度,最大字段长度62

--百分比:只能输入数字类型值,字段标签自带“%”符号

--货币:只能输入数字类型值,字段标签自带“¥”符号(可识别外币)

--日期:可d出日期选框,也可手动输入,日期格式"yyyy-mm-dd"

--Email:用于录入邮箱地址可自动识别邮箱格式是否正确

--电话:输入电话号码,用于配合系统短信功能

--下拉框:可d出下拉单选框,支持选项搜索

--网址:输入网址后可自带链接

--复选框:点击可以打勾,勾选后显示“是”,未勾选显示“否”

--文本区域:支持多行文本内容输入

--多选框:可d出支持多选的下拉框

--时间:可d出时间选框,时间格式"hh:mm:ss"

--丰富文本区域:丰富文本区域则是可以进行图片插入、超链接插入、html格式编辑的富文本格式的文本编辑框

--高级特殊字段 归属于:主要用于调取其他表单数据,使其和当前表单产生关联关系

--时期和时间:和时间字段一样,可d出选框,格式"yy-mm-dd hh:mm:ss"

--照片(多图):可上传图片,最多可上传6张图片,一般图片格式都可以

--地址(省市区):创建后会同时生成三个下拉框字段,分别代表省、市、区,自带国家统计局城市划分选项

--签名:PC端可通过鼠标输入手写签名,移动端可直接手写输入

--仓库类型:一种下拉框,主要用于库存管理中可以主动指定仓库进行出入库 *** 作,包含用户设置的所有仓库

--用户:该字段可下拉展示出目前系统中所有启用状态下的系统用户,系统可以通过该字段读取到系统用户的个人信息

字段的布局和排序

在配置页面中,所有的字段控件都可以通过鼠标直接拖拽进行布局和排序

字段的配置技巧

合理的字段可以准确表达现有业务,增加数据的完整性,并减少不良数据输入的可能性。所以,对自定义字段的设置,应该遵循一些通用的规范。

1、尽量减少使用自由文本字段

用户手动输入的数据越多,出现错误的可能性越大。所以,请尽可能使用下拉菜单类选择型字段。

2、必填字段

将特定字段设为必填字段可以保持数据的完整性,但过多不必要的“必填字段”,很可能会影响最终用户的心情和效率。

3、字段规则

强制执行特定数据输入格式的规则。比如某个字段需要录入日期,那么就为其指定可以d出日期选择框的“日期格式”,而不是让用户去手动录入日期;某个字段需要在A,B,C三个之中选择一个,那么就为其建立一个单选下拉框。

结论

Rushcrm系统管理员可以对除极个别的其他所有功能模块的字段进行自定义设置,甚至一个模块可以完全由自定义字段组成。通过设置合理的自定义字段,您可以准确的配置各种表单,使信息和流程与您的业务保持一致,并保证了数据的完整性和准确性。

html5 新增了的表单元素属性如下:

属性:

1、 form属性

在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可。

2、 formaction属性

HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址

3、formmethod属性

既然对提交按钮有了formaction属性,就相应的有了formmethod属性

4、 placeholder属性

给文本框(text或textarea)处于未输入状态时的一种文字提示

5、autofocus属性

自动获得焦点,一个页面只能有一个控件具有该属性

6、 list属性

HTML5为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,增加该属性后的单行文本框类似选择框(select),但允许用户自定义输入,为了避免没有支持该蒜素的浏览器出现错误,我们通常使用CSS设置不显示

6、autocomplete属性

自动完成允许浏览器预测对字段的输入,在HTML5之前自动完成不能自定义设置,任何人都可以看到,所以存在安全隐患,在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种,不指定时使用浏览器的默认值,这取决于各浏览器的决定。

元素:

HTML5大幅度地增加和改良了input元素的种类

search 与text文本框类似,用于搜索;

tel 与text文本框类似,用于电话;

url 与text文本框类似,用于url格式的地址;

email 与text文本框类似,用于email格式的地址;

number 与text文本框类似,用于数值;

range 只允许输入一段范围内的数值,通过min和max属性来设置范围;

color 颜色文本框,“#000000”格式的文字;

file 文件选择文本框,HTML5中通过multiple属性可以多选;

datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框;

output 定义不同类型的输出;

表单验证

自动验证

所谓自动验证,就是通过为元素添加相应的属性来达到验证的要求

1、 required属性

具有该属性的元素,如果其内容为空则不允许提交,并给出相应的提示

2、pattern属性

具有该属性的元素,如果内容不为空则把内容与pattern的值进行正则匹配,匹配不成功则不通过并提示

3、min属性和max属性

它们是值类型和日期类型的input元素专用属性,限制了输入的范围

4、 step属性

控制元素的值增加或减少的步幅,如输入11-100之间的数字,且步幅是5,那么只能输入11、16、21....

显示验证

除了给元素添加属性来自动验证外,在HTML5中,form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法,调用该方法可以进行手动验证,checkValidity方法以boolean的形式返回验证结果。

取消验证

取消表单验证有两个属性:用于form的novalidate和用于submit的formnovalidate:

自定义错误

在HTML5中没经过验证的表单浏览器会有默认的提示,但也提供了通过JavaScript的来设置自定义错误提示信息

增强的页面元素

1、figure元素

figure是个组合元素,可以带标题figcaption,一个figure只允许放置一个figcaption

2、details元素

details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法

3 、mark元素

mark元素表示页面需要突出显示或高亮显示的部分,经典的是搜索结果

4、progress元素

可以给progress设置value和max属性,value表示已经进行的,max表示总数,value和max只能为有效的浮点数,value必须大于0小于等于max。如果不给progress设置这两个属性,则是动态显示正在进行,进度不确定。

5、 meter元素

定义度量衡

6、改良的ol列表

在HTML5中为ol元素添加了start属性和reversed属性

7、改良的dl列表

dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn

8、 另外还有cite用于表示作者,small用于标识“小型文本”等


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11918638.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存