一、input标签与form表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://ip:port/index" method="post"> <input type="text" name="user"/> <input type="text" name="email" /> <input type="password" name="pwd"/> <!--{'user'：'用户输入的用户’，'emai1'：'xx'，'pwd’：'xx'}--> <input type="button" value="登录1" /> <input type="submit" value="登录2" /> </form> </body> </html>
说明：
# <input>是一个输入标签； 表单使用表单标签 <form> 来设置，要提交内容必须有<form>标签； # <form action="http://ip:port/index" method="post"> action="http://ip:port/index" ：表示当前表单中的内容提交给哪个页面进行处理； method="post" ：表示当前表单提交的方式，常见的有get和post方式，默认是get提交； # <input type="text" name="user"/> ： <input type="text" name="email" />： 文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。 name="user" 、name="email" 相当于为这个输入框设置一个值， # <input type="password" name="pwd"/>： 密码字段通过标签<input type="password"> 来定义，不显示明文； name="pwd" 相当于为这个输入框设置一个值， # name="user" 、name="email"、name="pwd" 在内部会以字典的形式，发送给form action="http://ip:port/index"定义的URL， 后端会判断处理提交过去的数据；
如果是get请求，会在url里拼接处提交的数据；post请求则不会显示，会在内部传递过去；# <input type="button" value="登录1" /> <input type="submit" value="登录2" /> input type="button"：按钮，目前没有什么效果，只能点击，不能提交数据； input type="submit"：将表单里的信息提交给<form>表单属性action所指向的地址；
二、单选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2"/> </div> <input type="submit" value="go" /> </form> </body> </html>
说明：
# 首先说明<form>中的<div>、<p>等标签不会被提交； # 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2"/> input type="radio"：定义单选框； name="gender"：所有单选框的name定义为相同的(互斥)，才能形成单选框； value="1" 、value="2" 将value提交到后台，进行识别处理；
三、复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <p>请选择爱好:</p> 篮球：<input type="checkbox" name="favor" value="1" checked="checked"/> 足球：<input type="checkbox" name="favor" value="2" /> 排球：<input type="checkbox" name="favor" value="3" /> <p>请选择技能：</p> Linux：<input type="checkbox" name="skill" /> python: <input type="checkbox" name="skill" /> </div> <input type="submit" value="go" /> </form> </body> </html>
说明：
# <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 # name="favor" value="1" checked="checked" name="favor" value="2" 复选框的name都设置为相同的，不会互斥，为什么name要设置为相同呢？ 因为可能有很多要复选的项目类型(爱好、技能等)，一个大的类型设置一个name， 然后再给每一项设置一个value，就可以根据name+value的方式提交数据， 如果给每一项设置一个name，就会很麻烦，不容易分辨； checked="checked"：设置默认值，默认就会被勾选上，可以设置多个， 单选框也可以用此方式设置默认值；
四、上传文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <p>上传文件</p> <input type="file" name="fname" /> </div> <input type="submit" value="go" /> </form> </body> </html>
说明：
# input type="file" name="fname" 表示上传文件，可以选择本地文件； name="fname" 获取文件名； # <form enctype="multipart/form-data"> 上传文件，依赖于form表单的此属性；
五、重置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <input type="text" name="user" /> </div> <input type="submit" value="go" /> <input type="reset" value="重置" /> </form> </body> </html>
说明：
点击“重置”按钮，就会清空输入框或者选中的内容；