向服务器传递数据

最新推荐文章于 2024-10-29 16:18:55 发布

sur_haha

最新推荐文章于 2024-10-29 16:18:55 发布

阅读量531

点赞数 12

文章标签：笔记 html 前端

本文链接：https://blog.csdn.net/sur_haha/article/details/135631202

版权

本文详细介绍了HTML表单中的关键属性如action、method、enctype，以及input、select等常见控件的使用方法，包括get和post的区别、文件上传的处理以及不同类型的按钮（submit和button）功能。

摘要由CSDN通过智能技术生成

表单：<form>...</form>

form中的属性：

1.action：将表单中的数据提交到服务器的地址，也能够做本地页面的跳转

<a>...</a>链接（超链接）与action有本质区别，<a>...</a>链接只是做页面间跳转的

2.method：向服务器提供数据提交方式，有两种方式（get、post）

get与post的区别：

1.get是从服务器读取信息，也可以向服务器提交信息
.1.post是向服务器提交（存储）信息的
1.get提交数据是不安全的，地址栏是可见的，提交数据大小只有2KB
1.post提交数据是安全的
1.get提交数据时以参数形式向服务器提交数据
1.post以数据块的形式打包发送到服务器

3.enctype：表示的是form表单中有文件上传的功能

使用方式：enctype="multipart/form-data"

表单控件分两种：

1.输入控件

input标签（单标签）

属性：name获取表单中填写的值；id是input框的唯一标识；

name后面跟用户名用username，跟密码用pwd，跟性别用sex

type表示方式：text是文本，password是密码框，file是上传文件，radio是单选框，checkbox是多选框，hidden是隐藏框

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="#" enctype="multipart/form-data" method="post"></form>
		<label>用户名</label><input name="userName" id="uid" type="text/><br/>
		<label>密码</label><input name="ped" type="password" /><br />
		<label>上传头像</label><input name="file" type="file" /><br />
		<label>性别</label><input name="sex" type="radio"  />男
		<input name="sex" type="radio" />女<br />
		<p><label for="">爱好</label>
			<label for="tennis"><input type="checkbox" name="hobby" id="tennis" value="tennis"><span>网球</span></label>
			<label for="basketball"><input type="checkbox" name="hobby" id="basketball" value="basketball">
			<span>篮球</span></label>
			<label for="swimming"><input type="checkbox" name="hobby" id="swimming" value="awimming" ><span>游泳</span></label>
			<input for="other"><input type="checkbox" name="hobby" id="other" value="other"><span>其他</span></label>
		</p>
	</body>
</html>

显示为：

2.列表控件

select标签（双标签，不可单独使用）搭配option进行使用

按钮分两种属性，一种是button，一种是input的type类型submit（<input type=button或submit,value="按钮"）

submit、button的区别：

submit是对form表单中的内容进行提交，button是配合js中的onclink事件进行使用提交

列表控件：两个标签核心为select标签，搭配option使用

selected：表示浏览器初次显示默认被选中，size：列表中显示的个数（此时name获取选择列表的值）

默认值：selected

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<label>户籍信息</label>
			<select name="hj">
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="zhengzhou">郑州</option>
			</select>
	</body>
</html>

显示为：