HTML5表单相关的元素和属性
HTML使用表单向服务器提交请求,表单、表单控件的主要作用就是手机用户输入、当用户提交表单时,用户输入胡内容将被作为请求参数提交到远程服务器。因此在Web编程中,表单主要用于收集用户输入的数据。在需要与用户交互的Web页面中,表单、表单控件都是极为常用的。
1.1form
-
元素
- action:指定当点击表单内的“确认”按钮时,该表单被提交到哪个地址。该属性既可指定一个绝对地址,也可指定一个相对地址。
- method:指定提交表单时发送何种类型的请求,该属性可以是get或post,分别用于发送GET或POST请求。通常建议发送POST请求。
- enctype:指定对表单内容进行编码所使用的字符集
- name:指定表单的唯一名称,建议该属性值与id属性值保持一致。
- target:指定使用哪种方式打开目标URL(提交请求会打开另一个URL资源),与超链接的target可接受的属性值完全一样,该属性可以是_blank、_parent、_self和_top四个值其中之一
- GET方式的请求:GET方式的请求会将请求参数的名和值转换成字符串,并附加在原URL之后,因此可以在地址栏中看到请求参数名和值。且GET请求传送的数据量较小,一般不能大于2KB。(在使用超链接提交请求时,只能提交GET请求)
- POST方式的请求:POST方式传送的数据量较大,通常认为POST请求参数的大小不受限制,但往往取决于服务器的限制,POST请求传输的数据量总比GET传输的数据量大。而且POST方式发送的请求参数以及对应的值放在HTML HEADER中传输,用户不能再地址栏看到请求参数值,安全性相对较高。
input元素
input元素是表单控件中功能最丰富的,可以通过修改元素中的type属性来生成不同的控件。有如下的几种常用控件
- 单行文本框:type属性设置为text
- 密码输入框:type属性设置为password
- 隐藏域:type属性设置为hidden
- 单选框:type属性设置为radio
- 复选框:type属性设置为checkbox
- 图像域:type属性设置为img
- 文件上传域:type属性设置为file
- 提交、重设、无动作按钮:type属性分别设置为submit、reset、button。
如下代码定义了上面全部的表单控件元素,当单击提交按钮时,页面首先会导航到百度首页,之后以get方式将用户输入内容作为请求参数发送到该站点。(页面url后面可以看到提交的参数表单)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html charset = utf-8">
<title>第一个forme练习</title>
</head>
<body>
<form action = "https://www.baidu.com" method = "get">
单行文本框:<input id = "username" name = "username" type = "text" /><br />
不能编辑的文本框:<input id = "username2" name = "username2" 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" / ><br/>
绿<input id = "color2" name = "color" type = "radio" value = "green" / ><br/>
蓝<input id = "color3" name = "color" type = "radio" value = "blue" / ><br/>
第二组单选框:<br/>
男:<input id = "gender" name = "gender" type = "radio" value = "male" /><br/>
女:<input id = "gender2" name = "gender" type = "radio" value = "female" /><br/>
两个复选框<br />
可以选这个<input id = "website" name = "website" type = "checkbox" /><br />
也可以选这个<input id = "website2" name = "website" type = "checkbox" /><br />
文件上传域:<input id = "file" name = "file" type = "file" / ><br/>
图片域:<input type = "image" src = "http://img5.imgtn.bdimg.com/it/u=935292084,2640874667&fm=26&gp=0.jpg" style = "width:120px;height:80px" / ><br/>
<select>
<option value = "java">java语言</option>
<option value = "c">c语言</option>
<option value = "ruby">ruby语言</option>
</select>
<input type = "submit" id = "ok" name = "ok" value = "提交"/><br/>
<input type = "submit" id = "dis" name = "dis" value = "提交" disabled/><br/>
<input type = "reset" id = "cancel" name = "cancel" value = "取消" /><br/>
<input type = "button" id = "no" name = "no" value = "无动作" /><br/>
</form>
</body>
</html>
将内容填充后提交,然后看到百度的url后加入了参数