![ASP.NET入门教程 3.5.2 HTML控件[2],第1张](/aiimages/ASP.NET%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B+3.5.2+HTML%E6%8E%A7%E4%BB%B6%5B2%5D.png "ASP.NET入门教程 3.5.2 HTML控件[2],第1张")
将HTML控件用作Server控件
可以将任何HTML元素转换为服务器控件 只要为该元素添加runat= server 属性即可 如将在第 章看到的那样 当页面提交到服务器的时候 可以使用代码动态地处理任何服务器控件（由HTML元素转换而来的或ASP NET的） 例如 在向页面添加了一个ASP NET TextBox控件之后 可以使用在服务器上运行的代码设置该控件文本区显示的值 然而 一旦为某个元素添加了runat= server 属性（并为其指定一个惟一的ID） 例如一个div元素 接下来就可以使用运行在服务器上的代码动态地指定这个div要显示什么 以及应将它放置在什么位置
另外 因为可以向任意HTML元素添加runat= server 属性 所以如果喜欢 可以使用Input type= text 控件代替ASP NET的TextBox控件──其他HTML元素只要在ASP NET工具箱中有对应的控件都可以这样使用
应该使用HTML控件还是ASP NET服务器控件
这个问题实际上只与页面上简单的元素有关 例如文本框 按钮和表格等 复杂的服务器控件 例如Calendar控件 用户加速站点的开发速度 因此这种情况下不用考虑具体使用哪种控件 在选择向页面添加哪种类型的控件时 绝大多数开发人员的方法是在页面上主要使用ASP NET的Standard Server Control 而在布局时使用静态HTML元素
虽然在大多数情况下都可以这样做（而且确实在有些情况下需要使用服务器控件才能获得HTML控件无法提供的功能） 但也有例外的情况 例如 向HTML div和table元素添加runat= server 是作者通常使用的一种技术 如果我知道我希望根据用户的输入显示或隐藏页面的某部分 就可以把需要在服务器上处理的元素转换为服务器控件 然后动态地控制它们的可视性 虽然使用标准的服务器控件也很容易创建具有相同功能的站点 但我所在的工作小组只使用简单的HTML元素进行布局 因此有时将某些HTML元素转换为服务器控件比重写代码使用ASP NET内建的服务器控件要容易一些 在这个问题上没有真正的对与错 所以应该根据自己的判断进行选择 但应该注意到 可能会遇到使用其他方法编写的代码 这些方法仍然是有效可行的
ASP NET 入门教程完整版
lishixinzhi/Article/program/net/201311/14697
以点击按钮，改变按钮元素的内容为案例，点击的时候 ”按钮“ 变为 ”hello“
1、通过js获取元素，例如，获取元素btn按钮
2、通过js，当点击按钮的时候，改变原来的值为“hello”
3、运行效果如下：
4、点击按钮之后的效果：
完整的html代码如下：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{
width:400px
height:300px
background:#000
position:relative
}
a.btn1{
display:block
width:140px
height:40px
line-height:40px
text-align:center
background:#ff0099
color:#fff
position:absolute
left:100px
top:100px
}
</style>
</head>
<body>
<div class="wrap">
<a href="javascript:" class="btn1" id="btn">按钮</a>
</div>
<script type="text/javascript">
var oBtn= document.getElementById("btn")
oBtn.onclick=function(){
oBtn.innerHTML="hello"
}
</script>
</body>
</html>
创建一个简单的input标签实现网页上的输入框效果。
添加输入框的步骤如下：
<input>标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
工具：编辑器、浏览器
1、创建一个简单的input标签实现网页上的输入框效果，代码如下：
1 First name: <input type="text" name="fname" />2 Last name: <input type="text" name="lname" />3 <input type="submit" value="Submit" />
2、以上代码中type=text是文本的输入框，type=submit是一个提交按钮，运行的效果如下图：
添加多个输入框的方法如下：
<input id="input_template" name="name" maxlength="7" type="text" style="width: 120px">
<!-- 这里是一个模版，追加的时候用来克隆的。 -->
$('#addBtn').bind('click', function() {
var input_ = $("#input_template").clone()
$("#input_container").append(input_)
})
<!-- 需要注意的是，在追加的时候，或者追加之后，把追加元素imput的name和id重置一下。 -->
