表单元素,简单控件,复合控件

十二个表单元素:

文本类:

<input type="text" />//普通的文本框
<input type="password" />//密码框
<textarea><textarea />//可多行编辑的文本域
<input type="hidden" />//隐藏域

选择类:

<input type="radio" id="i" /><label for="i">aaaa<label />//单选框,id相同的互斥,label内显示单选框的内容,for点击文字也可选中
<input type="checkbox" />//复选框
<select><option>aaa<option /><select />//下拉菜单,每一个option都是一行
<input type="file" />//文件选择

按钮类:

<input type="button" value="aaaa"/>//纯按钮,value显示按钮的文本
<input type="submit" />//提交按钮
<input type="image" />//图片按钮
<input type="reset" />//清空按钮

简单控件:

//Lable,Text修改要显示的内容,也可以写在中间,CssClass样式表
<asp:Label ID="Label1" runat="server" Text="Label" CssClass="aaa"></asp:Label>
//网页中显示
<span id="Label1">Label</span>
//Literal
<asp:Literal ID="Literal1" runat="server" Text="bbbb"></asp:Literal>
//在网页中直接显示Text的内容
//Button
<asp:Button ID="Button1" runat="server" Text="Button" />
//在网页中直接显示submit
<input type="submit" name="Button1" value="Button" id="Button1" />
//imageButton在网页中直接被编译成image

//TextBox控件;就是text,加个TextMode="password"变成密码框,加个TextMode="MultiLine"变成文本域,
//HiddenField控件;隐藏域,对应隐藏文本框

//控件的id就是取控件的id,被编译到网页对应的name相同//visbile = "false"直接隐藏,网页中也不显示//利用css隐藏,网页中显示代码并隐藏;

TextBox的Text属性的值是什么,启动的时候TextBox里的值就是什么;

TextBox的ReadOnly属性只读;

HiddenField的值是value;

复合控件:

Radio

RadioButton控件:

Text="男"后面显示的内容

GroupName="aa" 相同的互斥

Checked ="true" 默认选中一项

取值RadioButton.Checked;

RadioButtonList控件:

取值RadioButtonList.SelectValues;

集合数据库取值:

.DataSource绑数据源

.DataTextField;要显示的数据;

.DataValueField;需要隐藏的值;

==============

//判断是不是第一次加载,如果是走,如果不是不走,点击事件不要加到这里面if (IsPostBack == false)
        {
            using (DBDataContext con = new DBDataContext())
            {
                List<Users> ulist = con.Users.ToList();
                foreach (Users u in ulist)
                {
                    ListItem li = new ListItem(u.NickName, u.UserName);
                    RadioBotton.Items.Add(li);
                }

            }
        }

默认互斥

Checkbox控件

和radiobutton一样

CheckeBoxList控件

和radiobottonlist一样

取值:需要遍历

foreach(ListItem li in CheckBoxList.Items)

{

  if(li.Selected)

    {

      label1.text +=li.value+"\";

    }

}

Select Option

DropDownList控件

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"></asp:DropDownList>

和CheckedBoxList一样

取值需要加AutoPostBack="true"

size属性显示多少行;

selectionmode="multiple"属性多选

ListBox控件

时间: 2024-10-13 09:34:34

表单元素,简单控件,复合控件的相关文章

2017年12月17日 ASP.NET 12个表单元素&amp;&amp;简单控件/复合控件

12个表单元素可以分为三大类 第一类:文本类 <input type = "text" /> //普通文本框 <input type = "password" /> //密码文本框 <input type = "hidden" /> //隐藏域 <textrea></textrea> //可变动文本框 第二类:按钮类 <input type = "button"

easy ui 表单元素input控件后面加说明(红色)

<%-- 上传图片到图库基本信息且将图片关联到图集 开始--%> <div id="win_AddPicLib" class="easyui-window" title="添加图片信息" data-options="top:'30%'" style="width: 800px; height: 350; padding: 5px;"> <div style="padd

Html5之基础-9 HTML表单、其他控件、其他常用标记

一.表单概述 表单的作用 (1) 表单用于显示.收集信息,并提交信息到服务器 (2) 表单有两个基本部分 - 实现数据交互的可见的界面元素,比如文本框或按钮 - 提交后的表单处理 (3) 页面元素 - 使用 <form> 元素创建表单 - 在 <form> 元素中添加其他表单可以包含的控件元素 如图: 表单元素 <form> (1) 定义表单:使用成对的 <form></form>标记 (2) 主要属性 - action:  定义表单被提交时发生

(三)关于kendo IU表单form各类控件的数据绑定

=====================input textarea============================= <div id="view"> <input data-bind="value: inputValue" /> <textarea data-bind="value: textareaValue"></textarea> </div> <script&g

[转]html5表单上传控件Files API

表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:<input type="file" multiple> 只允许上传一个文件:<input  type="file" single> 2.上传指定的文件格式 <input type="file" accept="im

可以被提交的表单元素简单介绍

可以被提交的表单元素简单介绍: 既然是表单元素,那就是随时准备被提交的,但是有时候一些表单元素被设置了一定的属性之后就不能够被提交了,下面介绍一下设置了设置哪些属性之后表单元素不能够被提交. 不能够被提交: <input type="text" name="antzone" disabled/> 以上两个文本框的将不会被提交.可以被提交: <input type="text" name="antzone" r

响应式的账号登录界面模板完整代码,内置form表单和js控件

响应式的账号登录界面模板,内置form表单和js控件 1 <!DOCTYPE html> 2 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <link type="text/css" rel="styleSheet"

Extjs4——表单与输入控件

1.表单的简单形式: var form = new Ext.form.FormPanel({ title: 'form', defaultType: 'textfield', buttonAlign: 'center', frame: true, width: 220, fieldDefaults: { labelAlign: 'right', labelWidth: 70 }, items: [{ fieldLabel: '文本框' }], buttons: [{ text: '按钮' }]

深入浅出ExtJS 第四章 表单与输入控件(未完)

1 4.1 制作表单 2 var form = new Ext.form.FormPanel({ 3 title:'form', 4 defaultType:'textfield', 5 buttonAlign:'center', 6 frame:true, 7 width:220, 8 fieldDefaults:{ 9 labelAlign:'right', 10 labelWidth:70 11 }, 12 tiems:[{ //子组件; 13 fieldLabel:'文本框' //文本框

.Net Core使用视图组件(ViewComponent)封装表单文本框控件

实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: 1 <form class="form-horizontal" role="form"> 2 <div class="row"> 3 <div class="form-group col-md-4"> 4 <label for