做网站编辑累不累2015军考网站建设
目录
1. form表单的格式
1.1 form表单的常用属性
1.2 form表单的常用搭配标签：input
2. form表单构造GET请求实例
3. form表单构造POST请求实例
4. form表单构造法的缺陷
对于客户端浏览器，以下操作即构造了HTTP请求：
1. 直接在浏览器地址栏中输入URL，此时构造了一个GET请求；
2. HTML中，一些特殊的标签如img，a，link，script等可能会触发GET请求；
3. 通过form表单来触发GET或POST请求（form本质也是一个HTML，但更复杂一点，故而单列而论）；
4. ajax构造HTTP请求；
1. form表单的格式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title>
</head>
<body><form action=""></form>
</body>
</html>1.1 form表单的常用属性
1. 在form表单的开始标签中，可以写属性（键值对），其中键值对之间用空格分割，键和值之间用=分割，键不需要引号但值要有双引号；常用的属性有action与method；
2. action属性的值填写的内容是访问的请求的URL（可以带上IP和端口号）；
3. method属性的值填写的内容是构造的是GET请求还是POST请求（form表单只支持GET和POST，不支持其他的HTTP方法）；
1.2 form表单的常用搭配标签：input
input标签是一个单标签：
（1）常用属性type取值为text或password（text为明文输入，password是密文输入）时：
表示一个输入框：
input标签中，输入框中的内容就会被构造成HTTP请求的query string（键值对），其中key就是input输入框的name属性，value就是输入框中用户输入的内容；
（2）常用属性type取值为submit时，表示一个按钮：
此时value属性中的内容是按钮上显示的文本：
2. form表单构造GET请求实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title>
</head>
<body><form action="http://www.sogou.com/abc.html" method="get"><input type="text" name="key1"><input type="text" name="key2"><input type="text" name="key3"><input type="submit" value="提交"></form>
</body>
</html>根据路径使用Chrome打开文件，在三个输入框中依次输入1,2,3：
点击提交后页面如下：
试用Fiddler抓包，请求详情如下：
当前实例表示：客户端构造了一个GET请求发送给服务器，服务器返回的响应为404；
如果需要获取到服务器返回的正确的期望的响应，需要服务器的代码进行配合；
3. form表单构造POST请求实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title>
</head>
<body><form action="http://www.sogou.com/abc.html" method="post"><input type="text" name="key1"><input type="text" name="key2"><input type="text" name="key3"><input type="submit" value="提交"></form>
</body>
</html>点击提交后，同get请求，在输入框中输入1，2，3点击提交后，页面如下：
使用Fiddler抓包结果如下：
4. form表单构造法的缺陷：
1. form表单只支持构造GET和POST请求，不支持其他方法；
2. form会触发页面跳转，有时会带来不便；