- A+
所属分类：Web前端
注意：文中代码的效果仅展示了在浏览器上的外观，并未展示效果，别问，问就是博主懒（硬气地说道）
1、form表单初步：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单初步</title> </head> <body> <!-- 1、表单有什么用？ 收集用户信息，表单展示之后，用户填写表单，点击提交，提交数据给服务器 2、怎么画一个表单？ 使用form标签画表单 3、一个网页当中可以有多个表单form 4、表单最终是需要提交给服务器的，form表单有一个action属性，这个属性用来指定服务器地址： action属性用来提交数据给哪个服务器 action属性和超链接中中的href属性一样，都可以向服务器发送请求（request） 5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给： 192.168.111.3 这台机器上的8080端口对应的软件 --> <form action="http://192.168.111.3:8080/oa/save"> <!--画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力--> <!--对于按钮来说，value属性用来指定按钮上显示的文本信息,有提交功能的按钮默认为“提交”--> <input type="submit" value="注册"/> <!--这是一个普通的按钮，没有提交表单的能力--> <input type="button" /> </form> <br /><br /> <!-- 这个按钮和普通的超链接没什么太大的区别（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以顺便提交数据） 注意：利用表单来提交数据的单位是一个“form”，所以只会提交form之“内”的数据 --> <form action="http://www.baidu.com"> <input type="submit" value="百度"/> </form> <br /><br /> <!--关于form的代码只有放到form里，才能正常使用--> <!-- 表单是以什么格式提交给服务器的？ 格式：action?name=value&name=value&name=value&name=value... HTTP协议规定，必须以这种形式提交给服务器 例如： http://localhost:8080/jd/login?username=aaa&userpwd=123456 注意：若文本框不设置name属性，浏览器就不会提交数据给服务器 文本框的value和按钮的value不一样，没有关系，不要搞混！！！ 当文本框的name没有设置的时候，该项不会提交给服务器 但是当value没有写的时候，value的默认值是空字符串"",这意味着java代码得到的是String string = "" --> <form action="http://localhost:8080/jd/login"> <table> <tr> <td>用户名</td> <!--文本框也可以设置value，这个value会作为默认值，但是没有什么意义，所以一般不设置文本框的value--> <td><input type="text" name="username" value="bbb"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="userpwd"/></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="登录"/> <input type="reset" value="清空"/> </td> </tr> </table> </form> </body> </html>
谷歌浏览器：
2、用户注册的表单：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户注册的表单</title> </head> <body> <!-- form表单method属性： get:用户提交的信息会显示在浏览器的地址栏上（method默认为get）。 post：用户提交的信息不会显示在浏览器地址栏上。 --> <form action="http://localhost:8080/jd/register"> 用户名 <!--文本框格式--> <input type="text" name="username"/> <br> 密码 <!--文本框格式--> <input type="password" name="userpwd" /> <br> 确认密码 <!--文本框格式--> <!-- 确认密码不需要设置name的，因为确认密码如果要提交给服务器，说明与密码相同，所以只需要name（提交）密码就行了，不需要再提交一个相同的信息 --> <input type="password"/> <br> 性别 <!--单选圈圈（只能勾选一个圈圈）--> <!--两个圈圈的name相同是因为都属于“用户性别信息”，所以要相同name，若不相同，就可能出现既是男又是女的情况--> <input type="radio" name="gender" value="1" />男 <!-- 如何判断是否需要设置value？ 若我们需要的是用户手动输入的信息，如简介，密码等。则不需要设置value； 若我们需要的是用户选择我们给定的选项（而不是用户输入的信息），则需要设置特定的value以提交给服务器，如性别等 --> <input type="radio" name="gender" value="0" checked/>女 <!--标记checked代表默认此选项--> <br> 兴趣爱好 <!--多选框格式（可以多选，也可以单选）--> <input type="checkbox" name="interest" value="smoke"/>抽烟 <input type="checkbox" name="interest" value="drink" checked/>喝酒<!--标记checked代表默认喝酒--> <input type="checkbox" name="interest" value="fireHair" checked/>烫头<!--标记checked代表默认烫头--> <br> 学历 <!--下拉列表格式（单选）--> <select name="grade"> <option value="gz">高中</option> <option value="dz">大专</option> <option value="bk" selected>本科</option> <!--selected标记代表默认本科--> <option value="ss">硕士</option> </select> <br> 简介 <!--文本域格式，文本域没有value属性，用户填写的内容就是value--> <!--可以通过设置row（宽）和（长）cols来调整文本框的大小--> <textarea rows="10" cols="60" name="introduce"></textarea> <br> <!--最后给form提供一个提交数据按钮,将以上数据提交给服务器--> <input type="submit" value="注册" /> <!--设置一个按钮实现清空所有文本框内数据的功能--> <input type="reset" value="清空" /> </form> <!--超链接其实也可以提交数据，但是只能是固定不变的value，所以不可能用这种方式提交用户信息--> <!--超链接是get请求--> <a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a> </body> </html>
谷歌浏览器：
3、下拉列表支持多选：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉列表支持多选</title> </head> <body> <!-- multiple="multiple" 支持多选的 size设置显示条目数量。--> <!--同时按ctrl和鼠标左键才可以实现多选--> <select multiple="multiple" size="4"> <option>河北省</option> <option>河南省</option> <option>山东省</option> <option>山西省</option> </select> </body> </html>
谷歌浏览器：
4.file控件：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>file控件</title> </head> <body> <!--file控件：文件上传专用。--> <input type="file" /> <form action="http://localhost:8080/oa/save"> <!-- 隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器 用于提交需要提交但是又不想让用户看到的数据 --> <input type="hidden" name="***" value="***" /> 用户代码<input type="text" name="usercode" /> <input type="submit" value="提交" /> </form> </body> </html>
谷歌浏览器：
5、readonly 与 disabled：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>readonly disabled</title> </head> <body> <!-- readonly和disabled相同点：都是只读不能修改。 但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。） --> <form action="http://localhost:8080/taobao/save"> 用户代码<input type="text" name="usercode" value="456" readonly /> <br> 用户姓名<input type="text" name="username" value="zhangsan" disabled /> <br> <input type="submit" value="提交数据" /> </form> </body> </html>
谷歌浏览器：
6、maxlength：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>maxlength</title> </head> <body> <!-- maxlength 设置文本框中可输入的字符数量。 --> <input type="text" maxlength="3" /> </body> </html>
谷歌浏览器：
