HTML之表单

最新推荐文章于 2023-07-14 19:00:42 发布

松鼠MaSaKi

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量116

点赞数

分类专栏： JAVA Basics 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45337431/article/details/99772925

版权

JAVA Basics 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

定义

form 表单，前端发送数据到后台的一种方式，用于：登陆注册，数据传输。

属性

1. action

提交数据的位置，值为服务器的地址，把表单的数据提交到该地址上处理。

2. method : 请求方式

get 【适用于 select】

不安全
传输效率略高，效率略高
数据传输有大小限制，一般都在2kb以内
通过URL传递数据，任何人都可以看到你请求的内容

post 【适用于 update delete insert…】

假装很安全
速度较慢
数据大小没有限制
通过一个隐蔽的方式传递数据，HTTP请求头，一般人看不到，程序员都懂【F12–>NetWork–>Headers】

3.enctype

enctype：表示是表单提交的类型。

有三种默认值：

application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
text/plain 普通文本

input标签属性

text：可视化文本，输入内容
password: 密码，密文或者掩码
radio: 单选，name必须一致；value：提交给服务器的数据；表示同一组中只能选中一个( checked =“checked” 表示选中)
checkbox：表示多选，name必须一致，表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
file：文件，表示上传控件

以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)

date: 日期
submit：提交
reset：重置
hidden: 隐藏传递
image 图片提交按钮
button 普通按钮
email 表示邮箱格式的数据

注意：
name属性：表单元素名字，只有name属性才能提交给服务器
value属性：提交给服务器的数据
placeholder：提示信息
disabled:禁用
readonly:只读

select 下拉菜单

option，表示下拉列表项
后面跟着value表示具体选项值，selected="selected"表示选中该项。

textarea元素

文本域
需要指定输入的区域位置大小

案例说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
	</head>
	<body>
		<!--h1,h2,h3表示的是标题的大小-->
		<h3>用户注册</h3>
		<form action="" method="get" enctype="application/x-www-form-urlencoded">
			<!--table标签，可以设置表格的边框大小，行列位置-->
			<table>
				<!--tr表示行，td表示列，下面就是一行二列-->
				<tr>
					<td>用户名</td>
					<td>
						<!--根据需求选择类型，name表示要将数据提交到后台，值是由输入结果决定-->
						<input type="text" name="userName" placeholder="请输入用户名"/>	
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<!--placeholder提示信息-->
						<input type="password" name="passWord" placeholder="请输入密码"/>
					</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td>
						<input type="password" name="passWord2" placeholder="再次确认密码"/>
					</td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td>
						<input type="email" name="email"/>
					</td>
				</tr>
				<tr>
					<td>城市</td>
					<td>
						<!--multiple表示多选，size表示可显示选项-->
						<select name="city" multiple="multiple" size="2" >
							<option value="beijing" selected="selected">北京</option>
							<option value="shanghai">上海</option>
							<option value="guangzhou">广州</option>
							<option value="shenzhen">深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<!--单选，name必须一样，这样互斥，值是选择的，而非填入，所以必须给定
						最后checked表示默认选择男-->
						<input type="radio" name="gender" value="男"/ checked="checked">男
						<input type="radio" name="gender" value="女"/>女
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type="checkbox" name="hobby" value="sing"/>唱歌
						<input type="checkbox" name="hobby" value="dance" />跳舞
						<input type="checkbox" name="hobby" value="rap" />说唱
						<input type="checkbox" name="hobby" value="basketball"/>打篮球
					</td>
				</tr>
				<tr>
					<td>头像</td>
					<td>
						<!--file表示上传一个文件-->
						<input type="file" name="photo"/>
					</td>
				</tr>
				<tr>
					<td>自我介绍</td>
					<td>
						<textarea name="Introduce" rows="15" cols="100"></textarea>
					</td>
				</tr>
				<tr>
					<!--colspan表示跨列合并，2表示跨两列合并
					//rowspan表示跨行-->
					<td colspan="2">
						<!--隐藏提交，不显示，但是会提交到后台-->
						<input type="hidden" name="id" type="1001"/>
						<!--这个不需要name属性，注册动作不需要给后台-->
						<input type="submit" value="注册"/>
						<input type="reset" value="重置"/>
						<!--可以图片上传按钮提交-->
						<input type="image" src="../img/new_logo.png"/>
						<!--普通按钮，配合js使用-->
						<input type="button" value="普通按钮" onclick="alert('哈哈')"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

输出结果：
在这里插入图片描述

松鼠MaSaKi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML之表单

定义form 表单，前端发送数据到后台的一种方式，用于：登陆注册，数据传输。属性1. action提交数据的位置，值为服务器的地址，把表单的数据提交到该地址上处理。2. method : 请求方式get 【适用于 select】不安全传输效率略高，效率略高数据传输有大小限制，一般都在2kb以内通过URL传递数据，任何人都可以看到你请求的内容post 【适用于 update...
复制链接

扫一扫

专栏目录