一.案例
新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
</head>
<body>
<form action="#">
<table border="1" cellpadding="1" cellspacing= "0" width = 80% align = "center" >
<tbody>
<tr >
<th colspan = 3 align="left">1.会员登录名和密码</th>
</tr>
<tr>
<td align = "right">用户名:</td>
<td><input type="text" name = "username">*</td>
<td><input type = "button" value = "检测用户名"><a>5-15位,请使用英文(a-z,A-Z),数字(0-9)</a></td>
</tr>
<tr>
<td align = "right">密 码:</td>
<td><input type="password" name = "username">*</td>
<td><a>5-15位,请使用英文(a-z,A-Z),数字(0-9),注意区分大小写;</a><a>密码不能与登录名相同;易记;难猜</a></td>
</tr>
<tr>
<td align = "right">再次输入密码:</td>
<td><input type="password" name = "username">*</td>
<td><a>两次密码必须一致</a></td>
</tr>
<tr >
<th colspan = 3 align="left">2.姓名和联系方式</th>
</tr>
<tr>
<td align = "right">真实姓名用户名:</td>
<td><input type="text" name = "username">*</td>
<td><input type = "radio" name = "gender" value = "man">先生
<input type = "radio" name = "gender" value = "woman">女士</td>
</tr>
<tr>
<td align = "right">电子邮箱:</td>
<td><input type="text" name = "username">*</td>
<td><a>非常重要!</a><a>这是客户与您的首选方式,请一定要填写真实.</a></td>
</tr>
<tr>
<td align = "right">固定电话:</td>
<td><input type="text" name = "username">*</td>
<td><a>区号 + 电话号码</a></td>
</tr>
<tr>
<td align = "right">公司所在地:</td>
<td>
<select name = "country">
<option value = "bj" selected = "selected">北京</option>
<option value = "sh" >上海</option>
<option value = "gz" >广州</option>
<option value = "sz" >深圳</option>
</select>
<select name = "x">
<option value = "bj" selected = "selected">东城</option>
<option value = "xc" >西城</option>
<option value = "nc" >南城</option>
<option value = "bc" >北城</option>
</select></td>
</tr>
<tr>
<td align = "right">街道地址:</td>
<td><input type = "text" name = "jd" ><a>*</a></td>
<td><a>填写县(区),街道,门牌号</a></td>
</tr>
<tr>
<td align = "right">传真号码:</td>
<td colspan="2"><input type = "text" name = "cz" ></td>
</tr>
<tr>
<td align = "right">手机号码:</td>
<td colspan = "2"><input type = "text" name = "cz" ></td>
</tr>
<tr>
<td align = "right">邮政编码:</td>
<td colspan = "2"><input type = "text" name = "cz" ></td>
</tr>
<tr>
<th colspan="3" align = "left">3.公司名称和主营业务</th>
</tr>
<tr>
<td align = "right">贵公司名称:</td>
<td><input type = "text" name = "cz" >*</td>
<td>请填写在工商局注册的公司/商号全程;<br>
无工商号的个体经营者填写执照上的姓名,如:张三(个体经营)</td>
</tr>
<tr>
<td align = "right">你的职位:</td>
<td><input type = "text" name = "cz" >*</td>
</tr>
<tr>
<td align = "right">主营行业:</td>
<td><select>
<option selected = "selected" name = "dzdg">电子电工</option>
<option name = "rjgc">软件工程</option>
</select></td>
<td>请正确选择,您会收到该行业,该产品的供求信息</td>
</tr>
<tr>
<td align = "right">主营行业/服务:</td>
<td><input type = "text" name = "zycp">*</td>
<td>3个主要相关产品名/服务名,最少填写一个,例如:太阳帽,布料,拉链</td>
</tr>
<tr>
<td align = "right">公司网址:</td>
<td colspan="2"><input type = "text" name = "gswz" value = "http://"></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type = "submit" name = "gswz" value = "确认提交" ></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
二.表单案例
新建form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--方式一 -->
<!-- <script type="text/javascript">
alert("你好,世界");
</script> -->
<!-- 方式二 -->
<!-- <script type="text/javascript" src = "index.js"></script> -->
<div align = "center">
<form action="#" method = "get" id="formId" >
姓名<input type = "text" name = "name"><br>
年龄<input type = "number" name = "age"><br>
性别<input type = "radio" name = "gender" value = "man" checked>男
<input type = "radio" name = "gender" value = "woman">女
<input type = "radio" name = "gender" value = "none">不详
<br>
<!-- <input type = "submit" name = "tj" value = "提交"> -->
<!-- 方式三 -->
</form>
<button onclick = "javascript:submitForm();"></button>
</div>
</body>
</html>
新建instance.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单案例</title>
</head>
<body>
<div align="center">
<a href="form.html">新增</a>
</div>
<table border=1 cellpadding=0 cellspacing=0 width=60% align="center">
<tbody>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr align="center">
<td>10</td>
<td>乔峰</td>
<td>32</td>
<td>男</td>
<td><a href="form.html">编辑</a>|<a href="form.html">删除</a></td>
</tr>
<tr align="center">
<td>20</td>
<td>张无忌</td>
<td>26</td>
<td>男</td>
<td><a href="form.html">编辑</a>|<a href="form.html">删除</a></td>
</tr>
<tr align="center">
<td>30</td>
<td>东方姑娘</td>
<td>19</td>
<td>女</td>
<td><a href="form.html">编辑</a>|<a href="form.html">删除</a></td>
</tr>
</tbody>
<tfoot align="center">
<tr align="center">
<td colspan=5>首页 上一页 下一页 尾页 共103页</td>
</tr>
</tfoot>
</table>
</body>
</html>