html中的表单元素

来源:互联网 发布:淘宝商家服务电话 编辑:程序博客网 时间:2024/06/06 05:42

1. form元素

    from元素主要是定义表单,其中

    action  —— 表示表单提交的页面

    method  —— 表示表单的请求方式,有post和get两种,默认为get

    enctype —— 表示浏览器对发送给服务器的数据所采用的编码格式,有三种

                           application/x-www-form-urlencoded(默认编码,不能将文件上传到服务器)

                           multipart/form-data(用于上传文件到服务器)

                            text/plain(未规范的编码,不建议使用,不同浏览器理解不同)

    name ——表示表单名称,以便程序调用

    target —— 设置提交时的目标位置:_blank、_parent、_self、_top

    autocomplete —— 设置浏览器记住用户输入的数据,实现自动完成表单,默认为on自动完成,如果不想自动完成设置为off

    novalidate —— 设置是否执行客户端数据有效性检查

2. input元素

    input元素默认情况会出现一个单行文本框,其属性有:

    autofocus —— 让光标聚焦在某个input元素上,让用户直接输入

    disabled —— 禁用input元素

    autocomplete —— 单独设置input元素的自动完成功能

    form —— 让表单外的元素和指定的表单挂钩提交

    type —— input元素的类型,其属性有

                    text —— 一个单行文本框,默认,其额外属性有:

                                   list —— 指定为文本框提供建议值的datalist元素,其值为datalist元素的id值

                                   maxlength —— 设置文本框最大字符长度

                                   pattern —— 用于输入验证的正则表达式

                                   placeholder —— 输入字符的提示

                                   readonly —— 文本框处于只读状态

                                   disabled —— 文本框处于禁用状态

                                   size —— 设置文本框宽度

                                   value —— 设置文本框初始值

                                   required —— 表明用户必须输入一个值,否则无法通过输入验证

                    password—— 隐藏字符的密码框,额外属性有:

                                            maxlength —— 设置密码框最大字符长度

                                            pattern —— 用于输入验证的正则表达式                                        

                                            placeholder —— 输入密码的提示

                                            readonly —— 密码框处于只读状态

                                            disabled —— 密码框处于禁用状态

                                           size —— 设置密码框宽度

                                           value —— 设置密码框初始值

                                           required —— 表明用户必须输入同一个值

                    search —— 搜索框,在某些浏览器键入内容会出现叉标记取消,其额外属性与text一致

                    submit、reset、button —— 生成一个提交按钮、重置按钮、普通按钮

                    number、range —— 只能输入数值的框、只能输入在一个数值范围的框,其额外属性有:

                                                       list ——  指定为文本框提供建议值的datalist元素,其值为datalist元素的id值

                                                       min —— 设置可接受的最小值

                                                       max —— 设置可接受的最大值

                                                       readonly —— 文本框处于只读状态

                                                       required —— 表明用户必须输入一个值,否则无法通过输入验证

                                                       step —— 指定上下调节值的步长

                                                       value —— 指定初始值

                    checkbox、radio —— 复选框、单选框

                                                         checked —— 设置复选框、单选框是否为勾选状态

                                                         required —— 表示用户必须勾选,否则无法通过验证

                                                         value —— 设置复选框、单选框勾选状态时提交的数据,默认为on

                    image、color —— 生成一个图片按钮,颜色代码按钮

                    email、tel、url —— 生成一个检测电子邮件、号码、网址的文本框

                    date、month、time、week、datetime、datetime-local —— 获取日期和时间,额外属性与number一致

                    hidden —— 生成一个隐藏控件

                    file —— 生成一个上传控件

                                  accept —— 指定接受的MIME类型

                                  required —— 表明用户必须提供一个值,否则无法通过验证

    name —— 定义input元素的名称,以便接受到相应的值

    value —— 默认起始值

3. label元素

    关联input,添加说明标签

4. fieldset 元素

    对表单进行编组

    name —— 给分组定义一个名称

    form —— 让表单外的分组与表单挂钩

    disabled —— 禁用分组内的表单

5. legend元素

    添加分组说明标签,给分组加上一个标题

6. button元素

    添加一个按钮,其type值有;

    submit —— 表示按钮的作用是提交表单,默认

    reset —— 表示按钮的作用是重置表单

    button —— 表示按钮为一般性按钮,没有任何作用

    对于type值为submit时,按钮还会提供额外的属性

    form —— 指定按钮关联的表单

    formaction —— 覆盖form元素的action属性

    formenctype —— 覆盖form元素的enctype属性

    formmethod —— 覆盖form元素的method属性

    formtarget —— 覆盖form元素的target属性

    formnovalidate ——覆盖form元素的novalidate属性

7. select元素

     生成一个下拉列表进行选择,其属性:

     name —— 设定提交时的名称

     disabled —— 将下拉列表禁用

     form —— 将表单外的下拉列表与某个表单挂钩

     size —— 设置下拉列表的高度

     multple —— 设置是否可以多选

     autofocus —— 获取焦点

     required —— 选择验证,设置后必须选择才能通过

8. textarea元素

    生成一个可变更大小的多行文本框,其属性有:

    name —— 设定提交时的名称

    form —— 将表单外的多行文本框与某个表单挂钩

    readonly —— 设置多行文本框只读

    disabled —— 设置多行文本框禁用

    maxlength —— 设置最大可输入的字符长度

    autofocus —— 获取焦点

    placeholder —— 设置输入时的提示信息

    rows —— 设置行数

    cols —— 设置列数

    wrap —— 设置是否插入换行符,有soft和hard两种

    required —— 设置必须输入值,否则无法通过验证

     

    

原创粉丝点击