你 可以岑考一下这个代码------
<html>
<head>
<title>
表格+表单
</title>
</head>
<body>
<h1 align="center">用户注册</h1>
<hr size="3" width="800" color="red">
<table border="0" align="center" width="600" height="300">
<tr>
<td>用户名:
</td>
<td><input type="text" name="name" size="5" maxlength="6">只能输入6位
</td>
</tr>
<tr>
<td>密码:
</td>
<td><input type="password" name="pass">
</td>
</tr>
<tr>
<td>性别:
</td>
<td><input type="radio" name="sex"><img src="images/Malegif" >男  <input type="radio" name="sex"><img src="images/Femalegif" >女
</td>
</tr>
<tr>
<td>来自于:
</td>
<td><select name="select">
<option name="aihao" value="pingpeng">安徽
<option name="aihao" value="pingpeng" selected>湖南
<option name="aihao" value="pingpeng">湖北
</select>
</td>
</tr>
<tr>
<td>爱好
</td>
<td><input type="checkbox" name="ai">篮球</br>
<input type="checkbox" name="ai">打乒乓</br>
<input type="checkbox" name="ai">游泳</br>
</td>
</tr>
<tr>
<td><input type="submit" value="提交注册信息">
</td>
<td><input type="reset" value="重新设置">
</td>
</tr>
</table>
</body>
</html>
html5中可以把table嵌套在form中就自然合并了。
<form>
<table border="1" cellpadding="5" style="border:2px #26FF26 solid;text-align:center;">
<tr><td rowspan="2">使用 rowspan 的栏位</td><td>表格栏位</td></tr>
<tr><td>表格栏位</td></tr>
</table>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#b {
text-align: center;
display: none;
}
</style>
<script>
var c;
function edit(a) {
c = a;
documentgetElementById('a')styledisplay = 'none';
documentgetElementById('b')styledisplay = 'block';
var input1 = documentgetElementById('input' + a);
var input3 = documentgetElementById('input3');
input3value = input1value;
}
function ok() {
documentgetElementById('a')styledisplay = 'block';
documentgetElementById('b')styledisplay = 'none';
var input0 = documentgetElementById('input' + c);
var input3 = documentgetElementById('input3');
input0value = input3value;
}
function submit() {
var input1 = documentgetElementById('input1');
var input2 = documentgetElementById('input2');
var span1 = documentgetElementById('span1');
var span1 = documentgetElementById('span1');
span1innerHTML = input1value;
span2innerHTML = input2value;
}
</script>
</head>
<body>
<div id="a">
<table align="center">
<tr>
<td>姓名</td>
<td><input type="text" id="input1" placeholder="请输入" />
<a href="javascript:edit(1)">编辑</a>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="input2" placeholder="请输入" />
<a href="javascript:edit(2)">编辑</a>
</td>
</tr>
<tr>
<td></td>
<td><button onclick="submit()">提交</button></td>
</tr>
</table>
<table align="center" border="1">
<tr>
<td>姓名</td>
<td><span id="span1"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><span id="span2"></span>
</td>
</tr>
</table>
</div>
<div id="b">
<input type="text" id="input3" placeholder="请输入" /><button onclick="ok()">确定</button>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）