1. 创建表单是为了满足用户向服务器发送数据的需求。
2. HTML表单是通过<form/>元素定义的,特性如下:
(1)method 浏览器发送GET请求或是POST请求
(2)action 表单所要提交到的地址URL
(3)enctype 想服务器端发送数据时,数据应该使用的编码方法。如果要上传文件,设置成multipart/form-data
(4)accept 当上传文件时,列出服务器能正确处理的mime类型。
(5)accept-charset 当提交数据时,列出服务器接受的字符编码
3. 文本框事件:
change 当用户更改内容后文本框失去焦点时发生 blur失去焦点就触发
select 当一个或多个字符被选中时发生
如果文本不变,但文本框失去焦点,那么只有blur事件被触发;如果文本发生变化,则先触发change事件,在触发blur事件
<input type="text" id="txt1" value="xxxx" οnblur="alert('blur')" οnchange="alert('change')"> <br />
4. 列表框和组合框
<select id="selAge" name="selAge" size="3">
<option value="1">18-21</option> value用来确定控件所有可能的值,所选的选项可将它的value指定
<option value="2">22-25</option> 给控件,发送到服务器。
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over</option>
</select>
5. 对单列表格进行排序
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function sortTable(sTableID)
{
var oTable=document.getElementById("tblSort");
var oTBody=oTable.tBodies[0];
var colDataRows=oTBody.rows; //rows是个DOM集合,并非数组,不能用sort()方法。
var aTRs=new Array;
for(var i=0;i<colDataRows.length;i++){
aTRs.push(colDataRows[i]);
}
aTRs.sort(compareTRs);
var oFragment=document.createDocumentFragment();
for(var i=0;i<aTRs.length;i++){
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
function compareTRs(oTR1,oTR2)
{
var sValue1=oTR1.cells[0].firstChild.nodeValue;
var sValue2=oTR2.cells[0].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
}
</script>
</head>
<body>
<input type="button" value="点击" οnclick="sortTable(tblSort)">
<table border="1" id="tblSort">
<thead>
<tr>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
</tr>
<tr>
<td>Johnson</td>
</tr>
<tr>
<td>Henderson</td>
</tr>
<tr>
<td>Williams</td>
</tr>
<tr>
<td>Gilliam</td>
</tr>
<tr>
<td>Walker</td>
</tr>
</tbody>
</table>
</body>
</html>
6. 对多列表格进行排序
<html> <head> <title></title> <script language="javascript" type="text/javascript"> function sortTable(sTableID,iCol) { var oTable=document.getElementById(sTableID); var oTBody=oTable.tBodies[0]; var colDataRows=oTBody.rows; //rows是个DOM集合,并非数组,不能用sort()方法。 var aTRs=new Array; for(var i=0;i<colDataRows.length;i++){ aTRs[i]=colDataRows[i]; } aTRs.sort(generateCompareTRs(iCol)); var oFragment=document.createDocumentFragment(); for(var i=0;i<aTRs.length;i++){ oFragment.appendChild(aTRs[i]); } oTBody.appendChild(oFragment); } function generateCompareTRs(iCol) { return function compareTRs(oTR1,oTR2) { var sValue1=oTR1.cells[iCol].firstChild.nodeValue; var sValue2=oTR2.cells[iCol].firstChild.nodeValue; return sValue1.localeCompare(sValue2); } } </script> </head> <body> <table border="1" id="tblSort"> <thead> <tr> <th οnclick="sortTable('tblSort',0)" style="cursor:pointer">Last Name</th> <th οnclick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> </tr> <tr> <td>Johnson</td> <td>Betty</td> </tr> <tr> <td>Henderson</td> <td>Nathan</td> </tr> <tr> <td>Williams</td> <td>James</td> </tr> <tr> <td>Gilliam</td> <td>Michael</td> </tr> <tr> <td>Walker</td> <td>Matthew</td> </tr> </tbody> </table> </body> </html>