作用: 提交数据到服务器端
表单的属性
form定义表单的范围<form action="#" method="get"> …….</form>
action : 指定提交的服务器的地址
method: 指定表单提交数据的方式
文本框: <input type="text" name="userName">
密码框: <input type="password" name="password">
单选项: <input type="radio" name="sex" value="1" >, 需要添加name属性和value属性 ,默认选中要设置为: checked="checked"
文件框: <input type="file" >
文本域: <textarea cols="列" rows="行" name="userInfo"></textarea>
提交按钮: <input type="submit" value="显示的文字"/>
图片提交: <input type="image" src="图片的路径" />
重置按钮: <input type="reset" value="显示的文字"/>
普通按钮: <input type="button" value="显示的文字"/> (通常和js配合使用)
隐藏项: <input type="hidden" name="id" value="123">
下拉输入项:
<select name="stu">
<option>--请选择--</option>
<option value="1">高中</option>
<option value="2">大学</option>
</select><br/>
表单的提交方式:
get: 提交的时候把请求参数直接拼接到url后面 , 不安全 , 对请求参数的数据大小有限制,不能超过1k
post: 提交的时候请求参数没有在url后面 , 安全 ;
案例:
<!DOCTYPE html>
<html>
<!--
表单标签： 表单标签的作用是用于提交数据给服务器的。
表单标签的根标签是<form>标签
常用的属性：
action: 该属性是用于指定提交数据的地址。
method： 指定表单的提交方式。
get : 默认使用的提交方式。 提交的数据会显示在地址栏上。
post ： 提交的数据不会显示在地址栏上。
注意： 表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。
-->
<head>
<title>表单.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<form action="#" method="get" >
<table border="1" width="300" cellspacing="0" align = "center">
<tr>
<td align="right"><b>用户名:</b></td>
<td align="left"><input type="text" size="30"></td>
</tr>
<tr>
<td align="right"><b>密 码:</b></td>
<td align="left"><input type="password" size="31"></td>
</tr>
<tr>
<td align="right"><b>性 别:</b></td>
<td align="left">
<input type="radio" name="sex" value="female" checked="checked" >男
<input type="radio" name="sex" value="male">女
</td>
</tr>
<tr>
<td align="right"><b>爱 好:</b></td>
<td align="left">
<input type="checkbox" name="habbit" value="Java">Java
<input type="checkbox" name="habbit" value="Android">Android
<input type="checkbox" name="habbit" value="IOS">IOS
<input type="checkbox" name="habbit" value="PHP">PHP
</td>
</tr>
<tr>
<td align="right"><b>学 历:</b></td>
<td
align="left"><select name="edu">
<option value="" >请选择</option>
<option value="zk" >专科</option>
<option value="bk" >本科</option>
<option value="ss" >硕士</option>
</select>
</td>
</tr>
<tr>
<td align="right"><b>近 照:</b></td>
<td align="left"><input type="file" name="file"></td>
</tr>
<tr>
<td align="right"><b>备 注:</b></td>
<td
align="left"><textarea rows="10" cols="20" name="desc" >这家伙很懒!神马也没留下!</textarea>
</td>
</tr>
<tr>
<td align="center" colspan = "2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>