zoukankan      html  css  js  c++  java
  • web(四)html表单类标签

    表单类标签

      操作者用于输入信息,并将信息提交给服务器的标签集合。

      表单标签介绍

          form标签:表单元素(其余标签)标签的容器标签

          input标签:用于用户信息输入的标签。

          button标签:按钮标签。

          select/option标签:下拉框标签。

          textarea标签:文本域标签。

          lable标签:修饰输入元素的文字标签。

      表单元素标签公有的属性(html4标准)

          id:表单标签的唯一索引,一般在js中根据唯一索引获取表单元素。

          name:表单标签的名称,在提交数据时,以name属性作为实际值的索引。

          disabled:禁用当前表单元素。

          readonly:规定表当前表单元素为只读元素。

          value:设定或获取当前表单元素的输入值。

          accessKey:访问当前元素的快捷键,非表单类属性,但通常用在表单元素中。

      form标签:输入标签项的容器,封装子输入标签,主要作用如下

          设定当前表单提交的目标服务器地址。

          设定提交的http请求类型。

          设定提交数据的编码格式。

          通过js可以在提交前验证数据的合法性。

          

          method的设定

            取值范围

              get:声明本次请求的目的是从服务器获取数据。

              post:声明本次请求的目的是向服务器传送数据。

            get与post的区别

              目的不同

              提交方式不同(一个在响应头,一个在响应体)

              提交数据长度不同,get:不超过255个字符,post理论上不受限制。

              安全性get在地址栏显示信息,不安全。

              缓存机制不同,get请求的地址会保存到浏览器的访问历史记录中,post不会。

          enctype的设定的取值范围

              

      input标签用来声明一组用于用户输入信息的标签,使用type属性可以设定输入的类型。

      input标签的分类

        输入类

            text:文本框,type的默认值,

            password:密码框,密码框的文字以黑点方式显示。

            hidden:隐藏框,元素不显示,可以通过此标签提交用户不可见信息如id等。

          私有属性(具备表单标签的公有属性)

            maxlength:限定输入字符的长度。

    <input type="text" value="userName" name="text" maxlength="10" />
    <input type="password" value="password" name = "password" maxlength="10" />

        选择类

            checkbox:多选框。

            radio:单选框,表单中name属性相同的radio,只能有一个被选中。

          私有属性(具备表单标签的公有属性)

            checked:设定是否被选中,在html中只要声明此属性就被选中

    <input type="radio" name = "sex"  value = "1"/></br>
    <input type="checkbox" name="fav" checked="false" value="1"/>

        文件类

            file:文件选择框。

          私有属性(具备表单标签的公有属性)

            multiple:设定是否可以多选,在html中只要声明此属性就可以多选。

            accept:设定选择文件的mime类型,多个类型用逗号分隔开。

    <input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>

        按钮类

             button:按钮标签。

            image:图片按钮标签。

            submit:提交按钮标签,默认行为是提交当前form表单。

            reset:重置按钮标签,默认行为是当前表单恢复到网页初始化状态。

    <input type="submit" value = "提交" />
    <input type="reset" value = "重置" />

            button标签:按钮标签,非闭合标签,可以在该标签内部插入其他html元素,因此可以定义出功能强大的按钮。

          私有属性(具备表单标签的公有属性)

            type:按钮的类型。

            reset:重置类型按钮

            submit:提交类型按钮

            button:不同按钮,无默认行为。

    <button type="submit"><div>大家好</div></button>

      

       下拉框标签:使用select、option两个标签声明下拉框。  

    <select name="pro" >
        <option value="1">北京</option>
        <option value="2">上海</option>
    </select>

          select标签私有属性

            multiple:规定可选择多个选项。

            size:规定可见下拉框选项的数量。

          option标签私有属性

            selected:当前下拉明细项是否被选中。

      

      textarea标签:设定多行的文本输入控件。

        私有属性(具备表单标签的公有属性)

          cols:规定文本区内的可见宽度。

          rows:规定文本区内的可见行数。

          maxlength:文本输入的最大字符数量。

    <textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>

      label元素:输入标签的文字描述标签,可以代替输入标签响应用户的操作。

          私有属性说明

             for:输入标签的id属性值。

    <label for="sex1"></label>
    <input id = "sex1" type="radio" name = "sex"  value = "1"/>
  • 相关阅读:
    飘逸的python
    hdu 4512 吉哥系列故事——完美队形I(最长公共上升自序加强版)
    Codeforces 482B. Interesting Array 线段树
    《开源框架那些事儿21》:巧借力与借巧力
    openNebula libvirt-virsh attach disk device for kvm
    configure mount nfs
    opennebula kvm attach disk
    openNebula 运维系列虚拟机virtual machines operations
    yum subversion puppet puppet-server
    文件系统,快存储,对象存储
  • 原文地址:https://www.cnblogs.com/-maji/p/7464275.html
Copyright © 2011-2022 走看看