篇介绍了表单的使用,表单有很多控件,比如输入框,密码框、文本域,按钮等。按类型可分如下:
此类控件有很多种类型,使用<input type="类型">语法,常见类型如下:
type 值 | 含义 |
text | 文字字段 |
password | 密码域,用户看不到明文,以*代替 |
radio | 单选按钮 |
checkbox | 多选按钮 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
image | 图像域,用图像作为背景的提交按钮 |
hidden | 隐藏域,不可见的输入框 |
file | 文本域,用于上传文件等非文本数据 |
文本输入框和密码框
除了显示形式不一样,其它属性一样,有以下属性:
如下是文本输入框和密码框制作一个登录表单
html代码:
<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用户名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密码:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果:
HTML5 输入类型
除了以上几种类型,HTML5 还增加了多个新的输入类型:
如下代码:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
数字类型(1 到 5 之间):
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 选择颜色:
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月:
<input type="month" name="bdaymonth"><br>
年周:
<input type="week" name="week_year"><br>
时间:
<input type="time" name="usr_time"><br>
一定范围
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能够在被提交时自动对电子邮件地址进行验证<br>
搜索:
<input type="search" name="googlesearch"><br>
电话:
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 类型。<br>
url:
<input type="url" name="url">
提交时能够自动验证 url 字段<br>
<input type="submit">
</form>
</body>
</html>
效果如下:
单选和多选按钮
使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选,除了name和value属性外,单选和多选都有一个 checked属性定义默认选择的项,checked = “true”指选中那个选项,表单会将 checked = “true” 的选型值传递给后台。
如下实例:
<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果:
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份:
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form>
</body>
</html>
显示效果:
单选和多选传递给后台的数据是不一样的,如下会看到地址栏中的数据,多选会发送多个值,后台将会获取一个数组形式的数据。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi
普通按钮、提交按钮、重置按钮
普通按钮:type = “button”,一般配合脚本使用,语法如下:
<input type="button" name="名称" value="按钮值" onclick="脚本程序" />
value 值就是按钮在页面显示的文字,onclick属性定义了脚本事件,这里指单击按钮时所进行的处理。
如下示例:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
单击您好按钮
提交按钮:type = “submit”,用于提交表单内容,是一种特殊按钮。
如刚才的登录表单,提交后会返回结果:
重置按钮:type="reset",用于清除表单数据,也是一种特殊按钮。
输入数据
点击重置按钮后,表单数据清空
重置清空数据
HTML5 按钮
除了使用input定义按钮,还可以使用 html5 新增的<button> 标签定义按钮,button 使用语法如下:
<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form>
其它输入类控件
隐藏域 —— hidden
文件域 —— file
如下示例:
<form action="/demo/html/action_page.php">
<label for="fname">隐藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form>
显示效果
可以看到,隐藏域在页面中不显示,单击文件域选择文件按钮可以选择文件,比如word文件,电子表格文件等,会以非文本方式传送到后台的,常用来实现文件上传功能。
除了input 类型的控件,还有文本域 textarea ,一种特殊的文本框,它与input 文本输入框的区别就是可以输入多行文字,input 文本输入框是单行的无法输入多行文字。
如下示例:
<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
效果如下:
rows 属性定义文本域的高度是几行,cols 定义文本域宽度占几列,比如上面定义了高10行宽30列的文本域。
下拉菜单作用和单选按钮类似,只不过它更加节省空间,当要选择的选型很多时,就不适合使用radio空间,所以当选项很多的时候,使用下拉菜单,语法如下:
<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>
多选列表和多选按钮类似,一样为了节省空间,当数据选项比较多时,使用多选列表,语法如下:
<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>
多选比下拉菜单不同之处是多了一个multiple属性,定义多选的,且表现形式也不一样,不是下拉而是一个列表。
如下代码:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单:<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表:<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
显示效果:
这里需要注意的是,多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选,效果如下:
到这里,已介绍了大部分的表单控件,现在你可以使用他们制作自己的表单,表单通常在动态网站中使用,这为以后制作动态网站打下基础。
还有许多属性没有讲到,比如html5新增的一些属性和功能,可自行参考 w3cshool 等网站学习,感谢关注,学习愉快!
上篇 : 前端入门——html 表单
下篇: 前端入门 —— 网页中使用窗口框架
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感知控件,有兴趣的小伙伴可以下载相关组件体验。
HtmlContentControl可以从HTML-CSS标记构建UI的界面。
HtmlContentPopup是HtmlContentControl的弹出窗口版本,该组件从HTML-CSS代码生成UI,并将其显示为弹出或模态窗口。
新的ItemsView没有默认的数据表示,它仅从开发者用属性或动态地用事件指定的HTML-CSS模板中呈现它的项(数据记录)。
TileView从模板生成它的项(tiles),开发者可以在常规模板和基于HTML-CSS的模板之间进行选择。
WinExplorerView支持HTML-CSS模板来构建卡片的布局,开发者可以为每种显示样式(超大、大、中、列表、贴片等等)指定HTML-CSS模板,或者动态地使用一个事件。
GanttControl允许开发者使用HTML-CSS标记来渲染许多元素:
您可以在SchedulerControl中使用基于HTML-CSS的模板来呈现约会。
标准Visual Studio表单的替代品,为其子控件启用DirectX硬件加速,并支持基于HTML-CSS的模板。
AlertControl的模板允许呈现现代应用程序通知。
开发人员可以使用基于HTML-CSS的模板来呈现以下控件中的项:
AccordionControl允许开发人员使用HTML-CSS模板来渲染它的UI元素:
页编程之图片、隐藏。
同学们好,这里是免费少儿编程知识分享,每天一行代码谁都能学会。今天分享的知识是为网页添加图片控件和隐藏控件,用到的是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表单中建立关节联、做全局变量等,总的来说应用方式还是很广的。
在目前这个阶段就只需要知道这两控件能干什么和基础写法,计算完成后面到具体的使用场景时会再详细讲解。
好了,今天的分享就到这里,希望各位同学下去能够照着写三遍,做到不看视频也能够写出来,所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法,点赞点关注吧!
*请认真填写需求信息,我们会在24小时内与您取得联系。