WebForm 【简单控件】【表单元素】

 

 

一、HTML 表单元素复习

 

（1）文本类

  文本框：<input type="text" name="" id="" value=""/>

  密码框：<input type="password" name="" id="" value=""/>

  文本框：<textarea name="" id="" cols=""(字符多少)  rows=""(几行高)>        </textarea>

  隐藏域：<input type="hidden" name="" id="" value=""/>

（2）按钮类

  提交按钮：<input type="submit" name="" id="" disable="disable" value=""/>点击后转到form内的提交服务器地址

  重置按钮：<input type="reset" name="" id="" disable="disable" value=""/>

  普通按钮：<input type="button" name="" id="" disable="disable" value=""/>

  图片按钮：<input type="image" name="" id="" disable="disable" value="" src="图片地址"/>

（3）选择类

  单选按钮组：<input type="radio" name="" id="" checked="checked" value=""/>

                                                    --  name的值用来分组；value的值看不见，用来提交给程序；checked，设置默认选项

  复选框组：<input type="checkbox" name="" id="" checked="checked" value=""/>

 

 下拉列表框：<select name =""  id=""  size=""  multiple="multiple">      -- ize=1时，为菜单；>1时，为列表；multiple为多选。

                       <option value="值">内容1</option>

                       <option value="值"  selected="selected">内容2</option>     -- seleted,设为默认

                       <option value="值">内容3</option>

                  </select>

 

文件上传：<input type="file" name="" id="">

                                                                            --  表单元素在后头用 name 去取值

                                                                            --  控件在后台用 ID 取值                            

 

 

 

二 、WebForm 中常用好用的简单控件

    Label  

<asp:Label ID="Label1" runat="server" Text="Label">    </asp:Label>

                                                 

                                                  -- 编译后为 <span>  </span>

<style type="text/css">

  .la1 {
            width: 200px;
            height: 50px;
            background-color: red;
           border: 5px solid  navy ;

           display: inline-block              -- 变为块状模式
        }

 </style>

 

<asp:Label ID="Label1" runat="server" Text="Label" cssclass=" la1 ">    </asp:Label>

   

   --  每个控件最终都会被编译成 HTML，可以用样式去修改样式，不要在用控件属性（冗余）

 

Literal 

<asp:Literal ID="Literal1" runat="server">     </asp:Literal>

       

                                                               -- 编译后  空

 

<asp:Literal ID="Literal2" runat="server" Text = " 内容"  ></asp:Literal>

                                                        -- 可以在后台对 JS 进行编写，原封不动的输送到界面上去。

例：在后台

 Literal1.Text = " < script > 　alert( ' 失败！')；　< script >"；

　　　　　　　　　　　　　　　　　　　                            　-- 会弹出警告对话框

 TextBox 

  <asp:TextBox ID="TextBox1" runat="server">     </asp:TextBox>

 

                                                                                             -- 编译后为 文本框

控件属性

    Enabled="false"          禁用

    ReadOnly="true"         只读

    MaxLength="6"           最大可输入6位数

 

   TexMode="SingLine"     单行  　     

                                                        -- 编译后为    文本框

   TexMode="PassWord"   密码遮盖

                                                      -- 有此属性编译后为   密码框

   TexMode="MultiLine"     多行

　                                                    -- 有此属性编译后为   文本域

 HiddenField 

<asp:HiddenField ID="HiddenField1" runat="server" />

                                                                                  -- 编译后为  隐藏域

-- 没有 Text属性，内容用 Value。 Value=" 内容 "

 

 Button 

 <asp:Button ID="Button2" runat="server" Text="Button" />    

                                                                                    -- 编译后为   提交按钮

  ImageButton   

<asp:ImageButton ID="ImageButton1" runat="server" />

                                                                                -- 编译后为  图片按钮

属性 

     ImageUrl = " 图片路径 " ;