2016-11-26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>表单练习</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body> <!--这是一个表单框架 method是提交的方式 action是要接收数据的服务器或者文件路径 enctype 上传文件的时候一定要加的属性，值是multipart/from-data 是固定的 --> <form name="form1" method="post" action="login.php" enctype="multipart/from-data"> <!--为表格设置宽度为600px 边框为1px 边框颜色是淡灰色 对齐方式是剧中对齐 cellpadding是设置单元格边线到内容的距离，这里设置了5px rules=all 就是合并单元格的边框线--> <table width="600" border="1" bordercolor="#f0f0f0" align="center" cellpadding="5" rules="all"> <tr> <!--让用户输入用户名和密码--> <td width="100" align="right">用户名：</td> <!--给一个单元格设置了宽度，下面的表格就可以不用设置宽度了--> <td><input type="text" name="username"/></td><!--文本型的编辑框--> </tr> <tr> <td align="right">密码：</td> <td ><input type="password" name="userpwd"/></td><!--密码类型的编辑框--> </tr> <!--下面的是单选框--> <tr> <td align="right">性别：</td> <td> <input type="radio" name="sex" value="男"/>男<!--第一个单选框--> <input type="radio" name="sex" value="女" checked="checked"/>女 <!--第二个单选框，这里加了一个checked="checked"意思是默认选中这一项--> </td> </tr> <!--下拉列表--> <tr> <td align="right">籍贯：</td> <td> <!--这里开始就是下拉列表--> <select name="city" style="width:100px"><!--用css样式设置列表的宽度--> <option value="北京市">北京市</option> <option value="天津市">天津市</option> <option value="重庆" selected="selected">重庆市</option> <!--selected="selecete" 意思是默认选中这一项--> </select> <!--这是列表的结束标记--> </td> </tr> <!--实现上传文件，功能要用javaScript才能实现--> <tr> <td align="center">上传头像：</td> <td><input type="file" name="uploadFile"/></td> <!--弄一个上传文件的按钮 命名为uploadFile--> </tr> <tr> <td> </td> <!--这里是提交表单和重新填写的功能实现--> <td> <input type="submit" value="提交表单"/> <input type="reset" value="重新填写"/> <input type="hidden" name="id" value="1263"/> <!--hidden 是隐藏区域 用户是看不到的，主要作用是给服务器传递ID--> </td> </tr> </table> </form> </body> </html>
简单的表单练习
