html5——表单元素和属性

html使用表单向服务器提交请求，表单控件的主要作用就是收集用户的输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器上

“只有客户发展了，才有我们的生存与发展！”这是创新互联的服务宗旨！把网站当作互联网产品，产品思维更注重全局思维、需求分析和迭代思维，在网站建设中就是为了建设一个不仅审美在线，而且实用性极高的网站。创新互联对成都网站设计、成都网站建设、外贸网站建设、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

html原有的表单及表单控件

form属性	说明
action	指定当单击表单的确认按钮，该表单被提交到哪个地址，可以是相对/绝对地址
method	指定提交表单时发送何种类型的请求 属性值可以为get post
enctype	对表单内容进行编码所使用的字符集
name	指定表单的唯一名称，建议该属性值与id属性值保持一致
target	使用哪种方式打开目标URL，该属性值可以是_blank _parent _self _top
post:传送的数据量比较大，用户在地址栏里看不到参数，安全性较高
get:直接在地址栏中输入访问地址所发送的请求

使用input元素，input元素是表单空间当中功能最为丰富，如下几种输入元素都是通过元素生成

单行文本框  text	单行文本框用于接受用户的输入
密码输入框 password	密码框文字不可见
隐藏域 hidden	不接受用户输入，也不能生成可视化部分
复选框 checkbox（radio 单选框）	供用户选择
图像域  p_w_picpath	和提交按钮的作用基本一样，单击表单被提交
文件上传域 file	允许用户浏览本地磁盘文件，并将该文件上传到服务器
提交 submit	提交按钮
重设 reset	重置按钮

input核心属性

checked	设置单选框、复选框初识状态是否处于选中状态，该属性只能是checked,选中
disabled	b表示该元素禁用，该元素无法获得焦点
maxlength	该属性值是一个数字，指定文本矿中允许输入的最大字符字数
size	指定该元素的宽度
readonly	文本框中的值不允许用户更改
src	指定图像域所显示图像的URL

代码示例：

    
    
    



    单行文本框：
    不能编辑的文本框：
    密码框：
    隐藏域：
    第一组单选框：
    
    
    
    第二组单选框：
    
    
    两个复选框：
    
    
    文件上传域：
    图像域：
    下面是四个按钮：
    
    
    
    

使用label定义标签：

 标签与表单空间关联有两种方式

①隐式使用for属性：指定元素的for属性值为所关联表单空间的id属性值

②显示关联：将普通文本、表单空间一起放在元素内部即可

    
    
    



    单行文本框：
    
    密码框：
    
    

列表框和下拉菜单:

用于创建列表框或下拉菜单，该元素必须要和元素结合使用，属性：multiple设置是否可以多选，size 指定列表框内可以同时显示多少个列表项

    
    
    



    下面是简单下拉菜单：
    
        Java语言
        C语言
        Ruby语言
    
    下面是允许多选的列表框：
    
        疯狂Java讲义
        疯狂Android讲义
        轻量级Java EE企业应用实战
    
    下面是允许多选的列表框：
    
        
            疯狂Java讲义
            疯狂Android讲义
            轻量级Java EE企业应用实战
        
        
            Struts 2.1权威指南
            RoR敏捷开发最佳实践
        
    
    提交

textarea定义文本域：

cols 指定文本域的宽度；

rows 指定文本域的高度；

disabled 指定禁用该文本域

readonly 指定该文本域只读

    
    
    



    简单多行文本域：
    
    只读的多行文本域：
    
疯狂Java讲义
轻量级Java EE企业应用实战
    
    提交

html5新增的属性与元素

form属性 指定属于哪一个form
formaction  提交到不同的action
formxxx  与formaction相似
autofocus 获得焦点
placeholder 提示信息
list 必须与datalist结合使用	list用法见下
autocomplete 与list结合使用	on 打开antocomplete 文本框下方会显示下拉菜单

    
    
    



    请输入图书：

    


    疯狂Java讲义
    轻量级Java EE企业应用实战
    疯狂Android讲义

分享文章：html5——表单元素和属性
分享网址：http://cdxtjz.com/article/ihgjoc.html