表单标签
1.标签格式：<form></form>
2.表单标签的作用：采集用户输入的信息数据
3.应用：
（1）用户注册：用户使用表单输入用户信息（用户名、密码、确认密码、邮箱）——>校验——>注册——>将信息发送至服务器的数据库保存用户信息
（2）用户登录：输入用户名和用户密码——>登录——>校验在数据库中是否存在
4.form标签当中的必填属性：
（1）action：表单最终提交的地址（url），提交至某个页面当中
（2）method：提交的方式（两种）
①get 方式：<1>使用此种方法提交后，用户的信息会显示在地址栏当中（不安全）
<2>提交的数据大小有限制（不超过1kb）
②post 方式：<1>此种方法用户的信息不会显示在地址栏（安全）
5.表单当中常用的属性：
（1）文本输入框： <input type="text" name="username" />
（2）密码输入框： <input type ="password" name="password"/>
（3）单选框： <input type ="radio" /> 注：将选项里name属性的值都设置为相同的
（4）复选框: <inpyt type ="checkbox"/> 注：将选项里name属性的值都设置为相同的
（5）下拉菜单： <select name=""></select> 注：select 中的子标签option 为下拉选项
（6）上传文件： <input type="file" name=""/>
（7）文本输入域： <textarea></textarea> 注：rows属性指定有多少行，cols指定一行有多少个字符
（8）按钮： <input type="button" value="" />
（9）提交： <input type = "submit" value="提交"/>
（10）重置： <input type="rest" value="重置"/>
注：name属性必须填写（给后台程序进行标记，方便读取）
练习1：表单标签的简单实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
用户名 :<input type="text" name="username" value="请输入用户名"><br/>
密 码：<input type="password" name="password" value="请输入密码"><br/>
<input type="submit" value="提交">
</form>
</body>
</html> 效果：
练习2：表单标签的完善版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
<!--文本输入框
name属性必填项:给后台程序进行标记,为了方便后台程序获取用输入的用户名的信息
size：可以指定输入的长度
-->
用户名 :<input type="text" name="username" value="请输入用户名" size="20" /> <br/>
<!--密码输入框:
它是以明文的形式显示,name 属性必填:给后台程序标记
-->
密 码：<input type="password" name="userpassword" value="请输入密码" size="20"/> <br/>
<!--
单选框:选择性别 男 或 女
必填name属性的值,将他们看成同一组信息,指定name属性的值是一致
-->
性别:
<input type="radio" name="gender" value="男"/> 男
<input type="radio" name="gender" value="女" /> 女 <br/>
<!--
复选框:
必填name属性的值,将他们看成同一组信息,指定name属性的值
-->
爱好:
<input type="checkbox" name="hobit" value="足球"/> 足球
<input type="checkbox" name="hobit" value="篮球"/> 篮球
<input type="checkbox" name="hobit" value="玩游戏"/> 玩游戏
<input type="checkbox" name="hobit" value="排球"/> 排球 <br/>
籍贯:
<!--
下拉菜单
必填项:name属性
select的子标签:option 选项
-->
<select name="address">
<option value="东京">东京</option>
<option value="北京">北京</option>
<option value="南京">南京</option>
</select><br/>
<!--
隐藏域:<input type="hidden" name="id"/>
作用:它不显示效果,但是它可以携带数据
-->
<input type="hidden" name="id"/>
<!--上传文件-->
上传照片:
<input type="file" name="photo"/><br/>
<!--
文本输入域:textarea
rows:指定有多少行
cols:一行指定多个字符
-->
自我描述:
<textarea rows="5" cols="20">请输入自我评价</textarea><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<!--按钮:必须指定value属性
特点:按钮可以触发一个单击点击事件或者是双击点击事件!
-->
<input type="button" value="这是一个按钮" οnclick="testClick()" />
</form>
</body>
</html> 效果：
练习3：表格+表单标签的结合版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>
<body>
<div align="center">
<font color="red" size="7">用户注册</font>
</div>
<form action="#" method="post">
<table border="1px" align="center">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" value="请输入用户名"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" value="请输入密码"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobit" value="唱歌"/>唱歌
<input type="checkbox" name="hobit" value="玩游戏"/>玩游戏
<input type="checkbox" name="hobit" value="听音乐"/>听音乐
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="edu">
<option value="请选择学历">请选择学历</option>
<option value="ss">硕士</option>
<option value="bk">本科</option>
<option value="dz">大专</option>
</select>
</td>
</tr>
<tr>
<td>上传照片</td>
<td>
<input type="file" name="desc"/>
</td>
</tr>
<tr>
<td>自我描述</td>
<td>
<textarea rows="5" cols="20" name="input">请输入自我评价</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html> 效果：
