表单主要用于收集和提交用户输入的信息,是页面和WEB服务器交互过程中最重要的信息源。
掌握表单(Form)有以下几点:
重要的表单属性
表单的公共控件
表单提交方法
& Sect;重要的表单属性
action {URL}:指定提交表单时将数据发送到何处。
enctype :指定在发送表单数据之前如何对其进行编码。(这些值如下所示)
application/x-www-form-urlencoded:所有的字符在发送之前都被编码(这个方法是默认的)。
多部分/格式数据:不编码字符。注意:当使用包含文件上传控件的表单时,必须使用该值。
方法:指定如何发送表单。
Get:在from表单中填充的值被附加到action指定的URL,并作为URL链接传递。(您可以在地址栏中看到表单的提交信息)
post:from表单中填充的值被附加到HTML标题中。(地址栏看不到表单的提交信息)
& Sect;表单的常见控件
标签:
标签定义了输入元素的标签,它的for属性应该与相关元素的id属性相同。单击绑定后的文本,鼠标将聚焦在绑定的表单控件上。
建议:在每个表单元素的文本描述中使用标签!(两个标记之间的内容是绑定表单控件的文本描述)
注意: name属性和id属性应该分配给每个表单元素。(name属性和id属性应该尽可能使用相同或相关的值。)
Name属性:用于向服务器提交数据;
Id属性:用于在客户端做相应的操作;如:标签的绑定,CSS选择器的使用等。
文本输入框:
1)、输入type="text "单行文本框
账号:
2)、textarea多行文本框
备注:
描述:maxlength指定文本区域中的最大字符数;如果在中输入一个字符,换行符也算作一个字符。
密码输入框:
定义密码字段。(字符将被屏蔽)
密码:
无线电盒:
设置单选按钮并获取所选单选按钮的值。
性别:男女
//获取选中的单选值 注意:
1)在客户端,Javascript经常使用它的name属性而不是id属性来操作表单和表单元素。因为,对于一些特定的表单元素(比如单选按钮等。),利用它的name属性更容易得到元素值,也更方便向服务器传输数据!
2)确保同一组单选按钮的name属性值相同。
复选框:
复选框的“全选”、“不选”、“取消选择”功能,以及获取选中复选框的值的功能。
音乐游泳舞蹈
注意:确保同一组复选框按钮的name属性值是相同的。
下拉框:
下拉框的重要属性:
多属性:用于设置下拉表框的类型(多选或单选)。
Type属性:JS根据type属性的值获取下拉列表框中选择控件的类型。
type属性的值是:选择多个或选择一个。
默认情况下,下拉列表框中只能选择一项。如果要设置成多选,就设置好了。
Size属性:定义可见选项的数量。Size="3 ",即下拉框中可以显示三个可选选项。
简单选择列表
Apples Bananas Cherries oranges提示:
在不同的操作系统中,选择多个选项的区别:
由于上述差异以及需要通知用户有多种选择,一种更加用户友好的方式是使用复选框。
& Sect;表单提交方法
表单提交方法由method属性的值决定,因此有两种表单提交方法:
获取模式:
表单数据将被附加到action指定的URL,并作为URL链接传递(以查询字符串的形式提交给服务器)。
变量提交的样式是:html元素的name属性=提交值。多个变量,由URL链接后的&符号分隔。
发布模式:
表单数据将附加到请求正文(HTML标题)中发送,而不是附加到URL链接中。
建议:表格一般以邮寄方式提交,以免破坏网址,网址有长度限制。
get和post的区别:
1)、get是从服务器获取数据;Post是向服务器发送数据。
2)数据查询:比如浏览论坛或博客时,URL一般包含分类、页码、每页记录数等信息。Get模式,对想要查询的信息一目了然;Post不方便查询,因为它隐藏了这些信息。
3)数据安全:当一条记录被更改或添加时,get方法被附加在URL上,会泄露数据;Post模式可以隐藏数据,保证数据的安全性。
4)数据传输能力:get虽然查询方便,但是因为是依附于URL的,所以GET传输的数据量很小,不超过2kb;Post传输大量数据,一般默认为无限制。
资源链接推荐:博主鱼李的-详解表格