整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML网页编程之图片控件和隐藏控件

HTML网页编程之图片控件和隐藏控件

页编程之图片、隐藏。

同学们好,这里是免费少儿编程知识分享,每天一行代码谁都能学会。今天分享的知识是为网页添加图片控件和隐藏控件,用到的是input标签的type属性值,image和hidden。这两个控件太过于简单,所以我就放在一起讲了,同时介绍了image控件button的image内容,以及IMG控件之间的区别。演示了hidden控件在实际编程中的作用。

先来看看今天实例的运行效果。网页上分为两段。

·第一段中有三张图片,第一张就是type属性等于image的效果,第二张是button中包含IMG标签的效果,第三张是纯IMG标签的效果。这三张图片的共同点是图片完全一致。不同点是type=image,直接将整张图片做成了提交按钮,点击之后即可提交整张表单,但外观表现时仍然和普通的图片是没有任何差别的。

·第二张是button按钮中使用了IMG标签,虽然它也有提交和图片,但是它最外面仍然保留了按钮的外边框,看上去是以按钮为主。

·第三章中直接使用IMG标签,它没有提交功能就是一普通的图片,但是我们仍然可以通过JS的submit函数来使其提交表单。

·第二段是一个密码框一个提交按钮。这一句话只是为了方便你们找到隐藏空间的位置,我还做了两个hidden的隐藏控件,但是你们看不到,我随便在这里输入密码,然后点击按钮时,JS就会取出(密码)控件的值和隐藏控件中的值并且弹出对话框提示。

这里有两点需要注意,可以看到密码控件中的值在这里仍然是明文显示的,证明它只是视觉上是*或者圆点,实际在数据传输中仍然是明文并没有加密。

·第二点是隐藏控件中的值被成功读取,看不到并不代表不存在,效果各位同学都已经看到了。

在我们来看看实现的代码,先讲image值,它的关键属性就是src和ID,也就是引用地址和命名,没有什么好讲的。我其实是不建议你们使用这个控件的,因为一般表单提交前,都会加上一层一层的验证,比如说是必填、b7手势、数字、格式是否正确。这个时候除了最基础的控件类型验证外还会用到 gs验证。而如果使用 gs验证就需要用到自定义函数,在提交到服务器前就验证好。

如果用户数据是正确的就提交,如果不正确就终止提交操作提示用户修改流程,这样看上去没有问题,但因image控件讨厌也就讨厌在这里。

·若用这种方式提交可能会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常,所以尽量不用或者少用。

·至于hidden控件常用来保存一些不需要或者不希望展示给用户的数据,他的常用属性就是无这个Value和这个id。

我举个例子帮助你们理解,现在客户要求建立一个注册新用户的界面,但是要求将注册步骤分为两步。第一步,需要用户填写手机和昵称,然后跳转至第二页,输入密码和其他的信息,第二页肯定就不需要显示出来用户在第一页的时候输入的数据了。但这些数据又必须在第二页的时候一起提交至服务器。

这时候就可以使用到隐藏控件--接收第一页提交过来的数据并且不显示,用户也感受不到。直接填好信息提交时第一页的数据也以隐藏空间的方式一起提交了。这仅仅是hidde空间的一个使用场景,还可以收集用户信息、确定用户身份、判断提交源,在多个form表单中建立关节联、做全局变量等,总的来说应用方式还是很广的。

在目前这个阶段就只需要知道这两控件能干什么和基础写法,计算完成后面到具体的使用场景时会再详细讲解。

好了,今天的分享就到这里,希望各位同学下去能够照着写三遍,做到不看视频也能够写出来,所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法,点赞点关注吧!

evExpress WinForm拥有180+组件和UI库,能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!

注意:目前基于HTML & CSS的控件正在积极研发中,可以作为技术预览提供,如果需要使用请下载最新版组件体验哦~

DevExpress WinForms Subscription官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

一组控件和组件允许开发人员构建HTML格式的UI,并使用CSS样式自定义UI元素的外观设置、大小、填充和布局选项,不再需要处理自定义绘制事件或更改大量属性来修改控件以匹配UI规范,可以使用HTML和CSS标记的知识为桌面应用程序构建布局。

在上文中,我们为大家介绍了HTML-CSS标记的,本文将为大家介绍DevExpress中的HTML-CSS感知控件,有兴趣的小伙伴可以下载相关组件体验。

HTML-CSS-aware控件

HtmlContentControl

HtmlContentControl可以从HTML-CSS标记构建UI的界面。

HtmlContentPopup

HtmlContentPopup是HtmlContentControl的弹出窗口版本,该组件从HTML-CSS代码生成UI,并将其显示为弹出或模态窗口。

GridControl的ItemsView

新的ItemsView没有默认的数据表示,它仅从开发者用属性或动态地用事件指定的HTML-CSS模板中呈现它的项(数据记录)。

GridControl的TileView

TileView从模板生成它的项(tiles),开发者可以在常规模板和基于HTML-CSS的模板之间进行选择。

GridControl的WinExplorerView

WinExplorerView支持HTML-CSS模板来构建卡片的布局,开发者可以为每种显示样式(超大、大、中、列表、贴片等等)指定HTML-CSS模板,或者动态地使用一个事件。

GanttControl

GanttControl允许开发者使用HTML-CSS标记来渲染许多元素:

  • 任务、摘要和里程碑
  • 定期和汇总任务进度
  • 常规、摘要和里程碑任务基线
  • 文本标签
  • 交互工具提示
  • 分割的任务

Scheduler Control

您可以在SchedulerControl中使用基于HTML-CSS的模板来呈现约会。

DirectX Form

标准Visual Studio表单的替代品,为其子控件启用DirectX硬件加速,并支持基于HTML-CSS的模板。

Alert Controls

AlertControl的模板允许呈现现代应用程序通知。

列表框控件和组合框编辑器

开发人员可以使用基于HTML-CSS的模板来呈现以下控件中的项:

  • ListBoxControl, CheckedListBoxControl和 ImageListBoxControl
  • ComboBoxEdit

Accordion Control

AccordionControl允许开发人员使用HTML-CSS模板来渲染它的UI元素:

  • 项目和组
  • 页脚的元素
  • 处于最小化状态的元素等

、html表单控件

<input type="radio"  name="nw" value="1" title="内网" checked="" runat="server">
<input type="radio" name="nw" value="2" title="外网" runat="server">

获取值: