精华内容
下载资源
问答
  • form表单控件控件属性

    千次阅读 2019-09-25 00:21:09
    **form:最主要的一个标签,但是这个元素不会生成可是化部分** 属性: action:表单提交的地址 method:属性值为get/post,该属性必填,默认get name:指定表单唯一的名字,尽量使其与id值保持一致 target...

    今天又学习了前端的form控件,这是我第二遍学习,确实发现不少新东西,把自己觉得常用的记下来

    表单控件:

    **form:最主要的一个标签,但是这个元素不会生成可是化部分**
    	属性:
    		action:表单提交的地址
    	     method:属性值为get/post,该属性必填,默认get
    		name:指定表单唯一的名字,尽量使其与id值保持一致
    		target:打开目标地址的方式
    input:input是表单中功能最丰富的控件,根据type属性的属性值不同生成不同的功能
    	属性:
    		**1、type:**
    			属性值:text(文本框)、password(密码)、hidden(隐藏)、radio(单选框)、				checkbox(复选框)、image(图像)、file(上传文件)、submit(提交)
    		**2、checked:**设置单选框、复选框的初始状态是否处于选中状态
    		注意:要设置单选框,所有的选项的name值要相等
    		**3、disable:**设置首次加载禁用此元素
    		**4、maxlength**:指定文本框可输入的字符串的最大长度
    		**5、readonly:**指定文本框的值不允许修改
    		**6、size:**指定元素宽度,当type=“hidden”时没有意义
    		**7、src:**指定图像区域的图像的URL,当type=“image”时有意义
    		**8、width**:图形的宽度
    		**9、height**:图像的高度
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>from</title>
    </head>
    <body>
    	<form action="http://www.crazyit.org" method="get">
    		单行文本框<input type="text" id="username" name="username" maxlength="3" /><br/>
    		不能编辑的文本框:<input type="text" id="readonly" name="readonly" readonly="readonly"/><br>
    		密码框<input type="password" name="password" type="password" /> <br>
    		隐藏框<input type="hidden" id="hidden" name="hidden" /><br>
    		第一组单选框<br>
    		红:<input type="color" id="color" name="color" value="red" checked /><br>
    		绿:<input type="radio" id="color2" name="color" value="green"/><br>
    		蓝:<input type="radio" id="color3" name="color" value="blue" /><br>
    		第二组单选框:<br>
    		男性:<input type="radio" id="gender" name="gender" value="male"/><br>
    		女性:<input type="radio" id="gender2" name="gender" value="female"/><br>
    
    		两个复选框:<br>
    		<input value="leegang.org" type="checkbox" id="web" id="web" checked /><br>
    		<input type="checkbox" id="web2" name="web" value="crazyit.org" /><br>
    
    		文件上传域:<input type="file" id="file" name="file" /> <br>
    		图像域:<input type="image" src="../image/887.jpg" alt="篮球" width="400" height="300" /> <br>
    
    		下面是四个按钮:<br>
    		<input type="submit" id="ok" name="ok" value="提交"/><br>
    		<input type="submit" id="dis" disabled name="dis" value="提交" /><br>
    		<input type="submit" id="cancel" name="cancel" value="重填"/><br>
    		<input type="submit" id="no" name="no" value="无动作" /><br>
    	</form>
    	
    </body>
    </html>
    
    

    **lable:**定义标签
    属性:
    for属性:将某个表单控件的id值赋给for,就可以将此lable与此元素联接
    select和option元素:设置下拉框,option是下拉框内的选项
    属性:
    disable:设置禁止使用该列表框和下拉框
    multiple:设置此下拉框否允许多选,一旦设置为允许多选,就会生成列表框
    size:指定列表框内可以同时显示几个元素
    **option:**用于定义列表框选项和菜单项
    optgroup:用于定义列表项和菜单项组,该元素下包含的option元素属于该分组
    disable:指定禁止用该项
    selected:指定该列表初始项是否处于被选中状态
    value:指定该选项对应的请求参数值

    <form action="#" method="post">
    	下面是一个下拉菜单:<br>
    	<select name="skills" id="skills">
    		<option value="java">java语言</option>
    		<option value="c">c语言</option>
    		<option value="rudy"> rudy语言</option>
    	</select><br>
    	<br>
    	<br>
    	下面是允许多选的列表框:<br>
    	<select name="books" id="books" size="4" multiple="multiple">
    		<option value="java">java语言</option>
    		<option value="Android">Android语言</option>
    		<option value="ee">轻量级java语言</option>
    	</select><br><br>
    
    	下面是允许多选的列表框:<br>
    	<select name="leegang" id="leegang" multiple size="6">
    		<optgroup label="疯狂的java板块一">
    			<option value="java"> java语言</option>
    			<option value="Android">Android语言</option>
    			<option value="ee">eejava轻量级语言</option>
    		</optgroup>
    		<optgroup label="其他图书">
    			<option value="sture"> sture书</option>
    			<option value="book1"> 其他图书1</option>
    			<option value="book2">其他图书2</option>
    		</optgroup>
    	</select>
    
    </form>
    

    HTML5增强的textarea :用于生成多行的文本域
    属性:
    **cols:**指定文本域的宽度
    rows:指定文本域的高度
    disable:指定禁止使用该文本域
    **readonly:**指定该文本域只读
    **maxlength:**设置文本域中最多可以输入的字符数
    wrap:指定多行文本域是否添加换行符,属性值:soft/hard
    fieldset和legend元素:用于对表单内的元素进行分组,放在fieldset内浏览器会用特殊的方式来显示,legend对不同部分的分组进行文字说明

    HTML5新增的表单属性

    formaction属性:当一个页面里有两个提交按钮时,不用的按钮需要将信息提交到不同的action下,可以给按钮添加此属性
    autofocus 属性:当某个表单控件获得此属性后,浏览器打开页面时该控件会自动获取焦点
    placeholder 属性: 当用户还未在输入框内输入内容时,输入框内显示提示内容,开始输入时,提示信息会消失

    	<form method="post">
    		username: <input type="text" name="name" placeholder="请输入用户名" /><br>
    		password: <input type="password" name="password" autofocus="true" placeholder="请输入密码" /><br>
    		<input type="submit" value="login" formaction="login" /> <br>
    		<input type="submit" value="sign_in" formaction="regist"/>
    	</form>
    

    **list和datalist属性:**此属性与文本输入框结合,相当于一个下拉框,既可以手动输入内容,可以下拉选择,要求:datalist的id值必须与输入框的list值相同

    <form action="#" >
    		请输入图书:<input type="text" name="name" list="books11" /><p><br>
    		<input type="submit" value="购买" />
    		<datalist id="books11"> 
    			<option value="java"> java语言</option>
    			<option value="Android">Android语言</option>
    			<option value="ee">eejava轻量级语言</option>
    		</datalist>
    	</form>
    

    HTML5新增的表单元素

    功能丰富的input:type属性值{color(颜色选择器)、date(日期选择器)、time(时间选择器)、datatime-local(本地日期时间选择器)、week(供用户选择第几周的文本框)、month(月份选择器)(max:指定日期时间的最大值;step:指定日期时间的步长)、valueAsDate(获取从1970年1月1日0时0分0秒经历了多少毫秒)、email(email输入框)、tel(手机号输入框)、url(url输入框)、number(之能输入数字的文本框)、range(让input生产一个托条,让用户只能输入指定范围指定步长的值)、search(生成用于输入搜索关键字的文本框,之类文本框只适用于手机设备)}
    output :用于限制指定元素的输出值,用for属性来入其他元素链接

    HTML5新增的客户端校验

    required:指定空间必须填写
    **pattern:**指定空间必须符合指定的正则表达式
    **min、max、step:**对日期时间数值型元素进行校验
    调用checkValidity 方法进行校验

    <form action="#" method="post">
    		生日:<input type="date" id="birth" name="birth" /><br>
    		邮箱地址:<input type="email" id="email" name="email" /><br>
    		<input type="button" value="提交" onclick="return check();"/>
    	</form>
    	<div id="demo"></div>
    	<script type="text/javascript">
    		var check=function(){
    			return commonCheck("birth" ,"生日" ,"此字段必须是有效日期")&&commonCheck("email","邮箱地址","此字段必须符合电子邮件的格式");
    
    		}
    		var commonCheck=function(field,fieldname,tip){
    			var targetEle=document.getElementById(field);
    
    			if(targetEle.value.trim()==""){
    				var html = document.getElementById("demo").innerHTML+fieldname+'是空的 ';
    				
    				document.getElementById("demo").innerHTML = html;
    				return flase;
    			}else if(!targetEle.checkValidity()){
    				alert(fieldname+tip);
    				return flase;
    			}
    			return true;
    		}
    	</script>
    
    展开全文
  • 使用 FormBuilder 来生成表单控件

    千次阅读 2019-02-22 18:29:22
    FormBuilder 服务提供了一些便捷方法来生成表单控件FormBuilder在幕后也使用同样的方式来创建和返回这些实例,只是用起来更简单。 下面会重构 ProfileEditor 组件,用FormBuilder 来代替手工创建这些 Form...

    FormBuilder 服务提供了一些便捷方法来生成表单控件。

    FormBuilder在幕后也使用同样的方式来创建和返回这些实例,只是用起来更简单。 下面会重构 ProfileEditor 组件,用FormBuilder 来代替手工创建这些 FormControl 和 FormGroup。

     Step 1 - 导入 FormBuilder 类

    import { FormBuilder } from '@angular/forms';

     

    Step 2 - 注入FormBuild 服务

    constructor(private fb: FormBuilder) { }

    Step 3- 生成表单控件

    FormBuilder 服务有三个方法:control()、group() 和 array()。这些方法都是工厂方法,用于在组件类中分别生成
    FormControl、FormGroup 和 FormArray。

    你可以使用 group() 方法,用和前面一样的名字来定义这些属性。这里,每个控件名对应的值都是一个数组,这个数组中的第一项是其初始值。你可以只使用初始值来定义控件,但是如果你的控件还需要同步或异步验证器,那就在这个数组中的第二项和第三项提供同步和异步验证器。

    import { Component } from '@angular/core';
    import { FormBuilder } from '@angular/forms';
     
    @Component({
      selector: 'app-accounting-subject-dialog',
      templateUrl: './app-accounting-subject-dialog.html',
      styleUrls: ['./app-accounting-subject-dialog.css']
    })
    export class ProfileEditorComponent {
      form: FormGroup;
    
      constructor(
            private i18n: TranslateService,
            private fb: FormBuilder,
            private metisService: MetisService,
            @Inject(MAT_DIALOG_DATA) private data: { type: AccountingBusinessType, isEdit: boolean, node?: NzTreeNode, expandDataCache },
            private dialogRef: MatDialogRef<AccountingSubjectDialogComponent>,
        ) {
          this.form = this.fb.group({
                status: [false],
                id: [null],
                code: [null, [
                        Validators.required, Validators.pattern(/^\d+$/), this.numberLengthValidator(level),
                        this.checkCodeRepeatValidator()
                    ]], // 科目编码
                name: [null, Validators.required], // 科目名称
                parentName: [null], // 父级
                type: [null, Validators.required], // 科目类别
                term: [null], // 报送周期
                interCode: [null], // 内部机构号
                accountingType: [this.accountingType.DEBIT], // 余额方向
            }); });
    
      }
    }
    

     

    展开全文
  • form表单日期输入控件

    2019-03-01 12:57:07
    form表单日期输入控件,用于输入form表单中的日期时间。
  • 2.在Form类下面添加实例化 public static Form1 form1; 3.在From1方法下给form1赋值 form1 = this; public partial class Form1:Form{ public static Form1 form1; public Form1(){ InitializeComponent(); ...

    1.将需要调用的控件Modifiers属性修改为Public;
    2.在Form类下面添加实例化 public static Form1 form1;
    3.在From1方法下给form1赋值 form1 = this;

    public partial class Form1:Form{
        public static Form1 form1;
        public Form1(){
            InitializeComponent();
            form1 = this;
        }
    }

    2-3步示例



    4.在外部类添加引用 using static 命名空间.Form1;
    5.然后就可以使用实例化的form1对象修改Form1的控件.

    展开全文
  • form超强日历控件

    千次阅读 2010-07-20 14:01:00
    日历控件

     

    1 介绍
    就如您看到了截图一样,这是一个可以记录您的约会和特殊事件的日历控件。它有很多特性使得你可以控制将要发生的事件,像闹铃等。这里为您提供了100%的代码,使得您可以方便的引用到您的工程使它开始工作。
    2 背景
    我发现了一些类似的控件,但是它并不能满足我的需求,所以自己实现了需要的功能。你可以很好的使用它,但是更多的您可以在它的基础上进行扩展。
    3 利用代码
    如果需要添加一个Calendar,您只需将Calendar控件拖拽到您的form上就可以了,它位于System.Windows.Forms.Calendar空间下。
    4 什么时候使用它
    它可以用来记录任何日期的事件,当然并不只是约会和会议,想象一下会有多么丑陋的控件会出现在你的系统里。
    5 控制试图
    这个日历的试图是通过ViewStart和ViewEnd这两个属性提供的区间来提供的。这个日历会描绘这两天之间所有的日期。
    这款日历控件可以通过两种模式来显示日期:Expanded和Short(参见Calendar.DayMode).Expanded是类似第一个截图似的模式。每一天以列的形式显示出来,所有的项目都放在当天下的时间内。对于Short模式(第二个截图)这个是周别的视图,所有的项目以更紧凑的形式展示出来。
    另外一个比较重要的属性是MaximunFullDays(默认8),这个属性意味着当你选择的日期视图为8天甚至更少时这个日历空间以Expanded模式显示,如果大于8天的话则以Short模式显示。
    6 填充日历项目
    你可以通过LoadItems事件为这个日历添加项目。在这个事件中,你可以加入一些信息来标记你加入的项目。这些事件可以在规定时间里引起试图的变化。这里我强烈建议您通过缓存而不是数据库来触发这些事件因为这样用户的界面交互将受到严重影响。
    这个demo的事件使用的一个数组,所以不是一个很好的例子。

    我强烈建议您在日历上添加一个交错的日期事件。你可以通过DateIntersects的实现去检查它们。


    7 事件
    当你想要利用我列出来的事件智能感知来开发,那么下边的事件将有助于你控制你的应用程序。
    DayHeaderClick: 当一天的日期头被单击时触发
    ItemClick: 当一个项目被单击时触发.
    ItemCreated: 当一个项目被成功创建时触发.
    ItemCreating: 当用户想要创建一个项目,但是被取消的时候触发.
    ItemDatesChanged: 当一个项目的时间区间改变时触发.
    ItemDeleted: 当一个项目被成功删除时触发.
    ItemDeleting: 当用户想要删除一个项目但是被取消时触发.
    ItemDoubleClick: 当一个项目被双击时触发.
    ItemMouseHover: 当一个鼠标滑过一个项目时触发。.
    ItemSelected: 当一个项目被选中时触发.
    ItemTextEdited: 当一个项目被编辑时触发
    ItemTextEditing: 当用户试图编辑一个项目但是被取消的时候触发.
    LoadItems: 当日历被改变时触发.

    8 一些比较好的特性
    a 项目重叠
    当一些项目在日期上互相交互时,这里有一个很好的算法将布局去适应它们,可以尝试一下。
    b 项目颜色
    当日历控件渲染这些项目时,你可以对项目选择单独的背景和边框。
    甚至,你可以通过对一个项目使用ApplyColor方法(CalendarItem),通过代码你可以对一个项目的背景,边框字体设置阴影等。在这个demo中是通过日历控件的上下文去适应项目颜色的。

    9 时间刻度
    对于Outlook的日历的话刻度时30分钟,但是这里你试可以通过选项选择时间刻度。下图是间隔为15分钟的日历。


    在这个demo中,你可以利用日历上下文的选项去选择不同的时间刻度。

    10 月别视图控件
    对于月别的视图,不要绝对的讨厌它出现在您的系统UI上。这里就有一个解决方案,这个工程中有一个Control叫做MonthView,乍一看类似于Outlook的日历,完全的用户话,同时它并不强制控件的大小。这个控件的可用大小依靠于容器的大小。
    对于这个控件一些有趣的属性:
    FirstDayOfWeek:可以改变每一周从哪一天开始
    ItemPadding:设置项目和边框的大小,这样你可以做一个比较紧凑的布局
    SelectionModel:手动,日期,周,工作日和月
    WorkWeekStart:标记工作日从哪天开始
    WorkWeekEnd:标记工作日哪天结束


    展开全文
  • 动态设置Ext.form.FormPanel控件里子控件的显示和隐藏 标签: layoutborderfunction 2010-12-20 10:25 11992人阅读 评论(1) 收藏 举报  分类: Extjs(11)  版权声明:本文为博主...
  • Form中的控件添加漂亮的边框

    千次阅读 2007-02-27 20:32:00
    ,发现 Form 中的 Text, Table 等控件都没有了边框,变成了空白。 而把创建控件的代码,加上 SWT.BORDER,显示的是三维凹陷的边框,不符合我的要求,我想要 PDE 那样的效果。 查看 Eclipse 源码,发现以下段: ...
  • (1)、asp.net页面多个form,一个主form是runat="server"的,而其他都是有action的客户端form,(2)、服务器控件必须放在里的,服务端form只是为了回发,而若是做网站前台,一般是不需要此功能的。(3)、注意母版页的...
  • 我编辑了一个定义控件,是一个单独的DLL, 在一个项目中的Form添加定义控件后,编译后可正常使用, 可再次打开该项目并打开该Form设计时,vs直接关闭掉 请问该问题怎么处理?
  • 2.第二个问题,静态函数,如何操作Form中的控件? public static Form1 form1;   public Form1() {  InitializeComponent();    form1 = this; } state.workSocket = handler; handler.BeginReceiv...
  • C#实现在Form1的SplitContainer控件Form2的按钮打开Form3问题描述解决方法 问题描述 C#实现在Form1的SplitContainer控件Form2的按钮打开Form3,Form2和Form3都在Form1的SplitContainer中。Form1的SplitConTainer...
  • AutoComplete,ant design form表单
  • AngularJS form $addControl 注册控件control

    千次阅读 2014-12-21 17:11:22
    AngularJS form $addControl 注册控件control
  • antd自定义form表单控件

    千次阅读 2020-06-03 18:02:26
    用 getFieldDecorator 方法包裹的表单控件会自动添加 value (或由 valuePropName 指定的属性名) 和 onChange (或由 trigger 指定的属性名)属性, value 接收 form 传入的值, onChange 将控件的值回调到 form 中。...
  • el-row要慎用,可能会导致el-form 中的控件点击没反应,就是根本都不会获取到焦点,解决办法: 1、删掉所有的el-row 2、在某些地方添加el-row,详见CDP文件 ...
  • 首先,需要向项目中的reference添加两个dll,一个是.NET库中的System.Windows.Forms,另外一个是WindowsFormsIntegration...添加完两个dll以后,就可以在控件库中找到WindowsFormsHost这个控件了。这个控件是我们添...
  • form表单日期输入控件,用于输入form表单中的日期时间。
  • C# Form,Control 控件序列化

    千次阅读 2014-03-15 14:19:17
    对什么序列化无关紧要,但是,如果将要被序列化的对象不支持序列化(即使指定了Serializable),那么这个对象一定要实现自定义序列化,还是拿Form来说吧,它是不支持序列化的,那么对它进行如下的修改后就可以被序列化...
  • 经测试System.Web.UI.HtmlControls下的HtmlForm类,也就是我们在传统的asp.net中使用的Form表单对象,不适合动态生成Html代码。于是自定义了一个简单的HtmlForm容器控件,只需要几行代码。看来Asp.net在封装Html元素...
  • reporting控件无法显示在form上我遇到的问题出在“引用”上 我遇到的问题出在“引用”上 在“引用”里保证要有下面几个ddl: 1.Microsoft.ReportViewer.WinForms.dll 2.Microsoft.ReportViewer.Common.dll //这两个...
  • c# Form中向DataGridView控件添加数据的三种方式1.利用SqlDataAdapter对象向DataGridView中添加数据using (SqlDataAdapter da = new SqlDataAdapter("select * from Product", DBService.Conn)) { DataSet ds = new...
  • c#WinForm下窗体权限设计(遍历菜单下的所有菜单及所有formform中的控件) WinForm下窗体权限设计   一、  描述 管理员通过控制窗体中的某个控件的Enable和visable来达到应用程序的权限控制 二...
  • VB6 FORM窗体上控件实现滚动的方法

    万次阅读 2014-09-09 13:54:06
    当所包含的图形超过控件范围时,单独一个 PictureBox 控件无法实现滚动功能─ 因为 PictureBox 控件不能自动添加滚动条。 应用程序使用两个图片框。称第一个为平稳的父 PictureBox 控件。称第二个为子 PictureBox
  • 添加控件 Dim pc1 As New CheckBox pc1.Text = "FX-A01" pc1.Checked = True pc1.Location = New System.Drawing.Point(10, 0) pc1.Width = 80 Me.Controls.Add(pc1
  • //增加tabpage TabPage tbp = new TabPage(); tbp.Name = type + no; tbp.Text = " "; Form_孔ID form = new Form_孔ID();
  • C#Form控件的最大化

    千次阅读 2017-02-22 20:34:34
    C#窗体应用程序常用作windows上位机软件,入门简单且学习起来方便,今日突然想使得From中的控件Form的大小等比例缩放。通过查阅相关资料,和以前的相关C#实验,完成了当窗体最大化时,其上的所有控件也随着变大,...
  • form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件(如input、select、radio、checkbox等),还有一些js脚本,加载速度还可以,都能全部显示完毕,但是点击一些事件(如切换tab、...
  • windowsform中的控件调用--1

    千次阅读 2014-10-02 23:13:40
    public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { Thread thread = new Thread(ThreadFuntion); thread....
  • C# form 设置控件焦点

    2013-04-20 22:07:39
    private void ForFocus(object sender, PaintEventArgs e)  {  this.txtPwd.Focus(); 控件名称  } ...在form 事件中找到Paint 添加ForFocus     更多资料 请看http://zj258.xicp.net/

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 124,921
精华内容 49,968
关键字:

formvs添加控件