html-表单的设计
一、表单的设计
1、注册表单页面
<html> <head> <title>表单的练习</title> <script> function mousein(){ var desc=document.getElementById("desc"); if(desc.value=="请输入描述信息！！！"){ desc.value=""; } } function mouseout(){ var desc=document.getElementById("desc"); if(desc.value==""){ desc.value="请输入描述信息！！！"; } } </script> </head> <body> <form action="../img/1.jpg" method="GET"> <table border="1px" align="center" cellpadding="10px" bgColor="pink" borderColor="blue" cellspacing="0px"> <caption><font color="red" size="6px">注册表单</font></caption> <tr> <td>用户名：</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" /></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="password2" /></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="women"/>女 </td> </tr> <tr> <td>昵称：</td> <td><input type="password" name="nickname" /></td> </tr> <tr> <td>邮箱：</td> <td><input type="password" name="email" /></td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="hobby" value="dianying"/>看电影 <input type="checkbox" name="hobby" value="football"/>踢足球 <input type="checkbox" name="hobby" value="basketball"/>打篮球 <input type="checkbox" name="hobby" value="eat"/>美食 </td> </tr> <tr> <td>城市：</td> <td> <select name="city" > <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> <option value="sz">深圳</option> <option value="nj">南京</option> <option value="wh">武汉</option> <option value="hz杭州">杭州</option> </select> </td> </tr> <tr> <td>头像：</td> <td><input type="file" name="picfile" /></td> </tr> <tr> <td>描述信息：</td> <td> <textarea id="desc" rows="5" cols="50" name="description" onfocus="mousein()" onblur="mouseout()">请输入描述信息！！！</textarea> </td> </tr> <tr> <td>验证码：</td> <td> <input type="text" name="yanzhengma" /> <img width="100px" height="21.33px" src="../img/1.jpg" /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </td> </tr> </table> </form> </body> </html>
