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