表单页面功能元素设计攻略:字段种类及属性说明
- 格式:doc
- 大小:215.00 KB
- 文档页数:7
表单控件属性与方法总结表单控件属性表单的文件名:.scx表单输出类控件标签:第一次创建:name:label1数据绑定时的字段名显示,默认的名称:lbl字段名图像:image1.通用型字段中如果存放的是图片,数据绑定指定的控件就是图像控件线条:line1形状:shape1对控件对象的多重选定:shift+选择输入类控件文本框:text1可以接受4种:c n d(t) l。
可以作为以上4种数据类型的绑定控件:Txt字段名方法:表示对象的行为Setfocus:设置焦点Thisform.控件名.方法名事件:Gotfocus:对象获得焦点时Lostfocus: 对象失去焦点时Interactivechange:当键盘或鼠标改变文本框的值时发生文本框和标签分别用文本框控件和标签控件显示系统时间,系统日期,系统的日期时间Time()=c型 Date()=d型 Datetime()=t型文本框用value可以接受c、n、d、l、t标签用caption接受,只能是c注意:在属性中设置也要加=属性设置例子:THISFORM.TEXT1.VALUE=DATE()THISFORM.TEXT1.VALUE=DATETIME()THISFORM.TEXT1.VALUE=TIME()BEL1.CAPTION=TIME()BEL1.CAPTION=TTOC(DATETIME())BEL1.CAPTION=DTOC(DATE())列表框list1和组合框combo11.列表框的列表项全部显示,而组合框只显示一项2.组合框分为下拉组合框和下拉列表框,前者允许选择和输入数据项,后者和列表框一样只有选取功能逗号分隔的字段列表,首字段加表名前缀方法选介在控件的rowsourcetype为0时,才可以使用:AdditemThisform.list1.additem(字符串)RemoveitemThisform.list1.removeitem(n)N:表示列表项的第n项控制类控件命令按钮Command1命令按钮组Commandgroup1如果value值是字符型的数据,value值等于命令按钮的caption属性的值如果value值是数值型的数据,value值等于命令按钮的序号选项按钮组Optiongroup1如果value值是字符型的数据,value值等于选项按钮的caption属性的值如果value值是数值型的数据,value值等于选项按钮的序号复选框Check1Thisform.check1.value=容器类控件页框:pageframe1,只能作为页面的容器页面:容器,不能直接放在表单上如果要在页面中添加控件,要将页面设在编辑的状态表格grid1是作为数据表的数据绑定控件Thisform.grid1.column1.header1.captionThisform.grid1.recordsource=”select ”1select … into cursor tempThisform.grid1.recordsource=”temp”。
表单构成的基本元素表单是Web界面中常见的一种交互元素,通常用于收集用户输入的数据。
表单的基本元素包括输入框、下拉框、单选框、复选框、文本域和按钮等。
以下是对这些基本元素的详细描述和相关使用参考。
1. 输入框(Input Field)输入框是用户输入文本内容的常用元素,用于接受单行文本数据。
常见的输入框类型有文本框(text)、密码框(password)、邮箱框(email)、电话框(tel)等。
输入框可以设定最大长度(maxlength)、最小长度(minlength)、占位文本(placeholder)、默认值(value)等属性,用于控制用户输入的规则和提示。
使用参考:- 注册页面,包括输入用户名、密码等信息时使用文本框。
- 用于搜索的输入框,用户可以输入搜索关键词。
2. 下拉框(Select)下拉框用于提供一组选项供用户选择。
下拉框包括一个可展开和折叠的选项列表,用户可以通过点击下拉箭头展开或隐藏选项。
每个选项由一个文本和一个值(value)组成,用户选择后,该值会传递到服务器进行处理。
使用参考:- 国家、省市选择器,用于选择地区。
- 选择性别时使用单选框。
3. 单选框(Radio Button)单选框用于提供一组选项,但用户只能选择其中的一项。
每个单选框由一个文本和一个值组成,用户选择后,该值会传递到服务器进行处理。
与下拉框不同的是,单选框在页面中展示为圆形按钮。
使用参考:- 常见的性别选择,男、女、未透露。
- 在问卷调查中,提供多个单选题供用户选择。
4. 复选框(Checkbox)复选框用于提供多个选项,用户可以选择其中的一个或多个选项。
每个复选框由一个文本和一个值组成,用户选择后,所选的值会传递到服务器进行处理。
与单选框不同的是,复选框在页面中展示为方形按钮。
使用参考:- 用户注册页面,选择用户所关注的兴趣爱好。
- 在购物网站中,用户可以同时选择多个商品加入购物车。
5. 文本域(Textarea)文本域用于接受多行文本输入,与输入框不同的是,文本域可以容纳较多的文本内容。
表单元素汇总在HTML中的标签有form、input、textarea、select和option。
表单标签form定义的表单里头,必须有行为属性action,它告诉表单当提交的时候将内容发往何处。
可选的方法属性method告诉表单数据将怎样发送,有get(默认的)和post两个值。
常用到的是设置post值,它可以隐藏信息(get的信息会暴露在URL中)。
所以一个表单元素看起来是这样子的:<form action="reg.asp" method="post"></form>一、input标签在表单制作中起到的作用很重要。
有10种形式,概括如下:<input type="text" />是标准的文本框。
它可以有一个值属性value,用来设置文本框里的默认文本。
<input type="password" /> 像文本框一样,但是会以星号代替用户所输入的实际字符。
<input type="checkbox" />是复选框,用户可以快速的选择或者不选一个条目。
它可以有一个预选属性checked,像这样的格式<input type="checkbox" checked="checked" />.<input type="radio" /> 与复选框相似,但是用户只可在一个组中选择一个单选按钮。
它也有一个预选属性checked,使用方法跟复选框一样。
<input type="file" /> 是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。
<input type="submit" /> 是一个被点击后提交表单的按钮。
常用的表单元素
表单是网页中常见的交互方式,用户可以通过表单输入信息,提交数
据给服务器进行处理。
表单元素是构成表单的基本组成部分,常用的
表单元素如下:
1. 文本框(input type="text"):用于输入文本信息,如用户名、密码、地址等。
2. 密码框(input type="password"):与文本框类似,但输入内容
会以星号或圆点等形式隐藏。
3. 单选按钮(input type="radio"):用于在多个选项中选择一个。
4. 复选框(input type="checkbox"):用于在多个选项中选择多个
或全部。
5. 下拉列表框(select):提供一个下拉列表供用户选择。
6. 多行文本框(textarea):可输入多行文本信息,如评论、留言等。
7. 文件上传框(input type="file"):允许用户上传文件到服务器。
8. 隐藏域(input type="hidden"):不显示在页面上,但可以传递数据给服务器端脚本处理。
9. 提交按钮(input type="submit"):将表单数据提交给服务器进行处理。
10. 重置按钮(input type="reset"):清空表单中的所有数据并恢复默认值。
以上是常见的表单元素,它们可以组合使用来实现各种复杂的交互功能。
在设计网页时,需要根据实际需求选择合适的表单元素,并合理布局,以提高用户体验。
网页设计中表单主要包含的元素1.背景介绍表单元素是允许用户在表单中输入信息的元素。
随着时代的改变和互联网的发展,表单的使用越来越广泛。
2.知识剖析什么是表单表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
常用表单元素form:定义供用户输入的表单。
fieldset:定义域。
即输入区加有文字的边框。
legend:定义域的标题,即边框上的文字。
label:定义一个控制的标签。
如输入框前的文字,用以关联用户的选择。
input:定义输入域,常用。
可设置type属性,从而具有不同功能。
textarea:定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。
button:定义一个按钮。
select:定义一个选择列表,即下拉列表。
option:定义下拉列表中的选项。
属性解释:name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;cols属性定义多行文本框的宽度,单位是单个字符宽度;rows属性定义多行文本框的高度,单位是单个字符宽度;wrap属性定义输入内容大于文本域时显示的方式密码框:是一种特殊的文本域,用于输入密码。
当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。
表单设计-控件属性功能说明一.通用属性:1.标题功能介绍:对所要填写的内容做说明。
使用举例:物业地址,房源编号,租客姓名等。
2.描述信息功能介绍:对标题信息的补充说明,可用颜色标红。
使用举例:请填写房源真实物业地址,请填写合同上的租客姓名等。
3.校验功能介绍:限制字段内容是否为必填项,不填写无法提交。
4.字段权限功能介绍:当前字段内容的是否可见/是否可编辑修改。
二.高级属性:1.单行文本控件:格式功能介绍:对输入内容进行限制,限制的内容如图所示:2.数字控件:仅允许填写整数功能介绍:是否允许填写带小数的数字。
3.日期时间控件:类型包括日期/日期时间,默认值填写当天功能介绍:日期是精确到日,日期时间是精确到秒,默认值自动生成填写当天的日期。
4.下拉选择框/单选按钮组控件:选项关联功能介绍:通过选择不同选项来控制以下需要显示的内容。
使用举例:当退房时选择不同的退房类型,来设置不同的费用退款情况。
5.流水号控件:流水号规则功能介绍:以下三种规则,自由组合,每走一条流程自动生成自动计数:自动生成数字,自由配置重置周期,提交日期:可显示提交日期,自由选择显示格式固定字符:可自由设置显示内容,包括英文,中文,符号。
6.数字控件:公式编辑功能介绍:可以在英文输入法模式下编辑公式,支持运算符号和函数编辑。
支持运算符号:加“+”,减“-”,乘“*”,除“/”,函数:sum求和和if条件格式进行设置。
支持运算符号:大于“>”,小于“<”,等于“==”,不等于“!=”,大于等于“>=”,小于等于“<=”,括号“()”7.默认值:联动全房通数据功能介绍:用于根据全房通房源控件来联动显示出房源和租赁合同信息。
使用说明:不同控件联动显示出来的信息是不同的。
单行文本:物业地址,租客姓名等等,数字:收房价格,出房价格,房屋押金等等,多行文本:房源备注,日期时间:托管开始日期,托管结束日期,租赁开始日期,租赁结束日期。
HTML中的表格元素介绍⽬录⼀、表格的基本结构⼆、表格美化1、设置表格的尺⼨和边框2、设置背景图⽚和背景⾊3、设置对齐⽅式4、填充属性和间距属性5、设置跨⾏、跨列的表格6、表格的分组标签表格元素的作⽤:⽤来格式化显⽰数据。
⼀、表格的基本结构表格的基本语法:<TABLE border="设置表格边框尺⼨⼤⼩" width="" cellpadding="" cellspaning=""><TR align="对齐⽅式"><TD align="">单元格内容</TD>......</TR>......</TABLE><TABLE></TABLE>:定义表格<TR></TR>:定义⾏<TD></TD>:定义列⽰例:主要属性:border:边框的宽度,单位是像素(缺省值是0)width:表格的宽度,可以⽤百分⽐(表⽰该表格占⽗标记的宽度),也可以是绝对值cellpadding:单元格内容与单元格之间的空隙cellspacing:单元格与单元格之间的空隙align:对齐⽅式,值有"center","right","left"colspan:⽔平⽅向延伸单元格,值为⼀正整数,代表此单元格⽔平延伸的单元格数rowspan:垂直⽅向延伸单元格,值为⼀正整数,代表此单元格垂直延伸的单元格数。
<caption>表格的题注:caption元素必须包含在table元素中,⽽且必须紧跟在<table>的开始标记之后,默认居中显⽰。
语法开始标记:必须内容:⾏内标记结束标记:必需主要属性:align属性:⽤以确定题注的位置,可以有五种取值bottom、center、laft、right、top例如:定义⼀个基本的表格<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格</title></head><body><table><tr><td>第⼀⾏第⼀列</td><td>第⼀⾏第⼆列</td></tr><tr><td>第⼆⾏第⼀列</td><td>第⼆⾏第⼆列</td></tr></table></body></html>结果:⼆、表格美化1、设置表格的尺⼨和边框width:⽤来设置表格的宽度height:⽤来设置表格的⾼度border:⽤来设置表格边框尺⼨⼤⼩bordercolor:⽤来设置表格边框颜⾊<table width="400" height="200" border="15" bordercolor="red"><tr><td colspan="4" align="center">品牌商城</td></tr><tr><td colspan="2">笔记本电脑</td><td colspan="2">办公设置、⽂具、耗材</td></tr><tr><td>惠普</td><td>华硕</td><td>打印机</td><td>刻录盘</td></tr></table>⽰例:2、设置背景图⽚和背景⾊background:属性⽤来设置表格的背景图⽚bgcolor:属性⽤来设置表格、⾏、列的背景⾊。
表单元素(form、⽂本、按钮、选择)表单元素⼀、formform代表表单,功能:⽤于申明表单,定义采集数据的范围,也就是<form>和</form>⾥⾯包含的数据将被提交到服务器或者电⼦邮件⾥。
<form> 标签⽤于为⽤户输⼊创建 HTML 表单。
表单能够包含input元素,⽐如⽂本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、type、name、value等元素。
表单⽤于向服务器传输数据。
1.actionaction 属性规定当提交表单时,向何处发送表单数据,把数据提交给哪个⽹站。
2.methodmethod表⽰数据提交⽅式,提交⽅式有两种:get—显式提交,有长度限制。
post—隐式提交3.targettarget表⽰提交⽅式,提交⽅式主要有以下⼏项。
_blank:在新窗⼝中打开。
_parent:在⽗框架集中打开。
_self:默认。
在相同的框架中打开。
_top:在指定的框架中打开。
⼆、⽂本1.⽂本框<input type="text" />,其属性有:value⽂本框的值,就是⽂本框⾥⾯显⽰的内容。
name⽂本框的名称2.密码框<input type="password" />,虽然密码框和⽂本框相似,但在密码框⾥⾯输⼊内容时不显⽰内容,只显⽰●。
3.隐藏域<input type="hidden />,隐藏域的属性有:name密码框的名称value密码框的值4.⽂本域<textarea></textarea>,双标签元素,值不是写在value属性⾥⾯的,是写在开始结束标签之间的,现在所学内容还不能够调整⽂本域的⼤⼩。
⽰例代码:<textarea>⽆⾔</textarea>,⽂本域⾥⾯就会显⽰“⽆⾔”。
常用的表单元素1. 概述表单是我们日常生活中非常常见的一种交互形式,用于收集用户输入的一系列数据。
在网页开发中,表单元素是构建用户界面和收集用户信息的重要组成部分。
常用的表单元素包括输入框、复选框、单选框、下拉列表、文本区域等。
在本文中,我们将详细介绍常用的表单元素的使用方法、属性及相关注意事项。
2. 输入框输入框是最常用的表单元素之一,用于接收用户输入的文本信息。
2.1 基本用法<input type="text" name="username" placeholder="请输入用户名">以上代码创建了一个文本输入框,用于接收用户输入的用户名。
其中,type属性指定输入框类型为文本类型,name属性用于命名该输入框,placeholder属性为输入框提供提示文本。
2.2 常用属性•type:指定输入框类型,可选值包括text、password、email、number等。
•name:指定输入框的名称,用于后端处理表单数据。
•value:设置输入框默认值。
•disabled:禁用输入框。
•readonly:设置输入框只读。
3. 复选框复选框用于多选的场景,用户可以从一组选项中选择多个选项。
3.1 基本用法<input type="checkbox" name="hobbies[]" value="reading">阅读<input type="checkbox" name="hobbies[]" value="music">音乐<input type="checkbox" name="hobbies[]" value="sports">运动以上代码创建了一组复选框,用于选择用户的兴趣爱好。
5个表单元素语法及用途表单元素是网页设计中常用的一种交互元素,用于收集用户输入的数据。
在HTML中,有多种表单元素可供选择,每种元素都有其特定的语法和用途。
本文将介绍5个常用的表单元素及其语法和用途。
1. 输入框(Input)输入框是最基本的表单元素之一,用于接收用户输入的文本。
其语法如下:```<input type="text" name="input_name" placeholder="请输入内容">```其中,type属性指定输入框的类型为文本(text),name属性用于标识输入框的名称,placeholder属性用于在输入框中显示提示文本。
输入框的用途非常广泛,可以用于收集用户的姓名、邮箱、电话号码等各种文本信息。
2. 复选框(Checkbox)复选框用于让用户从多个选项中选择一个或多个选项。
其语法如下:```<input type="checkbox" name="checkbox_name" value="option1">选项1<input type="checkbox" name="checkbox_name" value="option2">选项2```其中,type属性指定复选框的类型为复选框(checkbox),name属性用于标识复选框的名称,value属性用于指定选项的值。
复选框常用于用户选择多个选项的场景,比如选择兴趣爱好、接受订阅等。
3. 单选按钮(Radio)单选按钮用于让用户从多个选项中选择一个选项。
其语法如下:```<input type="radio" name="radio_name" value="option1">选项1<input type="radio" name="radio_name" value="option2">选项2```单选按钮与复选框的语法类似,区别在于type属性为单选按钮(radio)。
网页设计表单控件知识点一、表单的基本概念和作用在网页设计中,表单是用户与网站进行交互的一种重要方式。
通过表单,用户可以输入、提交和修改数据,网站可以根据用户输入的数据进行相应的处理和回应。
表单通常由多个控件组成,每个控件用于接收不同类型的数据。
二、常用表单控件1. 文本框(Text input)文本框用于接收用户输入的文本信息,例如用户名、密码、电子邮件等。
可以设置文本框的大小和最大输入字符数。
2. 多行文本框(Textarea)多行文本框与文本框类似,可以接收多行文本输入,适用于用户输入较多的文字信息,例如评论、留言等。
3. 单选按钮(Radio button)单选按钮用于让用户在多个选项中选择其中之一。
每个选项对应一个单选按钮,用户只能选择其中一个。
4. 复选框(Checkbox)复选框用于让用户从多个选项中选择多个或全部选项。
每个选项对应一个复选框,用户可以同时选择多个选项。
5. 下拉列表(Select)下拉列表通过菜单形式展示多个选项,用户可以从中选择一个选项。
下拉列表通常用于选项较多或具有层级关系的情况。
6. 按钮(Button)按钮用于触发特定的操作,例如提交表单、重置表单或执行其他功能。
可以设置按钮的样式和点击事件。
7. 文件上传(File upload)文件上传控件允许用户选择并上传文件。
用户可以通过浏览按钮选择本地文件,然后将文件上传到服务器。
三、表单控件的样式和布局为了使表单界面美观和易用,设计师可以对表单控件进行样式和布局的调整。
1. 样式调整可以通过CSS来调整表单控件的外观,例如修改文本框和按钮的颜色、字体、边框等。
还可以添加动画效果,提升用户体验。
2. 布局设计在设计表单时,需要考虑控件的排列方式和大小,以及控件与文字的对齐方式。
可以采用一列或多列的方式进行布局,根据表单内容的多少和类型进行选择。
四、表单控件的验证和反馈为了确保用户输入的准确性和完整性,表单中的控件通常需要进行验证,并给予相应的反馈。
表单的作用及组成元素
表单在网页设计中起着至关重要的作用,它是用户与网页进行
交互的重要工具之一。
表单的主要作用是用来收集用户输入的数据,比如用户的个人信息、意见反馈、订单信息等。
通过表单,用户可
以向网站提交信息,网站可以根据用户输入的内容进行相应的处理
和反馈。
表单由多个组成元素构成,其中包括输入框、单选框、复选框、下拉框、文本域、按钮等。
输入框用于用户输入文本信息,比如用
户名、密码等;单选框用于用户在多个选项中选择一个;复选框用
于用户在多个选项中选择多个;下拉框提供了一个下拉菜单供用户
选择;文本域用于用户输入大段文本信息,比如留言、评论等;按
钮用于提交表单或者执行其他操作。
除了上述基本的组成元素外,表单还可以包含一些特殊的元素
和属性,比如文件上传功能、表单验证、自动填充等,这些元素和
属性可以让表单更加灵活和强大,提升用户体验和数据的准确性。
总的来说,表单作为网页交互的重要工具,通过其多样的组成
元素和功能,可以满足用户输入各种类型的信息的需求,是网页设计中不可或缺的一部分。
element table 字段帮助说明元素表是一种用于展示元素相关信息的工具,通常用于化学领域。
它通过列出元素的各种属性来帮助人们了解元素的特性和行为。
元素表的字段包括元素的名称、符号、原子序数、原子量、电子排布、物理性质和化学性质等。
以下是对元素表字段的详细解释:1.元素名称:元素表中的每一行都对应着一个元素的名称。
元素名称通常是该元素的常用名称,例如氢、氧、铁等。
2.元素符号:元素符号是元素的化学符号,通常是由元素名称的首字母或缩写组成。
例如,氢的符号是H,氧的符号是O。
3.原子序数:元素表中的元素按照原子序数从小到大依次排列。
原子序数是指元素的原子核中所含质子的数量,也是元素在元素表中的唯一标识。
4.原子量:原子量是指元素一个原子的质量,通常以amu(原子质量单位)为单位。
原子量也是元素在化学反应中计量的基本单位。
5.电子排布:电子排布描述了元素的电子在原子轨道中的排布方式,包括主能级、次能级、电子数量等信息。
电子排布能够帮助人们理解元素的化学性质和反应特点。
6.物理性质:元素表中通常会包含元素的一些基本物理性质,比如密度、熔点、沸点等。
这些物理性质能够揭示元素的基本性质和状态变化规律。
7.化学性质:化学性质描述了元素在参与化学反应时的各种特性,包括化合价、氧化性、反应活性等。
了解元素的化学性质有助于人们预测元素的化学行为和它们之间的反应情况。
元素表的字段帮助人们系统地了解和比较不同元素的性质和特点,为化学研究和应用提供了重要的参考资料。
同时,元素表也是化学教育中的重要工具,帮助学生理解元素间的关系和化学原理。
通过研究元素表,人们可以得知元素在自然界中的分布情况、物理化学性质以及在科学研究和工业生产中的应用。
元素表的字段也是化学研究和实验中必不可少的参考信息。
研究人员在进行实验设计和数据分析时需要准确的元素信息,而元素表为他们提供了一个全面和统一的数据来源。
通过对元素表字段的分析和比较,可以为实验设计和数据解释提供重要的依据。
HTML网页设计(表单元素)1.什么是表单表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在<form>标签在。
一个文档中可以包含多个表单,而且每个表单可以放置通常的主体内容(包括文字和图像在内)Form标签设计者可以将表单放在文档主体中的任何位置,但前提是将表单的缘故都放在<form>标签和</form>结束标签之间。
2.表单元素在<form>标签中,可以包含以下5个标签。
Input标签对于大量通常的表单内元素,可以使用<input>标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然<input>标签中有许多属性,但对每个元素来说,只有type和name属性是必须的。
当然,根据指定的比哦啊单元素类型,也可以设置一些其可以使用<input>标签中的name属性来为字段命名(表单提交到处理过程中使用的字段,这种字段的说明可以参阅前面介绍)。
从技术角度上讲,name属性的值是任意的一个字符串,但是我们建议最好采用没有嵌入空格或标点的字符串。
<input>标签中必须的type属性可以用来选择控件的类型,其属性值如下表所示。
最有用也是最常见的表单输入元素时文字域,在浏览器窗口中显示为一行的空框,它接收用输入的一行信息,当你用户将表单提交给服务器时,这些信息就变成了元素值。
范例代码:密码域将type属性值设置为password,就可以创建一个密码域。
传统文本域的其他属性和语义也可以应用于密码域。
应用呢密码域时必须制定一个字段的名称,这样就可以为该段字段设置size和maxlength属性,并可以设置一个初见时的vlaue。
范例代码:文件域(file)复选框(checked)单选框(ridio)普通按钮(button)设置普通按钮(button)代码:重置按钮(Reset)Textarea标签作为表单的一部分,<textarea>标签可在用户浏览器中创建一个多行文字域,在此文本输入区内,用户几乎可以输入无线文字。
HTML笔记三,表单相关元素和属性表单元素<form>:⽤于⽣成输⼊表单,该元素不可视化 action:指定当前表单提交的地址,必填 method:指定提交表单时发送何种类型的请求,post或者get,⼀般post,必填;其中GET⽅式可以在地址栏种看到传送的数据,POST ⽅法看不到较安全 enctype:指定对表单内容进⾏编码的字符集 name:名称 target:以何种⽅式打开⽬标url,_self,_blank,_top,_parent四个中的⼀个<input>: type= text:单⾏⽂本框 password:密码输⼊框 hidden:隐藏域 radio:单选框 checkbox:复选框 image:图像域 file:⽂件上传域 submit,reset,button:——— checked:设置单选框复选框的选中状态 disabled:表⽰元素被禁⽤ maxlength:指定⽂本框中所允许输⼊的最⼤字符数 readonly:表⽰不允许⽤户修改 size:指定元素的宽度 src:指定图像域所显⽰图像的URL<label>:定义标签 for:表⽰所相关联表单控件的id值<button>:定义⼀个按钮 disable:指定是否禁⽤按钮 name:指定唯⼀名称,⼀般与id值相同 type:指定按钮类型,button,reset,submit其中之⼀ value:指定按钮的初始值<select>:创建列表框和下拉菜单,必须和<option>结合使⽤ multiple:允许多选 size:设置该列表框的⾼度<option>表⽰⼀个列表项或者菜单项<optgroup>⽤于定义列表项或者菜单项,只能包含<option><textarea>:设置多⾏⽂本框 cols:指定⽂本域的宽度,必填 rows:指定⽂本框的⾼度,必填 disabled:禁⽤此⽂本域 readonly:设置为只读HTML5新增表单中的属性与元素1、为表单控件添加了form属性,form=“⼀个form表单的id”,则它也属于这个表单的,当提交表单时,此控件也会提交相关参数2、formaction:对按钮设置不同的formaction则会提交到不同的对应逻辑3、formXXXX属性:formenctype,formmethod,formtarget通过这些属性均可以让按钮动态的改变表单的相关属性4、autofocus属性:⾃动获得焦点5、placeholder属性:⽂本框中的灰⾊字体提⽰信息6、list与datalist属性:⽂本框中类似历史记录的东西7、autocomplete属性:为on则会显⽰datalist下拉菜单,off则不会显⽰datalist下拉菜单8、<output>元素:⽤于显⽰输出,⽐如计算结果或者脚本的输出,必须属于某个表单;使⽤for属性来表⽰显⽰那个元素的值(本次未显⽰出output数据)9、type=“file”,允许进⾏多个⽂件的上传,accept:控制允许上传⽂件的类型;multiple:设置是否允许选择多个⽂件。
表单页面功能元素设计攻略:字段种类及属
性说明
本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。
字段种类
文本:单行文字、多行文字、描述号码数值:数字(小数点后保留)金额计算公式选项:单级下拉框、多级下拉框(级联)下拉菜单:单项选择、多项选择矩阵单选矩阵填空工作区成员日期和时间图片:图片单选、图片多选附件:上传文件分页:向下展开、设置单页数据数量、显示全部、滚动加载网址评分关联:表单关联、字段关联、综合计算公式的关联实例字段:联系信息
姓名昵称性别身份证号手机座机邮箱微信QQ地址/地理位置备注表单字段公共属性说明
基础
字段标题:此属性用于告诉填写者应该在该字段中输入什么样的内容。
通常是一两个简短的词语,也可以是一个问题。
(页面初始化)默认值:设置后,此值将作为默认值显示在该字段的输入框中。
如果不需要设置默认值,请将此处留空。
字段提示:此属性用于指定对该字段进行一些附加说明,一般用来指导填写者输入。
数据类型:字母(分大小写和不分大小写)、阿拉伯数字、中文(一个汉字=两个字符)、限定种类的混合字符数据(字母开头、只限字母和数字、只限字母、只限数字、字母数字英文“_”中文“-”)标识布局设置
排列方式:纵向、横向宽度占整行的百分比:占总宽度的百分比。
设置表单宽度值和高度值校验
必填校验:勾选后,该字段将不允许为空,在字段名称后会有红色的星号标出。
如果填写者在提交表单时必填字段没有输入,系统将会给出相关错误提示,表单将无法提交。
该属性常用于需要强制填写者必须输入的字段。
(单选)设置“其他”必填:勾选后,当填写者选中“其他”时,需要同时填写“其他”后面的文本框;如果填写者在提交表单时,该文本框没有输入内容,系统将会给出相关错误提示,表单将无法提交。
唯一校验:勾选后,该字段将将不允许重复,在字段名称后会有红色的星号标出。
如果填写者在提交表单时字段不唯
一,系统将会给出相关错误提示,表单将无法提交。
该属性常用于需要强制填写者输入不重复的字段。
只能填数字:勾选后,该字段只能填写数字,数字之外的字符将不能正常提交表单。
重复校验:(不能和已有数据重复)勾选后,该字段将不允许提交重复值。
填写者在提交表单时,会检测数据库中是否已存在相同的值;如果存在,将给出错误的提示信息,提交将失败。
常用于电子邮件,用户名等需要验证填写者身份的字段。
限定范围:勾选设置后,填写者只能提交这个列表范围内的数据,这个列表范围外的数据将不能提交表单。
通常用于需要限制报名者身份的场景。
(长度)最少填写字符:勾选设置后,系统会限制填写者填写此字段的最小字符数。
(长度)最多填写字符:勾选设置后,系统会限制填写者填写此字段的最大字符数。
(可见权限)字段隐藏:勾选后,该字段只有管理员及数据维护员可见,普通填写者将看不到此字段;通常适用于当你想为已提交数据设置一些特殊属性,如状态(处理/未处理)或优先级(重要/一般)。
缓存填写数据:
(为填写者缓存所填内容,下次自动填写)勾选后,填写者第二次打开你的表单时,第一次填写的字段数据将会自动显示出来,减少重复填写。
(注:清除浏览器cookie后该功能将会失效)(单选或多选)选项展示顺序随机:勾选后,该字段的选择项在每次访问时出现的顺序是随机的。
统计统计数据:对该字段的数据总数求和
权限
增删改查
数据提交
提交方式:按步骤提交——点击确定或完成或提交或更新按钮向数据库请求提交数据、失去焦点提交并更新数据、数据模块填写完成并失去焦点时自动提交
字段的特殊属性
数字:最多支持15位数字。
如需要用作“身份证号码”填写,请选用“单行文字”。
时间:
日期:
日期校验
起始日期:
勾选设置后,系统会限制填写者填写此字段的最小值。
结束始日期:
勾选设置后,系统会限制填写者填写此字段的最大值。
单选选项(圆形)
多选选项(方形)
单张图片
多张图片
矩阵单选:
矩阵填空:
下拉框:
描述:
显示分割线
翻页:
评分:
级联:
上传文件:
上传文件的大小限制在20MB以内
最大文件数量:此属性用于限制填写者最大上传文件数量。
手机号:
限定手机号:限定范围——勾选设置后,填写者只能提交这个列表范围内的数据,这个列表范围外的数据将不能提交表单。
通常用于需要限制报名者身份的场景。
短信验证:勾选后,填写者在填写该字段时会收到一条验证码用于验证填写
者手机号真实性。
(注:短信费用将会从你的账户中扣除。
)地理位置/地址:
本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。