FineUI第六天---表单控件

表单控件

所有表单控件都有的属性有:

  1. ShowLabel:是否显示标签(默认值:true)。
  2. ShowEmptyLabel:是否显示空白的标签(默认值:false)。
  3. Label:标签文本(默认值:"")。
  4. LabelSeparator:表单中字段与标签的分隔符,可以通过Web.config、PageManager、Form三个级别进行控制,一般不需要设置此属性(默认值:PageManager中的设置参数)。
  5. ShowRedStar:在标签后面显示红色的星号(用来标识必填项),一般与Required等表单验证属性配合使用。
  6. Readonly:表单控件的只读状态(默认值:false)。
  7. TabIndex:Tab按键的跳转顺序,一般不需要设置此属性,页面会根据控件的出现顺序自动决定Tab按键的跳转顺序(默认值:null)。
  8. OffsetRight:距离右侧边界的宽度,可以通过Web.config、PageManager、Form三个级别进行控制,一般不需要设置此属性(默认值:PageManager中的设置参数)。
  9. ToolTip:提示文本(默认值:"")。
  10. ToolTipTitle:提示文本的标题(默认值:"")。
  11. ToolTipAutoHide:是否自动隐藏提示信息(默认值:true)。

注意:很多属性只有在表单内才有意义,比如ShowLabel、Label、OffsetRight等属性。在表单外放置的表单控件是不显示标签的。

特殊标签才有的属性:

  1. Text:显示文本。
  2. EmptyText:文本框为空时显示的文本(只对文本输入框、日期选择器等少数几个控件有效)。
  3. AutoPostBack:是否自动回发(只对下拉列表、日期选择器、文本输入框等少数几个控件有效)。
  4. EncodeText:是否对文本进行编码(只对文本标签、超链接、链接按钮等少数几个控件有效)。

3.自动编码文本:

效果如下:

4.自动回发文本框:

5.富文本编辑器(HtmlEditor):

0. EnableAlignments="true"

  1. EnableColors:启用颜色。
  2. EnableFont:启用字体。
  3. EnableFontSize:启用调整字体大小。
  4. EnableFormat:启用格式化。
  5. EnableLinks:启用创建链接。
  6. EnableLists:启用创建列表。
  7. EnableSourceEdit:启用源码视图。
  8. FontFamilies:字体列表。
  9. EnableChineseFont:启用中文字体。

注意:默认都开启了。都为True,如需要禁用设置为false

6.触发按钮的文本框:

 7.日期控件:

<x:DatePicker runat="server"></x:DatePicker>

属性:

  1. SelectedDate:选择的日期。
  2. DateFormatString:日期格式字符串(默认值:"yyyy-MM-dd")。
  3. MaxDate:最大日期,大于此日期的以灰色显示,不可选择。
  4. MinDate:最小日期,小于此日期的以灰色显示,不可选择。

关于DateFormatString的一些说明:

d 月中的某一天。一位数的日期没有前导零。 
    dd 月中的某一天。一位数的日期有一个前导零。 
    ddd 周中某天的缩写名称,在 AbbreviatedDayNames 中定义。 
    dddd 周中某天的完整名称,在 DayNames 中定义。 
    M 月份数字。一位数的月份没有前导零。 
    MM 月份数字。一位数的月份有一个前导零。 
    MMM 月份的缩写名称,在 AbbreviatedMonthNames 中定义。 
    MMMM 月份的完整名称,在 MonthNames 中定义。 
    y 不包含纪元的年份。如果不包含纪元的年份小于 10,则显示不具有前导零的年份。 
    yy 不包含纪元的年份。如果不包含纪元的年份小于 10,则显示具有前导零的年份。 
    yyyy 包括纪元的四位数的年份。

8.单选框和复选框

1  <x:PageManager runat="server"></x:PageManager>

2        <x:RadioButtonList runat="server">
3            <x:RadioItem Text="可选1"/>
4             <x:RadioItem Text="可选2"/>
5             <x:RadioItem Text="可选3" Selected="true"/>
6        </x:RadioButtonList>

8         <x:RadioButtonList runat="server" ID="RadioButtonList2" Label="列表2"></x:RadioButtonList>

这是后台手动绑定的代码:

1  List<TestClass> myList = new List<TestClass>();
 2             myList.Add(new TestClass("1", "数据绑定值 1"));
 3             myList.Add(new TestClass("2", "数据绑定值 2"));
 4             myList.Add(new TestClass("3", "数据绑定值 3"));
 5             myList.Add(new TestClass("4", "数据绑定值 4"));
 6 
 7             RadioButtonList2.DataTextField = "Name";
 8             RadioButtonList2.DataValueField = "Id";
 9             RadioButtonList2.DataSource = myList;
10             RadioButtonList2.DataBind();
11

12             RadioButtonList2.SelectedValue = "3";

常用的一些属性:

还支持必选项验证、自动回发、多列显示、竖排显示等特性,因此下面这些属性也需要我们关注:

  1. Required:是否必填项。
  2. RequiredMessage:为空时提示信息。
  3. AutoPostBack:是否自动回发。
  4. ColumnNumber:渲染成几列。
  5. ColumnVertical:是否按照纵向顺序渲染。
  6. DataTextField:是否按照纵向顺序渲染。
  7. DataTextFormatString:显示文本的格式化字符串。
  8. DataValueField:显示值的数据字段。
  9. DataSource:数据源。
  10. SelectedIndex/SelectedValue/SelectedItem:选中项(适用于RadioButtonList)。
  11. SelectedIndexArray/SelectedValueArray/SelectedItemArray:选中项列表(适用于CheckBoxList)。
时间: 2024-10-12 05:24:01

FineUI第六天---表单控件的相关文章

vue2.0 之表单控件绑定

表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v-model="myVal"><br/> {{ myVal }}<br/> <input type="text" name="" v-model.lazy="myVal1"><br/&

基于Extjs的web表单设计器 第二节——表单控件设计

这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基本元素,更是核心组成部门. 一.区域控件,它主要包含三个类型的控件:卡片区域.表格区域.混合区域.这三个控件是我们的其他控件的容器或者叫包装器,相当于VS里面的各种Panel.它们很重要,每种区域控件的作用都不一样,能够包含的控件类型也不大一样,它们三个区域相互配合使用,可以为我们的表单提供强大的支

表单控件使用

表单控件使用 <span style="font-family:Microsoft YaHei;"><!--百度搜索:自信的尘埃 2014/12/29--> <html> <meta charset="UTF-8"/> <head>     <title>表单元素</title> </head> <body>     <form action="

Bootstrap关于表单控件(按扭)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

表单控件+下拉列表+文本域

一.表单控件 1.<input type="text" name="user"  size="20默认" /> 2.<input type="password" name="code"  /> 3.<input type="radio" name="sex[]" value="1" />+<input ty

CSS3美化表单控件

CSS3美化表单控件 2016-06-28 18:14 by 图书馆的牧羊人, 582 阅读, 9 评论, 收藏,  编辑 表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: <div class="container"> <div class="select"> <p>所有选项</p

Bootstrap_表单_表单控件

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”. <form role=&quo

常用的一些表单控件

表单:用于显示 收集信息,并提交信息到服务器)1.表单元素 <form ></form> 主要属性:action: 当提交表单时,向何处发送表单数据,属性值为一个URL method:使用什么方式将表单数据发送到action属性所规定的页面(get post) enctype:表单数据进行编码的方式 name:表单名称2.表单控件: (1).<input>元素用于收集用户信息,为单标记. 主要属性: type:根据不同的type属性值,可以创建各种类型的输入字段 val

仿苹果电脑任务栏菜单&amp;&amp;拼图小游戏&amp;&amp;模拟表单控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-