day01 HTML04

超优秀=_=

已于 2022-03-19 23:11:07 修改

阅读量262

点赞数

文章标签： java

于 2022-03-19 23:08:53 首次发布

本文链接：https://blog.csdn.net/weixin_43156549/article/details/123605237

版权

这篇博客介绍了HTML中的表单元素及其属性，包括不同类型的输入框如text、password、email、date，以及radio、checkbox、select和textarea的用法。讲解了表单的action、enctype、method属性，以及如何处理用户输入数据的方式。还涉及到文件上传、隐藏字段和表单提交方式（GET和POST）的安全性和大小限制。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		表单是用来收集用户的相关信息，对应不同类型的输入框
		form:表单根标签
			action:收集完用户信息之后，将信息提交的地址
			enctype:提交到该地址的信息的媒体类型（什么类型的数据）
				默认值：application/x-www-form-urlencoded(普通文本数据)
				multipart/form-data：上传声音、图片、视频等网络资源，
				多媒体表单（一般用于文件上传，此时提交方式）必须为post
				tset/plain普通文本
			
			method:提交资源的方法
				get:将收集到的数据以键值对的形式拼接在action的资源地址后面
				Post:将收集到的数据以键值对的形式隐藏在请求头中
				get不安全，携带资源不能超过200k，访问速度特别快
				post安全，携带数据理论上没有限制，但是访问速度稍慢
				
		input:输入框
			placeholder:提示信息
			name:用来标记当前收集的数据是什么数据，每一个表单的控件必须要有
			value:每一个元素的值
			type:输入框的类型
				text:普通文本输入框
				password:密码专用输入框
				radio:单选框
					1.两个控件的属性必须一致
					2.他传值的键值对是name+value
				复选框：checkbox
						cheched="checked"默认被选中
				hidden:隐藏框：不显示在页面上，但是提交时name+value提交出去
				image:图片提交按钮
				file:上传文件
				email:表示邮箱格式的数据
				date:时间输入框，少用
				submit：提交按钮  value:按钮名称（收集用户信息，将信息提交到资源地址）
				reset:重置
				
				
	select:下拉框 给name属性
		option:选项
			selected="selected:默认被选中"
		name+option的文本值/value值 来组建键值对，如果有value属性，则优先value
		multiple="multiple"表示多选 、可以使用ctrl来实现多选,size表示显示的个数
		
		
	textarea：大文本输入框	
		-->
		<form action="login" method="get">
			<input type="hidden" name="id" value="100" >
			用户名:<input type="text" name="username" placeholder="user001"><br/>	
			密码：<input type="password" name="password"/><br/>	
			邮箱：<input type="email" name="email" ><br/>
			生日：<input type="date" name="birthday">
			性别：男：<input type="radio" name="sex" value="1"> 女:<input type="radio" name="sex" value="0"><br/>
			爱好：唱<input type="checkbox" name="habbit" id="" value="dance" checked="checked">
				 rap<input type="checkbox" name="habbit" id="" value="rap">
				跳<input type="checkbox" name="habbit" id="" value="dance"><br/>
			地址：<select name="city" multiple="multiple">
				<option>--请选择--</option>
				<option value="001">北京</option>
				<option value="400">上海</option>
				<option>广州</option>
				<option value="0551" selected="selected">合肥</option>
			</select>
			自我介绍：<textarea rows="5" cols="3" name="introduce"><br/>
			</textarea>
		
		照片：<input type="file" name="photo"><br/>
			<input type="reset" name="重置信息" >
			<input type="image" src="img/duolai.jpeg">
			<!--<input type="submit" value="注册">-->	
		</form>
	</body>
</html>