前端学习笔记(HTML)——表单

最新推荐文章于 2022-07-15 15:48:45 发布

大佬橙1215

最新推荐文章于 2022-07-15 15:48:45 发布

阅读量168

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43676025/article/details/88374975

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<!--表单用于采集页面上的用户信息，实现用户和后台服务器之间的交互 
	创建一个表单：1、表单标签:通过相关属性来规定表单的提交情况
				 2、表单域:用户的输入信息
				 3、表单按钮：提交按钮、取消按钮、普通标签
	-->
	<form action="#" method="post">
		<!-- action属性，代表表单提交的后台处理程序的url地址 
			 method属性，代表提交方式，常用的提交的方式两种post和get
		-->
	<!-- 表单域 -->
	<!-- 文本框:type->类型
				name->名称
				placeholder->占位符			
	-->
	文本框：<input type="text" name="txt" placeholder="输入文本"><br>
	<!-- 密码框 -->
	密码框：<input type="password" name="ps" placeholder="输入密码"><br>
	<!-- 单选按钮 
		 同一组单选按钮的name属性要设置一致
	-->
	性别：<input type="radio" name="sex" checked="chcked" value="male">男
		 <input type="radio" name="sex" value="female">女<br>
	国籍：<input type="radio" name="country" checked="chcked" value="china">中国
		  <input type="radio" name="country" value="foreign">外国<br>
	<!-- 【注意】
		1、像输入框、密码框等可以直接输入内容的表单域，我们可以不用设置value属性，输入的内容会在提交时生成value,像单选按钮无法输入内容，只能设置value，当我们选中某个按钮时，按钮就会把value提供给组表单
		2、对于输入框、密码框，没有输入内容，可以设置占位符
	 -->
	 <!-- 复选框 -->
	<br>
	  	爱好：<input type="checkbox" name="hobby" value="listen">听歌
	  	  	<input type="checkbox" name="hobby" value="lol">LOL
	  	  	<input type="checkbox" name="hobby" value="eat">吃鸡
	  	  	<input type="checkbox" name="hobby" value="palyball">打球
	  	  	<input type="checkbox" name="hobby" value="travel">旅行
	<!-- 下拉列表： -->
	<br>
	  	请选择你喜欢的类型：
	  	<select name="love">
	  	 	<option value="bigWave">大波浪</option>
	  	  	<option value="xizhi">锡纸烫</option>
	  	  	<option value="guang">光头</option>
	  	  	<option value="zhongfen">大中分</option>
	  	 </select>
	<br>
    <!-- 文件选择框 -->
	  	请选择文件<input type="file" name="file">
	<!-- 隐藏域:隐藏一些不希望别人能够直接看到的内容-->
	<input type="hidden" name="id">
	<br>
	<!-- 表单按钮 -->
	<!-- 提交按钮：用于将表单中的内容以method中指定的方式提交给action后台处理程序，提交的数据格式：name=value&... 例如：本表单中提交,txt="qwer"&ps="123"&sex="male"&country="china"... -->
	<input type="submit" value="提交">
	<!-- 取消/重置按钮：将输入的内容清空 -->
	<input type="reset" value="重置">
	<!-- 普通按钮：可以按 -->
	<input type="button" name="" id="">
	</form>
</body>
</html>