web前端学习（四）——HTML 表单（1）- 用户注册表单举例

一、表单表单：就是类似于登录界面，用于接收用户的信息。表单以<form>开始，以</form>结束。1、表单有什么用？收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。2、怎么画一个表单？使用form标签画表单。3、一个网页当中可以有多个表单form。4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：

web前端大师

5646人浏览 · 2021-12-09 22:23:48

web前端大师 · 2021-12-09 22:23:48 发布

表单：就是类似于登录界面，用于接收用户的信息。（如下图的微博登录界面所示）

表单以<form>开始，以</form>结束。
1、表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：action属性和超链接中的href属性一样，都可以向服务器发送请求（request）
5、<form action="http://192.168.111.3:8080/oa/save"> </form> ：
其中 http://192.168.111.3:8080/oa/save 是请求路径，表单提交数据最终提交给：192.168.111.3机器上的8080端口对应的软件。

按钮：
1、在网页中需要画一个提交按钮，用来提交表单。
2、画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。而button只是一个普通按钮，不具备提交表单的能力。（type后面不能随便写）
3、对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。如果没有value，显示的是提交。
（有value）
（没有value）
4、text能够显示文本框：<input type=“text”>
（百度按钮前面的文本框）

代码举例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://192.168.111.3:8080/oa/save">
			<input type="submit" value="注册"/>
			
			<input type="button" value="设置按钮上显示的文本"/>
		</form>

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

	</body>
</html>

表单（form）和列表（table）相结合的运用：
1、表单是以什么格式提交给服务器的？（非常重要）
http://localhost:8080/jd/login?username=abc&userpwd=116
格式：cation?name=value&name=value&name=value&name=value.....
W3C的HTTP协议规定的，必须以这种格式提交给服务器
重点强调：表单项写了name属性的，一律会提交给服务器；不想提交这一项，就不要写name属性。
文本框和密码框的value不需要程序员指定，用户输入什么，value就是什么。

2、当name没有写的时候，该项不会提交给服务器。
但是当value没有写的时候，value的默认值是空字符串“”，会将空字符串提交给服务器。
Java代码得到的是：string username = " ";

		<form action="http://localhost:8080/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;&nbsp;
						<input type="reset" value="清空" >
					</td>
				</tr>
			</table>
		</form>

运行结果：（实际操作中点击登录和清空都会使网页产生反应）

form表单method属性：
get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
method属性不指定，或者指定get，这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下的所有请求都是get请求（如：超链接）

用户注册表单代码举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		
		<!--
		用户注册：
			用户名
			密码
			确认密码
			性别
			兴趣爱好
			学历
			简介
		-->
		
		<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="sex" value="1"> 男
			<input type="radio" name="sex" value="0" checked> 女 <!--单选按钮的value必须手动指定-->
			<br>
			兴趣爱好 
			<input type="checkbox" name="interest" value="smoke"> 抽烟
			<input type="checkbox" name="interest" value="drink" checked> 喝酒
			<input type="checkbox" name="interest" value="fire"> 烫头
			<br>
			学历
			<select name="grade" >
				<option value="gz">高中</option>
				<option value="dz">大专</option>
				<option value="bk" selected>本科</option>
				<option value="ss">硕士</option>
			</select>
			<br>
			简介<!--文本域，文本域没有value属性，用户填写的内容就是value-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			<input type="submit" value="注册">
			<input type="reset" value="清空">
		</form>
		
	</body>
</html>