HTML5表单
HTML通过表单向服务器提交请求,主要有两种方式、;GET和POST两种。GET:会将请求的参数的名和值转换为字符串,附在原URL之后,请求传输的数据量小,通过浏览器一般不大于2KB,非浏览器可大于2KB;POST:不会将请求的参数的名和值转换为字符串放在URL,而是放在HTML HEADER中,请求传输的数据量大,安全性高。
1.基本元素
<form.../>:用于生成form表单;
<action>: 表单被提交的地址,必填;
<method>:请求类型,默认为get;
<target>:打开目标URL的方式;
2.input元素
单行文本框:指定<input.../>元素的type值为text;
密码输入框:指定<input.../>元素的type值为password;
隐藏框:指定<input.../>元素的type值为hidden;
单选框:指定<input.../>元素的type值为radio;
复选框:指定<input.../>元素的type值为checkBox;
图像域:指定<input.../>元素的type值为image,可指定width和height;
文件上传域:指定<input.../>元素的type值为file;
提交、重置、无动作按钮:指定<input.../>元素的type值为submit、reset、button;
checked属性:单选框和复选框初始状态选中;
disabled:首次加载时禁用此元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可拖动</title>
</head>
<body>
<form action="https://search.jd.com/Search" method="get">
单行文本框:<input id="usename" name="keyword" type="text"/><br/>
不能编辑的文本框:<input id="username2" name="username" type="text" readonly="readonly" /><br/>
密码框:<input id="password" name="password" type="password" /><br/>
隐藏域:<input id="hidden" name="hidden" type="hidden" /><br/>
第一组单选框:<br/>
红:<input id="color" name="color" type="radio" value="red" />
绿:<input id="color" name="color" type="radio" value="green" />
蓝:<input id="color" name="color" type="radio" value="blue" /><br/>
第e二组单选框:<br/>
男:<input id="gender" name="gender" type="radio" value="male" />
女:<input id="gender2" name="gender" type="radio" value="female" /><br/>
两个复选框:<br/>
<input id="website" name="website" type="checkbox" value="leegang.org" />
<input id="website2" name="website" type="checkbox" value="crazyit.org" /><br/>
文件上传域:<input id="file" name="file" type="file" /><br/>
图像域:<input type="image" src="images/小和尚.jpg" alt="小和尚" width="27" height="31" /><br/>
下面是四个按钮:<br/>
<input id="ok" name="ok" type="submit" value="提交" />
<input id="dis" name="dis" type="submit" value="提交" disabled />
<input id="cancel" name="cancel" type="reset" value="重填" />
<input id="no" name="no" type="button" value="无动作" />
</form>
</body>
</html>
运行效果:
3,重点知识:
<label.../>:在表单中定义标签,与表单控件关联。有两种方式:隐式使用for属性,显示关联;
HTML5新增input元素:color ,date ,time ,datetime-local ,week ,month ,number ,range ,search;