<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>注册表单</h1> <br /> <br /> <form action="" > <div> <label for="username">用户名:</label> <!-- 在label属性中,for对应的是input中的id. 表明,此标签与输入栏相关联,点击标签自动关联输入栏. 这在表单输入,尤其是选择中,尤为重要. 不然选框太小很难点中,会降低用户体验. --> <input type="text" name="username" id="username"> <!-- id属性是用来对应别的语句. type是决定输入的内容类别 name是决定显示input的显示选项类别,通常决定单选双选或者是枚举,列表等等. --> </div> <br /> <div> <label for="password">密 码:</label> <input type="password" name="password" id="password"> </div> <br /> <div> <label>性 别:</label> <input type="radio" name="gender" value="0" id="man"><label for="man">男</label> <input type="radio" name="gender" value="1" id="woman"><label for="woman">女</label> <input type="radio" name="gender" value="2" id="secret"><label for="secret">秘密</label> </div> <br /> <div> <label>爱 好:</label> <input type="checkbox" name="like" id=like_0 value="study"><label for="like_0">学习</label> <input type="checkbox" name="like" id=like_1 value="play_game"><label for="like_1">游戏</label> <input type="checkbox" name="like" id=like_2 value="Sport"><label for="like_2">运动</label> <input type="checkbox" name="like" id=like_3 value="Music"><label for="like_3">音乐</label> </div> <br /> <div> <label>照 片:</label> <input type="file" name="photo"> <!-- file,上传文件 --> </div> <br /> <div> <label>自我介绍</label> <textarea name="introduce"></textarea> </div> <br /> <div> <label>籍 贯:</label> <select name="city" id=""> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </div> <br /> <div> <input type="hidden" name="hid01" value="隐藏项"> <!-- 关于隐藏属性, 不用的时候,几乎没用. 需要的时候非常有用, 能够用来创建一些步进式页面, 避免繁琐选项让人不耐 --> </div> <br /> <div> <!-- <input type="submit" value="提交"> --> <input type="image" src="../FontEnd_Web/One/images/11.png" value="提交"> <!-- 图片提交,有时候可能会产生提交两次的bug,所以,一般情况下不经常使用 --> <input type="reset" name="" value="重置"> </div> </form> </body> </html>