列表 ，表格和表单（2）

表单

<!-- action属性值是接受提交数据的执行程序地址
		method是表单数据提交的方式 get是显性的 用户提交的信息再地址栏能看到
		post是隐性的 用户提交的数据再地址栏能看不到 登陆注册 都是post的方式 -->
		<form action="qn.js" method="post">
			<p>
				<!-- 文本域 -->
				<input type="text" name="username" id="" value="请输入姓名" />
			</p>
			<p>
				<!-- 密码域 -->
				<input type="password" name="pwd" id="" value="请输入密码" />
			</p>
			
			<p>
				<!-- 单选框 -->
				<input type="radio">
			</p>
			<p>
				<!-- 复选框 -->
				<input type="checkbox">
			</p>
			<p>
				<!-- 下拉框-->
				<select name="">
					<option value="">1999</option>
					<option value="">2000</option>
					<option value="">2001</option>
				</select>
			</p>
			<p>
				<!-- 多行文本 -->
				<textarea rows="" cols="">
					
				</textarea>
			</p>
			<p>
				<!-- 文件域 -->
				<input type="file" name="" id="" value="" />
			</p>
			<p>
				<input type="reset" name="" id="" value="重置按钮" />
			</p>
			<p>
				<!-- 隐藏按钮 -->
				<input type="hidden" name="" id="" value="隐藏按钮" />
			</p>
			<p>
				<!-- 普通按钮 -->
				<button type="button">普通按钮</button>
			</p>
			<p>
				<!-- 提交按钮 -->
				<input type="submit" value="提交"/>
			</p>
			
			<p>
				<!-- 图片按钮 -->
				<input type="image" name="" id="" value="" src="310.png"/>

<h1 align="center">交友申请表</h1>
		<form action="qn.java" method="post" align="center">
			
			<p>
				<!-- value是默认值 -->
				<!-- placeholder是提示文案 -->
				<!-- maxlength允许输入最大字符长度 防止恶意注册 -->
				<!-- size控制表单宽度 -->
				<!-- label获取鼠标的焦点 -->
				<!-- readonly只读属性
				disabled禁用属性 -->
				<label for="username">姓名</label>
				<input type="text" name="username" id="username" value="" placeholder="请输入姓名" maxlength="10" size="20" readonly />
			</p>
			<p>
				<label for="pwd">密码</label>
				<input type="password" name="pwd" id="pwd" value="123456"  disabled />
			</p>
			<p>
				<!-- checked是默认选中
				单选按钮的name属性值要一致 -->
				性别
				<label>男</label>
				<input type="radio" name="sex" id="man" value=""  />
				<label>女</label>
				<input type="radio" name="sex" id="woman" value="" checked/>
			</p>
			<p>
				兴趣爱好
				<label>交友</label>
				<input type="checkbox" name="aihao" id="" value="jiaoyou" />
				<label>旅游</label>
				<input type="checkbox" name="aihao" id="" value="lvyou" checked />
				<label>网游戏</label>
				<input type="checkbox" name="aihao" id="" value="youxi" />
			</p>
			<p>
				<!-- 下拉单默认选中 selected -->
				年龄
				<select name="age" size="2">
					<option value="2000">2000</option>
					<option value="2001" selected>2001</option>
					<option value="2002">2002</option>
					<option value="2003">2003</option>
				</select>
			</p>
			<p>
				自我评价
				<textarea rows="5" cols="10" name="showText">
					
				</textarea>
			</p>
			<p>
				上传照片
				<input type="file" name="pic" id="" value="" />
			</p>
			<input type="submit" value=""/>
		</form>

<!-- h5新表单的补充 -->
		<form action="qn.php" method="get">
			<p>
				<!-- 网址控件 -->
				<input type="url">
			</p>
			<p>
				<!-- 日期控件 -->
				<input type="date">
			</p>
			<p>
				<!-- 时间控件 -->
				<input type="time">
			</p>
			<p>
				<!-- 邮件控件 -->
				<input type="email" >
			</p>
				
			<p>
				<!-- 数字控件 step="5"每次5个跳动-->
				<input type="number" step="3">
			</p>
				
			<p>
				<!-- 滑块控件 -->
				<input type="range" step="10">
			</p>
			<p>
				<!-- 搜索空间 -->
				<input type="search" name="" id="" value="" />
			</p>
			
				<p>
					<input type="submit">
				</p>
				
		
		</form>