表单

1.表单有什么用处？

收集用户信息，表单展现之后，用户填写表单，点击提交按钮提交数据给服务器

2.使用

使用form标签画表单。 表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。

和超链接中的href属性一样，都可以向服务器发送请求（request）

3.使用示例1.0

<form action="http://191.222.222.2:8080/a/a"> <!--画一个提交按钮，这个按钮可以提交表单--> <!--画按钮可以使用input输入域 type="submit的时候表示该按钮是一个提交按钮，具有提交表单的能力"--> <!--对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息--> <input type="submit" value="注册"/> <!--这是一个普通按钮，不具备提交表单的能力--> <input type="button" value="设置按钮上显示的文本"/> </form>

3.使用示例2.0

<!--这个按钮和普通的超链接没什么太大的区别， 超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据--> <form action="http://www.baidu.com"> <input type="submit" value="百度"> </form>

3.使用示例3.0

①没有name，表单就无法提交该数据。也就是说表单项写了name属性的，一律会把数据提交给服务器。不想提交这一项，就不要写name属性 ②提交数据的格式 点击提交后，浏览器地址栏会显示类似http://localhost:8888/jd/login?username=sdasda&userpwd=sdsada 所以表单是以这种格式提交数据给服务器的 action?.name=value&name=value&name=value…

这是W3C的HTTP协议规定的，必须以这种格式提交数据给服务器

③文本框和密码框的value不需要程序员指定，用户输入什么，value就是什么。当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器

<!--这是普通形式--> <form action="http://localhost:8888/jd/login"> 用户名<input type="text" name="username"/><br> 密码<input type="password" name="userpwd"/><br> <input type="submit" value="提交"> </form> <!--这是表格形式--> <form action="http://localhost:8888/jd/login"> <table> <tr> <td>用户名</td> <td><input type="text" name="username"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="userpwd"></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit"value="登录"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="清空"> </td> </tr> </table> </form>

4.用户注册页面实战

<!DOCTYPE html> <html> <head> <title>用户注册页面</title> </head> <body> <!--用户名 密码 确认密码 性别 兴趣爱好 学历 简介 form表单method属性： get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。 post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上，但是数据格式和get还是一样的。 当用户提交的信息中含有敏感信息例如密码，建议采用post方式提交 method属性默认是get --> <form action="http://localhost:8888/jd/register"> 用户名<input type="text" name="username"/><br> 密码<input type="password" name="userpwd"/><br> 确认密码<input type="password"/><br><!--这里不用写name--> 性别 <input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="0"/>女 <!--如果想默认一个，那就在属性栏加上checked--> <br> 兴趣爱好 <input type="checkbox" name="interest" value="smoke"/>抽烟 <input type="checkbox" name="interest" value="drink"/>喝酒 <input type="checkbox" name="interest" value="fireHair"/>烫头 <br> 学历 <select name="grade"> <option value="gz">高中</option> <option value="dz">大专</option> <option value="bk" selected>本科</option> <option value="ss">硕士</option> </select> <br> 简介 <textarea rows="10" cols="60" name="introduce"></textarea> <br> <input type="submit" value="提交"/> <input type="reset" value="清空"/> </form> </body> </html> <!--http://localhost:8888/jd/register?username=asdsada&userpwd=sadsadsa&gender=1&interest=smoke&interest=drink&interest=fireHair&grade=dz&introduce=asdsadadawd-->

5.表单的其他控件①

<!DOCTYPE html> <html> <head> <title>下拉列表实现多选&file&hidden（隐藏域）</title> </head> <body> <form action="http://localhost:8888/jd/register"> 学历 <!--multiple是支持多选的，size设置显示条目数量--> <select name="grade" multiple="multiple" size="2"> <option value="gz">高中</option> <option value="dz">大专</option> <option value="bk">本科</option> <option value="ss">硕士</option> </select> <!--文件上传专用--> <input type="file"/> <!--隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器。如果不得不提交某个数据，而且这个数据不想被用户看到，就可以用到这个 如果用hidden，一般method用post--> <input type="hidden" name="userid" value="111"/> </form> </body> </html>

5.表单的其他控件②

<!DOCTYPE html> <html> <head> <title>readonly disabled</title> </head> <body> <form action="http://localhost:8888/jd/register"> <!--readonly 和 disabled 都是只读，不能修改 但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）--> 用户代码<input type="text" name="usercode" value="110" readonly/> <br> 用户姓名<input type="text" name="username" value="zhangsan" disabled/> <br> <input type="submit" value="提交数据"/> <!--maxlength是设置文本框中可输入的字符数量--> <input type="text" maxlength="3"> </form> </body> </html>