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属性:指定

②显示关联:将普通文本、表单空间一起放在




    
    
     label元素 



    单行文本框:
    
    
    


列表框和下拉菜单:

用于创建列表框或下拉菜单,该元素必须要和




    
    
     select元素 



    下面是简单下拉菜单:
    
        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 文本框下方会显示下拉菜单



    
    
     list属性 



    请输入图书:
         疯狂Java讲义     轻量级Java EE企业应用实战     疯狂Android讲义


当前题目:html5——表单元素和属性
标题URL:http://csdahua.cn/article/ihgjoc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流