html <form>表单标签
<form>表单标签
作用：
表单，用于和服务器交互，传输数据就用form表单标签来实现的。
接收html页面上，不同类型的用户输入，用户提交表单时，向服务器传输数据，从而实现用户与服务器的交互
下面介绍一下<form>表单标签下可以使用的一些元素、属性：
1、<form>表单标签里面可以包含input元素，而一般使用type=”xxx”，来指定当前input标签使用什么类型的元素进行表单交互。
（除了input还有其他的元素也可使用在<form>表单标签内 如：textarea、select、fieldset和 label 元素。）
注意：type类型存在很多种，下面说说几个常用的：
============================================================================
下面说说
<form>表单标签内，使用input元素相关操作：
#简单例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <input type="text"> //实现的就是一个text文本，input输入框 <input type="text"> </form> </body> </html>
实际效果，就是2个文本输入框。
由上可见，input标签下，使用type=“text”可以实现一个文本input输入框。
这里有个问题，两个输入框没有换行展示。（这表明input标签是一个“块级标签”）
那么就如果要让其在一列上，即换行展示，那么就可以加上一个<p>标签
<p><input type="text"></p> <p><input type="text"></p>
实际效果：
注意：
有心的人可能发现了，这样的输入框，像不像一般登录界面的输入框？
没错是的，在这个基础上，加点文字描述。再加上一个提交按钮（使用submit属性）就活脱脱的就是呀！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <p>账号：<input type="text"></p> <p>密码：<input type="text"></p> <p><input type="submit" ></p> </form> </body> </html>
实际效果：
注意了，在input元素内的写的type=“submit”属性，
就是html页面的“提交”按钮。这里的submit属性是可以使用value值的，用来改变这个提交按钮的文字描述。
<p><input type="submit" value="登录"></p>
实际效果：
ps:
另外，和submit属性，相类似的还有一个button属性
Button属性，
<p><input type="submit" value="登录"></p>-----一般提交数据到服务器使用
<p><input type="button" value="登录"></p>------一般结合js进行事件点击操作。比如点击登录会提示
那么这里有个问题，这个秘密是明文的呀，如何解决密文展示呢？
其实很简单，input标签里面的type属性，是有很多的不同类型的值可以使用的，
使用type="password" 就可以完美解决，让输入的值变成密文展示。
<p>密码：<input type="password"></p>
实际效果：
================================================================
================================================================
那么说到底，基本操作如此，但是html如何才能和服务端交互呢。（毕竟输入框，提交都有了。）
如何和服务端交互？
解决方法：可以在<form>标签内进行添加要使用的url和请求方法（使用action="" method=""）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="url具体内容" method="get/post请求方法"> //这就是解决方法 <p>账号：<input type="text"></p> <p>密码：<input type="password"></p> <p><input type="submit" value="登录"></p> </form> </body> </html>
重要：！！！
但是这里会存在一个问题，如果提交时，这个数据服务端是获取到的什么呢？服务端怎么知道我提交的数据谁是谁呢？
其实这里就要说一个问题了：就是一定要指明input里面的id、name……或其他属性，否则html里面只有一个<input type="text"> ，
这样在传输数据到服务端后，服务端无法识别到具体是哪里操作来的，一个html页面可能涉及几十个，如何区分如何识别？
//方法：比如给input标签指明了 比如name属性： <p>账号：<input type="text" name="username"></p> <p>密码：<input type="password" name="password"></p> //在提交数据后，会以键值对的形式，发送给服务端。服务端就会来识别到name这个属性和对应的值。
//----------------这是服务端对html传输来的数据识别的方式。键值对形式!!! //即：输入的数据，会对应name属性的值，然后组成键值对，发送给服务端，这样就清晰明了了！
Checkbox和radio属性
（复选框和单选框）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="url具体内容" method="get/post请求方法"> <p>账号：<input type="text" name="username"></p> <p>密码：<input type="password" name="password"></p> <p><input type="submit" value="登录"></p> <!--<p><input type="button" value="登录"></p>--> <p>复选框1：<input type="checkbox" ></p> <p>复选框2：<input type="checkbox" ></p> <p>单选框1：<input type="radio" ></p> <p>单选框2：<input type="radio" ></p> </form> </body> </html>
实际效果：
注意了：一般界面上的复选框和单选框就是这样实现的；
但是，这里也会存在一个问题：单选框为什么可以多选了？如何解决？
解决方法：
给单选框，加上一个name属性，并给name指定相同的值，
那么在选择的时候就不会存在都选择了。因为type=”radio”单选框这种情况下，name相同，那么最后就只允许取一个
<p>单选框1：<input type="radio" name="a"></p>
<p>单选框2：<input type="radio" name="a"></p>
最后！最重要的一点：
上面已经说明，HTML客户端在和服务端交互的时候，数据以键值对的形式传输，
那么这个单选框\复选框如何和服务端交互并且如何让服务端准确的识别到HTML页面上操作选择的谁是谁呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="url具体内容" method="get/post请求方法"> <p>账号：<input type="text" name="username"></p> <p>密码：<input type="password" name="password"></p> <p><input type="submit" value="登录"></p> <!--<p><input type="button" value="登录"></p>--> <p>爱好：</p> <p>篮球<input type="checkbox" name="hobby" value="0"></p> <p>足球<input type="checkbox" name="hobby" value="1"></p> <p>婚否：</p> <p>已婚<input type="radio" name="marry" value="10"></p> <p>未婚<input type="radio" name="marry" value="11"></p> </form> </body> </html>
实际效果：
由此可见：
解决方法：
给复选框、单选框，都分别加上name属性和value属性。这就相当于指明自己的身份和密匙一样；
因为指明了name和value，那么在和服务端交互传输数据时，服务端能够更清晰识别到html页面的操作选择了哪些东西。
如：选择了单选框“已婚”，html就会把name="marry" value="10"转为键值对的形式进行识别！
然后服务端看到name=”marry”就知道这是“婚否“这个单选框,value=”10”指明了“已婚”这个单选项）。
----------->>>说白了id,name这些属性,……和它对应的value值，都是为了给服务端看的，让服务端能够更清晰识别到html页面的操作选择了哪些东西。
（否则一个页面上百个输入框，选择项，随便选择一个后，传输数据到服务端后，该如何识别呢？那么将其id、name、value这些都指明后，以键值对的形式传入数据到服务端后，直接就识别到了）
上传\选择文件标签
<p><input type="file"></p>
重置页面数据标签
<p><input type="reset"></p>---->>也可以加上name属性，name=”清空页面数据”
==========================================================================
=========================================================================
以上均是常用的<form>表单里面的input标签可以使用的常用的属性
当然还有其他的很多，暂不过多说明……
最后，总结一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="url具体内容" method="get/post请求方法"> //指定url、method，利于和服务端进行交互 <p>账号：<input type="text" name="username"></p> //type="text" 普通的文本输入框 <p>密码：<input type="password" name="password"></p> //type="password" 密文显示的文本输入框 <p><input type="submit" value="登录"></p> //type="submit" 提交按钮 <!--<p><input type="button" value="登录"></p>--> //type="button" 常和js结合使用，点提交会触发js事件 <p>爱好：</p> <p>篮球<input type="checkbox" name="hobby" value="0"></p> //type="checkbox" 复选框 <p>足球<input type="checkbox" name="hobby" value="1"></p> <p>婚否：</p> <p>已婚<input type="radio" name="marry" value="10"></p> //type="radio" 单选框 <p>未婚<input type="radio" name="marry" value="11"></p> <p><input type="file"></p> //type="file" 文件上传按钮入口 <p><input type="reset"></p> //type="reset" 清空重置按钮 </form> </body> </html>
实际效果：
