HTML课堂笔记（七）表单

不想上班只想要钱

已于 2022-04-08 19:23:11 修改

阅读量164

点赞数

分类专栏： html 文章标签： html

于 2022-04-08 16:48:27 首次发布

本文链接：https://blog.csdn.net/Aa12364567/article/details/124043209

版权

html 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		<!--
			1.什么是表单有什么用？
			    发送请求，并且携带数据给服务器。
			    表单和超链接有共同的特征，就是可以向服务器发送请求，
			    只不过超链接是用户直接点击发送请求，不能填写数据。
			    而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
			    表单最主要的作用就是：收集用户信息。
			    表单对应的英语单词是form
			2.怎么定义一个表单对象呢？语法格式
			   <form>
			   	表单项1：
			   	表单项2：
			   </form>
			       另外要注意：一个网页上可以有多个表单对象。
			3.form标签中有一个action属性，这个属性和超链接的href相同。
			         都需要填写url
		-->
		<!--超链接-->
		<a href="http://www.baidu.com">百度</a>
		<!--表单-->
		<form action="http://www.baidu.com">
			<!--按钮，提交表单的按钮，只要点击这个按钮，就能发送请求了-->
			<!--所有能够提交表单是按钮，type必须是submit，不能随便写-->
			<input type="submit" value="百度" />
			<!--button普通按钮，不能提交表单-->
			<input type="button" value="百度（普通按钮）" />
		</form>
		<!--submit提交按钮放在form外面也是不可以的-->
		<input type="submi" value="百度（外）" />
	</body>
</html>

在这里插入图片描述

登录表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录表单</title>
	</head>
	<body>
		<!--画一个登录的表单-->
		<!--action路径随便写了-->
		<!--
			http://192.168.145.2:8080/crm/login
			协议：http协议
			访问的服务器ip地址是什么？192.168.145.2
			访问这个服务器上的某个软件：8080端口对应一个服务
			/crm/login:是这个服务器上的某个资源名（它可能是一段处理登录的java程序！！！）
			重点：
			表单最终提交的时候，表单项的name属性非常重要，有name的才会提交，没有name是不会提交的
			并且浏览器向服务器提交数据的格式是
			    url？name=value&name=value&name=value
			    以上提交数据的格式，是W3C指定的格式，所有浏览器都是这样的
		-->
		<form action="http://http://192.168.145.2:8080//crm/login">
			<!--input是输入域，type不同，展示样式不同，text表示文本框-->
			用户名：<input type="text" name="x"/>
			<br />
			<!--type="password"表示密码框-->
			密&nbsp;&nbsp; 码：<input type="password" name="y" />
			<br />
			<!--提交表单的按钮-->
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

在这里插入图片描述

用户注册的表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		<form action="http://localhost:80/crm/register">
			用户名：<input type="text" name="username" />
			<br />
			密码：<input type="password" name="userpwd" />
			<br />
			性别：
			<!--最终提供给服务器的数据是：sex=1或者sex=0-->
			<!--同一组的单选按钮，name是需要一致的，这样才可以做到单选的效果-->
			<!--checked表示默认选中此项-->
			    <input type="radio" name="sex" value="1" checked/>男
			    <input type="radio" name="sex" value="0"/>女
			<br />
			兴趣：
			    <input type="checkbox" name="aihao" value="smoke" />抽烟
			    <input type="checkbox" name="aihao" value="drink"  checked/>喝酒
			    <input type="checkbox" name="aihao" value="firehair" />烫头
			<br />
			学历：
			<!--下拉列表-->
			    <select name="xueli">
			    	<option value="gz">高中</option>
			    	<option value="zk">专科</option>
			    	<!--默认选中本科-->
			    	<option value="bk" selected>本科</option>  
			    	<option value="ss">硕士</option>
			    </select>
			<br />
			简介：
			<!--文本框-->
			    <textarea rows="10" cols="60" name="jianjie"></textarea>
			<br />
			<!--提交表单-->
			<input type="submit" value="注册"/>
			<!--重置按钮-->
			<input type="reset" value="重置" />
			<!--普通按钮（type="button"）无效-->
		</form>
		<!--放在form里面才有效，在外面无效-->
		<input type="reset" value="重置（外）" />
	</body>
</html>

在这里插入图片描述

不想上班只想要钱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML课堂笔记（七）表单

表单<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!-- 1.什么是表单有什么用？发送请求，并且携带数据给服务器。表单和超链接有共同的特征，就是可以向服务器发送请求，只不过超链接是用户直接点击发送请求，不能填
复制链接

扫一扫

专栏目录