HTML网页前端----表单标签-CFANZ编程社区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单及表单元素</title>
	</head>
	<body>
		<!--
		from标签
		  表单标签，块级元素，会自动换行
		  将数据传输给服务器
		  
		  常用属性：
		    action 表单提交的地址url
			id     唯一标识
			name   名称
			target 表单提交打开方式（默认当前窗口）
			method 提交方式
			         get请求
				        参数会直接跟在url后面，用问号拼接
						安全性差，传递的数据量小，效率高（是post速度的两倍），有缓存
					 post请求
					    参数不会跟在url后面，会放在请求体中。
						安全性高，传输数据量大，速度相对来说慢，无缓存
			       
		  -->
		  <form action="#" method="get"id="myform" name="myform">
			  <!--
			  表单元素需要设置name属性值，否则数据无法传递！！！
			  input元素
			    type    标签类型
				    text 文本框
					password 密码框
					radio 单选框（需要设置一组相同的name属性值）
					checkbox 复选框
					button 普通按钮
					hidden 隐藏域（用来存放需要传递给服务器，但不需要显示的数据）
					file   文件域（上传文件）
					date   日期框
					submit 提交按钮
					reset  重置按钮
					image  图片按钮（提交按钮）
				value   表单元素的值
				checked 是否选中（单选框/复选框）
				disabled 是否禁用
				maxlength 允许输入的最大字符
			
			textarea文本域
			   cols和rows
			   
			label标签
			   设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦
		  	
			button按钮
			   type
			       button普通按钮
				   submit提交按钮（默认值）
				   reset重置按钮
			
			select下拉选项
			   <select name="">
			      <option value="">文本</option>
			   </select>
			   常用属性：
			      value:设置值
				  selected:设置选中状态
			-->
			编号：<input type="hidden" name="userId" value="1"/><br>
			<label for="userName">姓名</label>：<input type="text" id="userName" name="username"/><br>
			密码：<input type="password" name="userPwd"  /><br>
			性别：男<input type="radio" name="userSex" value="man" />
			     女<input type="radio" name="userSex" value="woman" /><br>
			爱好：唱歌<input type="checkbox" name="userhobby" value="sing" />
			     说唱<input type="checkbox" name="userhobby" value="rap" />
				 跳舞<input type="checkbox" name="userhobby" value="dance" /><br>
			生日：<input type="date" name="userDate" /><br>
			头像：<input type="file" name="userHead"  /><br>
			<input type="button" value="普通按钮" />
			<input type="reset"  value="重置按钮" />
			<input type="submit" value="提交按钮" /><br>
			<input type="image" src="./img/百度图标.png" /><br>
		    简介：<textarea name="remark" rows="5" cols="30"></textarea>
		    <br>
			城市：
			  <select name="city" multiple="multiple" size="3">
			  	<option >请选择城市</option>
				<option >北京</option>
				<option >上海</option>
				<option >杭州</option>
			  </select>
			  <br>
			  <!--
			     字符实体
				     <     &lt;
					 >     &gt;
					 空格  &nbsp;
					 版权符 &copy;
					 -->
		  </form>
	</body>
</html>