HTML简单基础-2-CSDN博客

本文链接：https://blog.csdn.net/m0_49396613/article/details/109266555

3、form表单和input标签
form表单规定当提交表单时向何处发送表单数据

method 提交的方法有 get、post

get方式就是在浏览器上显示出来

post是不会在浏览器上显示出来的
一般使用post更安全但相比get来说更大一些

规定在发送表单数据之前如何对其进行编码。

enctype 属性可能的值
application/x-www-form-urlencoded（普通的）
multipart/form-data
text/plain

下面是一段举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单和input学习</title>
	</head>
	<body>
		<form method="get" action="这里为空就是本页面" enctype="application/x-www-form-urlencoded">
			账号：<input type="text" name="usename" /><br />
			密码：<input type="text" name="password"  /><br />
			<input type="submit" value="提交"   /><br />
			<input type="reset" value="重置"   /><br />
		</form>
	</body>
</html>

可以注意一点“action=“这里为空就是本页面””

在这里插入图片描述

提交之后可以在Network中找到

在这里插入图片描述

input标签

name可以理解为显示在网页中的提交上去的
没有name就不会显示那一类值
比如把一开始的例子中账号换为
那么就不会在Network中显示

账号：<input type="text"  /><br />

在这里插入图片描述

name：同样是表示的该文本输入框名称。
size：输入框的长度大小。
maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值
readonly：表示该框中只能显示，不能添加修改。

input类型

type=password 密码输入框

type=file 文件上传

type=hidden 隐藏域（防止跨站请求等）

type=button 按钮

type=submit 提交按钮
type=reset 重置按钮

外加边框

<fieldset>
<legend>个人简介</legend>
</fieldset>

textarea 文本域

<textarea rows="10" cols="20">

这中间的空格也会计算进去

</textarea >

checkbox 多选框 (name=“app[]”)先记住暂时不用理解

radio单选框

选择框

<select name="address">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option value="guangzhou">广州</option>
</select>