html控件集合。
1、button
a、可以直接用input,type=“button”
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
function fun(){
//这里写你要执行的语句
alert("这是调用函数");}
</script>
<body>
<input type="button" οnclick="fun()" value="wocaocaocaocao"></input>
</body>
</html>
b、可以用button
<script>
function fun(){
//这里写你要执行的语句
alert("这是调用函数");}
</script>
<body>
<button οnclick="fun()">wocaocaocao</button>
</body>
2、text
可以在事件里赋值
<script>
function fun(){
//这里写你要执行的语句
document.getElementById("txt1").value="abcd";
alert(document.getElementById("txt1").value);}
</script>
<body>
<button οnclick="fun()">wocaocaocao</button>
<input type="text" id="txt1" value=""/>
</body>
3.radio的用法
<script>
function baidu(){
var radios = document.getElementsByName("a");
for ( var i = 0; i < radios.length; i++) {
if (radios[i].checked==true) {
i++;
alert("你选中的是第"+i+"个单选框。值为:"+radios[--i].value);
}
}
}
</script>
<body>
<input type="radio" name="a" value="1"/>1
<input type="radio" name="a" value="2"/>2
<input type="radio" name="a" value="3"/>3
<input type="radio" name="a" value="4"/>4
<input type="button" onClick="baidu()" value="按下"/>
</body>
4.<\br>
<br> 可插入一个简单的换行符。
<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
5.checkbox的用法
<script>
function allCheck(node1){
var node=document.getElementsByName("mm");
for (var x = 0; x < node.length; x++) {
node[x].checked=node1.checked;
}
}
function chose(node){
var flag=true;//用于遍历是否是全部变量设置
var allM=document.getElementsByName("all")[0];
var node=document.getElementsByName("mm");
for (var x = 0; x < node.length; x++) {
if(node[x].checked==false){//只要有一个没选中,就退出遍历,标记设置为false
flag=false;
break;
}
}
if(flag){
allM.checked=true;
}else{
allM.checked=false;
}
}
function sumall(){
var sum=0;
var names=document.getElementsByName("mm");
for(var x=0;x<names.length;x++){
if(names[x].checked){//选中的全部加起来
sum=sum+parseInt(names[x].value);//将选中的值解析出来
}
}
document.getElementById("spanid").innerHTML=("总和为 "+sum+" 元").fontcolor("red");
}
</script>
<body>
商品列表:<br/>
笔记本电脑<input type="checkbox" name="mm" value="3000" οnclick="chose(this)" />3000
台式机<input type="checkbox" οnclick="chose(this)" name="mm" value="2900"/> 2900
路由器<input type="checkbox" οnclick="chose(this)" name="mm" value="90"/> 90
<br/>
家常用品<input type="checkbox" οnclick="chose(this)" name="mm" value="500"/>500
洗衣机<input type="checkbox" οnclick="chose(this)" name="mm" value="5600"/> 5600
<br/>全选<input type="checkbox" name="all" οnclick="allCheck(this)" />
<br/><input type="button" value="查看金额" name="btn" οnclick="sumall()"/> <span id="spanid"></span>
</body>
6.select控件
如果 multiple="false",那么select就是相当于wpf中的combobox,如果multiple="true",那么select控件就相当于listbox。
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select name="list" multiple="true" size="25" >
<option value= "1 " > 爱情片 </option>
<option value= "2 " > 动作片 </option>
<option value= "3 " > 战争片 </option>
<option value= "4 " > 恐怖片 </option>
<option value= "5 " > 喜剧片 </option>
<option value= "6 " > 伦理片 </option>
<option value= "7 " > 电视剧 </option>
<option value= "8 " > 动画片 </option>
<option value= "9 " > 其它 </option>
</select>
listbox 的 一个应用案例:
http://blog.csdn.net/So_CooL/article/details/1211440
7、表格
HTML 表格实例:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Adam | Johnson | 67 |
![Examples](https://i-blog.csdnimg.cn/blog_migrate/68a4e329acd7a2c4b59cbc1a36c97ef6.gif)
在线实例
表格
这个例子演示如何在 HTML 文档中创建表格。
(可以在本页底端找到更多实例。)
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格实例
实例
在浏览器显示如下::
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
实例
HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
实例
在浏览器显示如下: