首页 > 代码库 > 表单标签
表单标签
作用: 提交数据到服务器端
表单的属性
form定义表单的范围<form action="#" method="get"> …….</form>
action : 指定提交的服务器的地址
method: 指定表单提交数据的方式
文本框: <input type="text" name="userName">
密码框: <input type="password" name="password">
单选项: <input type="radio" name="sex" value="http://www.mamicode.com/1" >, 需要添加name属性和value属性 ,默认选中要设置为: checked="checked"
文件框: <input type="file" >
文本域: <textarea cols="列" rows="行" name="userInfo"></textarea>
提交按钮: <input type="submit" value="http://www.mamicode.com/显示的文字"/>
图片提交: <input type="image" src="http://www.mamicode.com/图片的路径" />
重置按钮: <input type="reset" value="http://www.mamicode.com/显示的文字"/>
普通按钮: <input type="button" value="http://www.mamicode.com/显示的文字"/> (通常和js配合使用)
隐藏项: <input type="hidden" name="id" value="http://www.mamicode.com/123">
下拉输入项:
<select name="stu">
<option>--请选择--</option>
<option value="http://www.mamicode.com/1">高中</option>
<option value="http://www.mamicode.com/2">大学</option>
</select><br/>
表单的提交方式:
get: 提交的时候把请求参数直接拼接到url后面 , 不安全 , 对请求参数的数据大小有限制,不能超过1k
post: 提交的时候请求参数没有在url后面 , 安全 ;
案例:
<!DOCTYPE html> <html> <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="http://www.mamicode.com/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="http://www.mamicode.com/female" checked="checked" >男 <input type="radio" name="sex" value="http://www.mamicode.com/male">女 </td> </tr> <tr> <td align="right"><b>爱 好:</b></td> <td align="left"> <input type="checkbox" name="habbit" value="http://www.mamicode.com/Java">Java <input type="checkbox" name="habbit" value="http://www.mamicode.com/Android">Android <input type="checkbox" name="habbit" value="http://www.mamicode.com/IOS">IOS <input type="checkbox" name="habbit" value="http://www.mamicode.com/PHP">PHP </td> </tr> <tr> <td align="right"><b>学 历:</b></td> <td align="left"><select name="edu"> <option value="" >请选择</option> <option value="http://www.mamicode.com/zk" >专科</option> <option value="http://www.mamicode.com/bk" >本科</option> <option value="http://www.mamicode.com/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="http://www.mamicode.com/提交"/> <input type="reset" value="http://www.mamicode.com/重置"/> </td> </tr> </table> </form> </body> </html>
表单标签