一. 表单简介
表单主要用来收集用户的数据，比如我们做的网上在线调查，或者谷歌的搜索框，都是表单的应用场所。
二. input
input是我们使用最多的表单元素，可以根据不同的type属性呈现出不同的状态，type属性可选值：
-
text：文本框
-
password：密码框
-
checkbox：多选框
-
radio：单选框
-
submit：提交按钮
-
reset：重置按钮
<!DOCTYPE html> <html> <head> <title> 标题 </title> <meta charset='UTF-8'/> <style type="text/css"> </style> </head> <body> <!--action表示表单提交的地址，method表示表单的提交方式--> <!--action为空，就是提交到当前页面，数据都会显示在地址栏--> <form action="" method="get"> <!--文本框--> 用户名：<input type="text" name="username"/> <!--因为input是行级元素，可以用br换行--> <br /> <!--密码框--> 密 码：<input type="password" name="password" /> <br /> <!--多选框--> <!--name是参数名，相同的name可以视为一组，value是参数的值，如果不写value，地址栏显示on--> <input type="checkbox" name="likes" value="zq"/> 足球 <input type="checkbox" name="likes" value="lq"/> 蓝球 <input type="checkbox" name="likes" value="ppq"/> 乒乓球 <br /> <!--单选框--> <!--如果不写value，则浏览器会默认为这是三个独立的单选框，都可以选择--> <input type="radio" name="gender" value="nan"/> 男 <input type="radio" name="gender" value="nv"/> 女 <input type="radio" name="gender" value="bm"/> 保密 <br /> <!--下拉列表--> 城市： <select name="city"> <!--optgroup用于为列表项分组--> <optgroup label="一线城市"> <option value="bj"> 北京 </option> <option value="gz"> 广州 </option> <option value="sh"> 上海 </option> </optgroup> <optgroup label="二线城市"> <option value="jn"> 济南 </option> <option value="jj"> 济宁 </option> <option value="rz"> 日照 </option> </optgroup> </select> <!--重置--> <input type="reset" value="重置" /> <!--注册--> <input type="submit" value="注册" /> </form> </body> </html>
简单模拟百度的搜索框：
<!DOCTYPE html> <html> <head> <title> 标题 </title> <meta charset='UTF-8'/> <style type="text/css"> </style> </head> <body> <form action="https://baidu.com/s" method="get"> <input type="text" name="wd"/> <input type="submit" value="百度一下"/> </form> </body> </html>
三. 文本域
textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。可用属性：
-
cols：文本域的列数
-
rows：文本域的行数
<!--文本域,一般不用cols和rows来控制文本域大小，而用css--> <!--textarea是行级标签--> 备注：<br /> <textarea name="beiwang" cols="60" rows="10"> </textarea>
四. 表单提交方式
上面已经说过，action是表单的内容要提交到哪里，而method的就是表单的提交方式，有post和get两种方式，这两者最根本的区别是请求参数是否会显示在地址栏，get会将请求参数显示在地址栏，而post将请求参数包装在request header 的form data中。（可以通过F12——>network ——>Headers ——>Form Data来查看）。注意，input标签需要添加name属性，地址栏才会有请求参数
不建议使用get传递安全性较高的数据，如果是添加或修改的操作，建议使用post方式，因为post方式可以传递较多的数据。比如文件上传表单，使用的就是post方式
另外值得注意的时，post传参如果包含中文，那么获取的时候会显示乱码，解决方法也很简单，在获取参数之前，添加以下小脚本即可：
<%request.setCharacterEncoding("utf-8");%>
五 . 其他
-
fieldset用来为表单元素分组
-
legend用于指定每组的名字
-
label标签用来为表单元素定义描述文字
<!DOCTYPE html> <html> <head> <title> 标题 </title> <meta charset='UTF-8'/> <style type="text/css"> </style> </head> <body> <!--action表示表单提交的地址，method表示表单的提交方式--> <!--action为空，就是提交到当前页面，数据都会显示在地址栏--> <form action="" method="get"> <fieldset> <legend> 第一组 </legend> <!--文本框--> <label for="un"> 用户名：</label> <!--方式一，用id选择--> <input id = "un" type="text" name="username"/> <!--因为input是行级元素，可以用br换行--> <br /> <!--密码框--> <label> 密 码：<input type="password" name="password" /> </label><!--方式二，直接包在label标签里，现在点击用户名和密码，也会触发焦点进入输入框中--> <br /> </fieldset> <fieldset> <legend> 第二组 </legend> <!--多选框--> <!--name是参数名，相同的name可以视为一组，value是参数的值，如果不写value，地址栏显示on--> <label> <input type="checkbox" name="likes" value="zq"/> 足球 </label> <label> <input type="checkbox" name="likes" value="lq"/> 蓝球 </label> <label> <input type="checkbox" name="likes" value="ppq"/> 乒乓球 </label><!--现在点击乒乓球这几个字，也可以勾选上该多选框--> <br /> <!--单选框--> <!--如果不写value，则浏览器会默认为这是三个独立的单选框，都可以选择--> <label> <input type="radio" name="gender" value="nan"/> 男 </label> <label> <input type="radio" name="gender" value="nv"/> 女 </label> <label> <input type="radio" name="gender" value="bm"/> 保密 </label> <br /> <!--下拉列表--> 城市： <select name="city"> <!--optgroup用于为列表项分组--> <optgroup label="一线城市"> <option value="bj"> 北京 </option> <option value="gz"> 广州 </option> <option value="sh"> 上海 </option> </optgroup> <optgroup label="二线城市"> <option value="jn"> 济南 </option> <option value="jj"> 济宁 </option> <option value="rz"> 日照 </option> </optgroup> </select> <br /> </fieldset> <fieldset> <legend> 第三组 </legend> <!--文本域,一般不用cols和rows来控制文本域大小，而用css--> <!--textarea是行级标签--> 备注：<br /> <textarea name="beiwang" cols="60" rows="10"> </textarea> <br /> <!--重置--> <input type="reset" value="重置" /> <!--注册--> <input type="submit" value="注册" /> </fieldset> </form> </body> </html>
请登录之后再进行评论