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

<!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>

网页显示如下表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值