实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单实战</title> </head> <body> <form action="" method="post"> <fieldset> <!-- 加密方式 post 传送地方 --> <table cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="powderblue"> <caption><h2>用户注册</h2></caption> <!-- 标题专用 caption --> <!-- <legend align="center"><h2>用户注册</h2></legend> --> <tr> <td colspan="2"><hr></td> </tr> <tr> <td align="right" width="80"><label for="name">用户名:</label> </td> <td align="left" width="300"> <input type="text" name="name" id="name" value="" placeholder="example@hotmil.cn" size="30" width="200"> </td> <!-- placeholder 提示 --> </tr> <tr> <td align="right" width="80"><label for="password">密码:</label> </td> <td align="left" width="300"> <input type="password" name="password" id="name" value="" placeholder="字母+数字+符号,至少八位" size="30" > </td> </tr></tr> <tr> <td align="right" width="80"><label for="password">确认密码:</label> </td> <td align="left" width="300"> <input type="password" name="password" id="name" value="" placeholder="字母+数字+符号,至少八位" size="30" > </td> </tr> <tr> <td align="right">性别: </td> <td align="left"> <!-- 布尔值 --> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="secret" checked="">保密 </td> </tr> <tr> <td align="right">爱好:</td> <td align="left"> <!-- 多选 --> <input type="checkbox" name="mylike[]" value="足球">足球 <input type="checkbox" name="mylike[]" value="健身">健身 <input type="checkbox" name="mylike[]" value="h5" checked="">h5 <br> <input type="text" name="text" value="" placeholder="其它"> </td> </tr> <tr align="center"> <td align="right" ><label for="xl"></label>学历</td> <td align="left"> <!-- 下拉 --> <select name="xl" id="xl"> <option value="">小学</option> <option value="">初中</option> <option value="">高中</option> <option value="" selected="大学">大学</option> <option value="">研究生</option> <option value="">博士</option> </select> </td> </tr> <tr align="center"> <td align="right" > <label for="photo">头像:</label></td> <td align="left" > <!-- 上传文件图像 --> <img src="images/1.jpg" alt="图像" title="图像 " height="20"> <input type="file" id="photo" name="photo" accept="images/*"> </td> </tr> <tr align="center"> <td valign="middle" align="right" ><label for="comment"></label>个人说明</td> <td align="left"> <textarea name="comment" id="comment" cols="30" rows="10" placeholder="最多100个字"></textarea> <!-- 文本域 --> </td> </tr> <tr> <td colspan="2" align="center"> <hr> <!-- 按钮 --> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </td> </tr> </table> </fieldset> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例