Web前端学习—基础篇(28)_表单如何使用、表单的控件都有哪些

Web前端学习—基础篇(28)_表单如何使用、表单的控件都有哪些

4.23、表单

用于采集用户输入数据 发送服务器 实现用户和服务器之间数据交互

一个完整表单包含:表单域、表单元素--表单控件、提示信息--文本

4.23.1、表单标签--form 块级元素

用于声明表单,定义数据采集范围

一个页面中可以有多个form标签,多个form标签为并列关系,不能嵌套

用户向服务器提交数据时,一次只能提交一个表单中的数据;如果需要提交多个表单,可以使用JavaScript的异步交互方式实现

表单元素

method属性 提交表单时所用的http方法,默认get

get方式:将数据作为URL地址一部分发送给服务器;请求数据可以被缓存,能够保留在浏览器的历史记录中,能作为书签被收藏;有长度限制;安全性较低

post方式:将数据隐藏在HTTP数据流中传输;请求数据不会被魂村,不能保留在浏览器的历史记录中,不能作为书签被收藏;对数据长度没有限制;安全性比get方式高

4.23.2、表单控件

行块级元素

type属性:设置不同控件类型

name属性:表单字段名;如果不设置name属性,输入框的内容无法随表单一起提交

单行文本输入框

密码框

单选按钮

name属性:可以实现单选按钮的互斥

value属性:必不可少,表示选项代表的值

性别:

复选框

value属性:必不可少,表示选项代表的值

checked属性:用于单选按钮和复选框的默认选中,可以直接在input标签中写checked或checked="checked"

提交按钮

value属性:修改按钮上的文字

重置按钮

value属性:修改按钮上的文字

普通按钮

value属性:修改按钮上的文字

上传文件

不能设置value属性

图片形式按钮

input的类型为image时,必须设置src属性和alt属性

隐藏域

对用户不可见,目的是收集或发送信息到服务器

4.23.3、button标签

默认为submit

4.23.4、select下拉列表 行块级元素

value属性:选项代表的值

selected属性,用于下拉列表的默认选中,属性写在option标签,直接写selected或selected="selected"

4.23.5、多行文本域

cols属性:宽度

rows属性:行数,一半不用,用宽高实现尺寸

textarea{

resize:none; /* 禁止用户手动调整多行文本域的大小 */

}

4.23.6、label标签

用来扩大点击范围,一般用于单选、复选按钮中

4.23.7、表单属性

disabled属性:禁用input元素,被禁用的元素不可用,不可点击,不会提交

readonly属性:只读,不能修改,可以被提交

size属性:控件的长度,

maxlength属性:允许输入的最多字符数

checked属性:单选按钮和复选框的默认选中

selected属性:下拉列表的默认选中

相关推荐

合作伙伴