(011)—表单form
- form标签,action属性填地址;
- input按钮,name必须提交,value填,不做要求。
<!DOCTYPE html>
<html lang="en">
<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端口对应的软件
action 是写URL.
-->
<form action="http://www.baidu.com">
<!--
1.画一个提交按钮,这个按钮可以提交表单
2.画按钮可以使用input输入域,type="submit"的时候该按钮是一个提交按钮,具有提交表单的能力。
3.对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。
-->
<input type="submit" value="百度"/><br>
用户名<input type="text"><br>
密码<input type="text">
<hr color="red">
<!--这是一个普通按钮,不具备提交表单的能力。-->
<input type="button" value="设置按钮上显示的文本"/>
</form>
<!--
表单是以什么格式提交数据给服务器的?
http://localhost:8080/jd/login?username=abc&userpwd=111
格式:action?name=value&name=value&name=value&name=value...
w3c的HTTP协议规定的,必须以这种格式提交给服务器。
重点强调:表单项写了name属性的,一律提交给服务器,不想提交这一项,就不要写name属性。
文本框和密码框的value不需要程序员指定,用户输入什么value就是什么。
当name没有写的时候,该项不会提交给服务器。
但是当value没有写的时候,value的默认值是“空字符串”,会将空字符串提交给服务器。JAVA代码得到的是:String username="";
-->
<form action="http://localhost:8080/jd/login">
<table border="1px">
<tr>
<th>用户名</th>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" name="userpwd"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
<hr color="red">
<!--submit,reset等都必须放到form标签内部,否则不起作用-->
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</body>
</html>
结果:
(012)用户注册的表单
- 地址栏:post隐藏,默认采取get显示。
- 超链接都是get请求,提交的数据都是固定不变。
- 表单和超链接,浏览器提交给服务器的数据格式:name=value&name=value&name=value&…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册的表单</title>
</head>
<body>
<!---
用户注册:用户名、密码、确认密码、性别、兴趣爱好、学历、简介
form表单method属性:缺省默认为get
1. get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
2. post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址栏上。
3. 当用户提交的信息中含有敏感信息:如,密码,建议采用post方式提交。
4.post提交的时候提交的数据格式和get还是一样的,只不过不在地址栏上显示出来,
post提交的数据还是:name=value&name=value&name=value&...
-->
<form action="http://localhost:8080/jd/register" method="post">
用户名
<input type="text" name="username"/> <br>
密码
<input type="password" name="userpwd"/><br>
确认密码
<input type="password"/><br>
性别
<input type="radio" name="gender" value="1"/>男
<input type="radio" name="gender" value="0" checked/>女 <!-单选按钮的value必须手动指定,checked默认选女->
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="firehair" checked/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz"/>大专
<option value="bk" selected/>本科
<option value="ss" selected/>硕士
</select>
<br>
简介<!--文本域,文本域没有value属性,用户写的内容就是value-->
<textarea rows="10" cols="60" name="introduction"></textarea>
<br>
<input type="submit" value="注册"/>
<input type="submit" value="清空"/>
</form>
<!--
超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。
超链接都是get请求,不是post请求。
-->
<a href="http://localhost:8080/jd/register?username=zhangsan&password=111">提交</a>
</body>
</html>
<!--
表单提交给服务器的数据:name=value&name=value&name=value...
http://localhost:8080/jd/register?username=Jack&userpwd=123&gender=1&interest=smoke&grade=ss&introduction=%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98
->
结果: