精华内容
下载资源
问答
  • html form 表单控件类型

    千次阅读 2015-07-25 07:44:16
    1. 表单元素  表单通常由两类元素构成:一是普通的页面元素,例如表格、图像、...二是用于接收信息的特定页面元素,也就是所谓的表单控件,例如文本框、单选框等。平时所说的表单元素是指表单控件。 2. 表单控件

    http://xkzx.sdut.edu.cn/xdreamer/OnLineDoc/Xdreamer/MyWebProg1/04/doc/myhtml/05/1_2.htm

    1. 表单元素

      表单通常由两类元素构成:一是普通的页面元素,例如表格、图像、文字等;二是用于接收信息的特定页面元素,也就是所谓的表单控件,例如文本框、单选框等。平时所说的表单元素是指表单控件。

    2. 表单控件

      控件是表单中用于接收用户输入或处理的元素。典型的控件有:文本框、复选框、单选框、选项菜单等。

      每个控件都具有一个指定的名称(由控件的name属性指定,相当于高级语言的变量名),该名称的有效范围是所在的表单。

      对于每个控件,都具有一个初始值和一个当前值(即相当于变量的值),这两个值都是字符串。控件的初始值是预先指定的,而当前值则根据用户的交互操作确定。当服务器端程序处理表单数据时,通常都是根据控件的这些值进行。

    3. 表单控件的类型

      HTML定义了以下类型的控件:

    • 文本框
        用以输入文本信息。可以创建三种类型的文本框:使用INPUT标记符可以创建单行文本框口令框(单行文本框和口令框的区别在于在后者中输入的字符将以*显示),而使用TEXTAREA标记符则可以创建一个多行文本框。对于任何一种文本框,所输入的文本将作为控件的当前值。

    • 复选框
        用以在所给出的多个选项中同时选择多条信息(即多项选择。复选框使用户可以选择信息,对于多个具有同一名称的复选框,用户可以选中其中的一个或多个。可以使用INPUT标记符创建复选框。

    • 单选框
        用以在所给出的多个选项中选择一条信息(即单项选择。单选框与复选框类似,也是用于选择信息。但与复选框不同的是:对于具有同一控件名称的多个单选框,用户只能选择其中之一。可以使用INPUT标记符创建单选框。

    • 按钮
        可以创建三种类型的按钮:
      提交按钮:
      submit按钮,单击该按钮将提交表单;
      重置按钮:reset按钮,单击该按钮将使所有控件恢复其初始值,以便用户重新输入或选择;
      普通按钮:button按钮,其功能取决于所使用的脚本程序。
        
      可以使用INPUT标记符创建按钮。

    • 选项菜单
        选项菜单使用户可以从多个选项中进行单项或多项选择。SELECT标记符和OPTION标记符用于创建选项菜单。

    • 文件选择框
        文件选择框使用户可以选择文件,以便这些文件的内容可以与表单一起提交。可以使用INPUT标记符创建文件选择框。

    • 隐藏控件
        隐藏控件并不在表单中显示,但其值会与表单一起提交。该控件通常用于保存一些特定信息。可以使用INPUT标记符创建隐藏控件。

    • 对象控件
        也可以在表单中插入通用控件,以便使这些控件的值与表单中其他控件的值一起提交。可以使用OBJECT标记符创建对象控件。

    展开全文
  • HTML表单和表单控件

    千次阅读 2019-07-24 16:26:44
    表单控件 input控件 注意事项: 1.<input />标签是单标签 2.input颜色、种类可以变换,可以通过type(类型)属性来变换形状。 input的若干属性如下图所示: 文本框和密码框 示例如下: 结果如下图...

    在HTML中,一个完整的表单通常由表单控件、提示信息和表单域3个部分构成。

    表单控件

    input控件

    注意事项:
    1.<input />标签是单标签
    2.input颜色、种类可以变换,可以通过type(类型)属性来变换形状。
    input的若干属性如下图所示:
    在这里插入图片描述

    文本框和密码框

    示例如下:
    在这里插入图片描述
    结果如下图所示:
    在这里插入图片描述

    单选按钮和复选按钮

    单选按钮的话例如性别什么的。
    示例如下图所示:

    在这里插入图片描述
    结果如下图:
    在这里插入图片描述
    注意:代码中两个单选这个地方有name=“sex”,如果没有name=”sex“这个地方的话,男 女两个按钮都可以选择。name="sex"说明这两个是一类。
    如果是一组,我们通过相同的name值来实现。
    接下来再说下复选按钮。 复选框可以同时选择多个。
    示例如下:
    在这里插入图片描述
    结果如下图所示:
    在这里插入图片描述
    如果想要默认选中表单属性。就在标签中加入checked=“checked”。示例如下:
    在这里插入图片描述
    结果如下图所示:
    在这里插入图片描述

    input按钮组

    上面中提到的button等后面的属性大部分都是按钮。
    接下来在一个例子中说明这些按钮。

    示例如下:
    在这里插入图片描述
    结果如下:
    在这里插入图片描述
    这个图片就是在我路径下的33.bmp。具体实现的功能的话就要依靠js,也是后面讲的。

    最多字符数和默认文本值

    这两个就是上面中提到的value和maxlength这两个属性。
    maxlength比如密码最多输入是6个,就更改这个地方。当输入的多于6个的时候就输入不进去。当之后学习了js之后,也可以限定这个地方仅输入字母啥的。
    默认文本值就是上文中提到的“请输入你的用户名”。后面学了css可以改变样式。

    label标签

    label标签为input元素定义标注(标签)。

    作用: 用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点。
    for属性规定label与哪个表单元素绑定
    作用比如:

    在这里插入图片描述
    当鼠标点击“邮箱账号”的时候,光标会定位到右边的输入框。
    第一种情况:用label直接进行包裹input就可以了
    第二种情况:如果label里面有多个表单,想要定位到某个 可以通过for id的格式来进行。
    示例如下:
    在这里插入图片描述
    结果如下:
    在这里插入图片描述

    textarea控件(文本域)

    如果要是输入大量的信息,就需要用到<textarea></textarea>标签,通过这个可以轻松的创建多行文本输入框。基本的语法格式如下:(这个功能主要是做留言的)

    <textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>
    后面这个cols rows很少用,一般都是靠css来控制。
    

    示例如下:
    在这里插入图片描述
    结果如下:
    在这里插入图片描述

    下拉菜单

    这个其实就是来实现下拉按钮的。
    使用select控件定义下拉菜单的基本语法格式如下:

    <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    .....
    </select>
    

    注意:1.selsect中应该至少包含一对<option>
    2.在option中定义selected="selected"时,当前项即为默认选项。

    实例如下:

    在这里插入图片描述
    结果如下图:
    在这里插入图片描述

    表单域(最重要的 会涉及到与后端的链接)

    在这里插入图片描述
    我们学了三个域:
    1.文本域 textarea 主要用于留言的
    2.文件域 input type=“file” 上传文件的
    3.表单域 form 收集表单控件信息 并且提交的。
    创建表单的基本语法格式如下:

    <form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
    </form>
    

    常见属性:
    1.action在表单收集到信息后,需要将消息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。(现在学的html根本看不到怎么往后台传数据的,等到学了ajax就知道怎么往服务器传数据了。后面有个课程是ajax)
    2.第二个是重点method,取值为get或者post (如果有多个表单的话 传到后台的话 需要给他们取个名字来区分开 就是name属性)
    get提交速度比较快但是不安全,他会显示出你的内容来,不能做密码提交的。一般会用post提交。
    post速度慢一些 但是不会显示表单内容 安全一些。
    3.name 一个页面中可能会有很多不同的form 区别不同的form就会用到name.
    示例如下:
    在这里插入图片描述

    结果如下:
    在这里插入图片描述
    重置按钮也会有用!!!

    展开全文
  • 表单控件使用

    千次阅读 2014-12-29 22:31:59
    表单控件使用

    表单控件使用

    <span style="font-family:Microsoft YaHei;"><!--百度搜索:自信的尘埃 2014/12/29-->
    <html>
    <meta charset="UTF-8"/>
    <head>
        <title>表单元素</title>
    </head>
    <body>
        <form action="?" method="post">
            您最喜欢的城市:
            <input type="checkbox" name="cities" value="beijing"/>北京
            <input type="checkbox" name="cities" value="shanghai"/>上海
            <input type="checkbox" name="cities" value="hangzhou"/>杭州
            <br/>
    
            您的性别是:
            <input type="radio" name="sex" value="man"/>man
            <input type="radio" name="sex" value="woman"/>woman 
            <br/>
    
            请选择出生地:
            <select name="address" size="2" multiple="multiple">
                <option value"beijing">北京</option>
                <option value="beijing">上海</option>
            </select>
            <br/>
    
            <!--文本域-->
            <textarea name="testarea" cols="20" rows="3">
            </textarea>
            <br/>
    
            <!--文件上传控件-->
            <input type="file" name="myfile"/>上传文件
            <br/>
    
            隐藏域使用:可以提交数据同时不影响界面
            <input type="hidden" name="微博:独立开发者er" value="ok"/>
            <input type="submit" value="test"/>
            <input type="image" src="2.PNG" url="http://www.baidu.com"/>
        </form>
    </body>
    </html></span>


    HTML 4.01 与 HTML 5 之间的差异

    以下类型是 HTML5 中的新类型:color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。

    语法

    <input type="value">

    属性值

    描述
    button定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
    checkbox定义复选框。
    color定义拾色器。
    date定义日期字段(带有 calendar 控件)
    datetime定义日期字段(带有 calendar 和 time 控件)
    datetime-local定义日期字段(带有 calendar 和 time 控件)
    month定义日期字段的月(带有 calendar 控件)
    week定义日期字段的周(带有 calendar 控件)
    time定义日期字段的时、分、秒(带有 time 控件)
    email定义用于 e-mail 地址的文本字段
    file定义输入字段和 "浏览..." 按钮,供文件上传
    hidden定义隐藏输入字段
    image定义图像作为提交按钮
    number定义带有 spinner 控件的数字字段
    password定义密码字段。字段中的字符会被遮蔽。
    radio定义单选按钮。
    range定义带有 slider 控件的数字字段。
    reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。
    search定义用于搜索的文本字段。
    submit定义提交按钮。提交按钮向服务器发送数据。
    tel定义用于电话号码的文本字段。
    text默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
    url定义用于 URL 的文本字段。
    展开全文
  • HTML表单控件

    千次阅读 2020-01-15 21:59:52
    input元素无疑是一个庞大和复杂的元素,但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件,datalist、progress、meter、output、keygen这五...

    input元素无疑是一个庞大和复杂的元素,但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件,datalist、progress、meter、output、keygen这五个新增表单控件

    传统控件

    button  定义一个按钮

    select   定义一个下拉列表

    option  定义下拉列表中的一个选项

    optgroup  定义选项组,用于组合选项

    textarea  定义多行的文本输入控件

    fieldset  分组表单内的相关元素

    legend  定义fieldset元素的标题

    label   定义input元素的标注

    button

    button元素用来定义一个按钮,button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

    始终为button元素设置type属性,IE7-浏览器的默认类型是button,而其他浏览器的默认类型是submit

    IE7-提交button元素之间的文本,而其他浏览器则会提交value属性的内容

    <button>元素比<input>元素更易样式化。可以添加内联HTML内容(如<em><strong> 甚至<img>),并使用:after和:before伪元素实现复杂的渲染,而只有文本值属性

    //IE7-浏览器:按下提交按钮时,URL添加?btn=1
    //其他浏览器:按下button按钮时,URL添加?btn=2
    <form action="#" >
    <button value="2" name="btn">1</button>
    <input type="submit">
    </form>
    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    【默认样式】

    chrome/safari
        padding: 1px 6px;
        border-width:1px;
    firefox
        padding: 0px 6px;
        border-width:2px;
    IE8-IE11
        padding: 3px 10px;
        border-width:1px;
    IE7-
        padding: 1px 0.5px;
        border-width:1px;
    
    

    【属性】

    autofocus   规定当页面加载时按钮自动获得焦点

    disabled   规定应该禁用该按钮

    form  规定按钮属性一个或多个表单

    formaction  覆盖form元素的action属性

    formenctype  覆盖form元素的enctype属性

    formmethod  覆盖form元素的method属性

    formnovaliadate  覆盖form元素的novalidate属性

    formtarget  覆盖form元素的target属性

    name   规定按钮的名称

    type   规定按钮的类型

    value  规定按钮的初始值

    select

    select元素用来定义一个下拉列表,包含任意数量的option和optgroup元素

    【属性】

    autofocus  规定在页面加载后文本区域自动获得焦点

    disabled  规定禁用该下拉列表

    form  规定文本区域所属的一个或多个表单

    multiple  规定可选择多个选项

    name  规定下拉列表的名称

    size  规定下拉列表中可见选项的数目

    注意:size不可为0,默认为1

    【默认样式】

    chrome/safari
        border: 1px solid;
        box-sizing: border-box;
    firefox
        padding: 1px;
        box-sizing: border-box;
    IE9+
        border: 1px solid;
        box-sizing: border-box;
    IE8-
        border: 1px solid;
    
    

    注意:IE8-浏览器box-sizing:content-box;而其他浏览器box-sizing:border-box

    【默认宽高】

    chrome
        width:65px;
        height:16px;
    firefox
        width:54px;
        height:21px;
    safari
        width: 56px;
        height: 15px;
    IE8+
        width:74px;
        height:17px;
    
    

    注意:safari浏览器无法设置高度

    option

    option元素定义下拉列表中的一个选项

    option元素有两种应用场景,除了用于下拉列表select外,还可以用于选项列表datalist中

    【属性】

    disabled  规定此选项应在首次加载时被禁用

    label  定义当使用optgroup时所使用的标注,替代option元素内容

    注意:firefox不支持label属性

    selected  规定选项在首次显示在列表中时表现为选中状态

    value  定义送往服务器的选项值

    注意:当设置value值时,服务器提交的是value的值;否则提交给服务器的是option的元素内容

    【默认样式】

    chrome
        padding: 0 2px 1px;
    
    

    注意:option无法设置margin、padding、border等盒模型样式

    optgroup

    optgroup元素定义选项组,用于组合选项

    注意:optgroup无法设置margin、padding、border等盒模型样式

    【属性】

    label  为选项组规定描述(必须)

    disabled  规定禁用该选项组(可选)

    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    <button id="btn1a" type="button">启用</button>
    <button id="btn1b" type="button">禁用</button>
    <button id="btn2a" type="button">可多选</button>
    <button id="btn2b" type="button">不可多选</button>
    <button id="btn3a" type="button">size=1</button>
    <button id="btn3b" type="button">size=2</button>
    <button id="btn3c" type="button">size=3</button>
    <button id="btn3d" type="button">不设置size</button>    
    <form action="#">
        <br><br>
        <select name="test" id="select"> 
            <optgroup label="num">
                <option value="11" disabled>1</option>
                <option value="22" selected>2</option>
                <option value="33">3</option>
                <option value="44" label="word">4</option>        
            </optgroup>
            <optgroup  label="word">
                <option>a</option>
                <option>b</option>
                <option>c</option>
                <option>d</option>        
            </optgroup>
            <optgroup  label="汉字" disabled>
                <option value="一个">一</option>
                <option value="二个">二</option>
                <option value="三个">三</option>
                <option value="四个">四</option>        
            </optgroup>    
        </select>
        <input type="submit">    
    </form>
    <script>
    var select = document.getElementById('select');
    btn1a.onclick = function(){
        select.removeAttribute('disabled');
    }    
    btn1b.onclick = function(){
        select.setAttribute('disabled','');
    }
    btn2a.onclick = function(){
        select.setAttribute('multiple','');
    }
    btn2b.onclick = function(){
        select.removeAttribute('multiple');
    }
    btn3a.onclick = function(){
        select.setAttribute('size','1');
    }
    btn3b.onclick = function(){
        select.setAttribute('size','2');
    }
    btn3c.onclick = function(){
        select.setAttribute('size','3');
    }
    btn3d.onclick = function(){
        select.removeAttribute('size');
    }
    </script>
    
    

    textarea

    textarea定义多行的文本输入控件,文本区可容纳无限数量的文本

    注意:浏览器不允许textarea嵌套textarea

    【默认样式】

    chrome/firefox/safari/IE
        padding: 2px;
        border: 1px solid;
    
    

    【默认宽高】

    chrome
        width: 137px;
        height: 30px;
    firefox
        width: 181px;
        height: 51px;
    safari
        width: 181px;
        height: 32px;
    IE9+
        width: 160px;
        height: 30px;
    
    

    注意:IE8-浏览器宽高设置不包含滚动条;其他浏览器宽高设置包含滚动条

    【样式重置】

    overflow: auto;
    resize: none;
    float: left;
    outline: none;
    
    

    【属性】

    name  规定文本区的名称

    value  表示文本区的值

    disabled  规定禁用该文本区

    注意:IE7-浏览器不支持通过setAttribute(‘disabled’,’’)的写法,必须设置为setAttribute(‘disabled’,‘disabled’)

    readonly  规定文本区为只读

    注意:IE7-浏览器不支持通过javascript设置readonly属性

    <input id="btn1" type="button" value="禁用">
    <input id="btn2" type="button" value="启用">
    <input id="btn3" type="button" value="只读">
    <input id="btn4" type="button" value="读写">
    <textarea id="test">测试内容</textarea>
    <script>
    btn1.onclick = function(){
        test.setAttribute('disabled','');
    };
    btn2.onclick = function(){
        test.removeAttribute('disabled');
    };    
    btn3.onclick = function(){
        test.setAttribute('readonly','readonly');
    };
    btn4.onclick = function(){
        test.removeAttribute('readonly');
    };
    </script>
    
    

    form  规定文本区域所属的一个或多个表单

    注意:IE浏览器不支持该属性

    autofous  规定在页面加载后文本区域自动获得焦点

    注意:IE9-浏览器不支持该属性

    required  规定文本区域是必填的

    注意:IE9-浏览器和safari浏览器不支持该属性

    placeholder  规定描述文本区域预期值的简短提示

    注意:IE9-浏览器不支持该属性

    <input id="btn1" type="button" value="placeholder='123'">
    <input id="btn2" type="button" value="placeholder='abc'">
    <input id="btn3" type="button" value="必填">
    <input id="btn4" type="button" value="可不填">
    <form action="#">
        <textarea id="test" placeholder="测试内容"></textarea>    
        <input type="submit">
    </form>
    <script>
    var test = document.getElementById('test');
    btn1.onclick = function(){
        test.setAttribute('placeholder','123');
    };
    btn2.onclick = function(){
        test.setAttribute('placeholder','abc');
    };    
    btn3.onclick = function(){
        test.setAttribute('required','');
    };
    btn4.onclick = function(){
        test.removeAttribute('required');
    };
    </script>
    
    

    maxlength  规定文本区域的最大字符数

    注意:IE9-浏览器不支持该属性

    <input id="btn1" type="button" value="0">
    <input id="btn2" type="button" value="1">
    <input id="btn3" type="button" value="6">
    <input id="btn4" type="button" value="默认">
    <textarea id="test"></textarea>    
    <script>
    btn1.onclick = function(){
        test.setAttribute('maxlength','0');
    };
    btn2.onclick = function(){
        test.setAttribute('maxlength','1');
    };    
    btn3.onclick = function(){
        test.setAttribute('maxlength','6');
    };
    btn4.onclick = function(){
        test.removeAttribute('maxlength');
    };
    </script>
    
    

    cols  规定文本区内的可见列数

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

    注意:可以用cols和rows来规定textarea的尺寸,但更好的办法是使用CSS的height和width属性

    <form action="#">
        cols:<input id="cols" pattern="\d" placeholder="请输入0-9的数字"><br>
        rows:<input id="rows" pattern="\d" placeholder="请输入0-9的数字">
        <input id="set" type="submit" value="设置">    
        <textarea id="test"></textarea>        
    </form>
    
    <script>
    var cols = document.getElementById('cols');
    var rows = document.getElementById('rows');
    var test = document.getElementById('test');
    var set = document.getElementById('set');
    set.onclick = function(){
        test.setAttribute('cols',cols.value);
        test.setAttribute('rows',rows.value);
    };
    </script>
    
    
    

    wrap  规定当在表单中提交时,文本区域中折行如何处理

    当wrap=“soft”,表示表单提交时,虽然文字在屏幕上折行,但提交的数据里不会有换行符(默认值);而当wrap=“hard”,表示表单提交时,提交的数据包含文本换行符%0D%0A

    //hard:?test=111111111111111111111%0D%0A1#
    //soft:?test=1111111111111111111111111111#
    <form action="#">
        <input id="hard" type="button" value="wrap:hard">
        <input id="soft" type="button" value="wrap:soft(默认)">
        <input id="set" type="submit" value="设置">    
        <textarea id="test" name="test"></textarea>        
    </form>
    <script>
    var hard = document.getElementById('hard');
    var soft = document.getElementById('soft');
    var test = document.getElementById('test');
    var set = document.getElementById('set');
    hard.onclick = function(){
        test.setAttribute('wrap','hard');
    }
    soft.onclick = function(){
        test.setAttribute('wrap','soft');
    }
    </script>
    
    

    fieldset

    fieldset元素用于将表单内的相关元素分组,提升可访问性,多数浏览器用一个简单的边框来显示fieldset

    【默认样式】

    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    chrome/firefox/safari
        display:block;
        margin: 0 2px;
        border: 2px groove threedface;
        padding: 5px 12px 10px;
    IE9+
        display: block;
        margin: 0 2px;
        border: 1px solid;
        padding: 3px 3px 4px;
    IE8
        display: block;
        margin: 0 2px;
        border: 1px solid;
        padding: 1px 3px 4px;
    IE7-
        display: block;
        border: 1px solid;
        padding: 1px 3px 4px;
    
    

    【属性】

    disabled  禁用fieldset

    form  规定fieldset所属的一个或多个表单

    name  规定fieldset的名称

    legend

    legend元素用于定义fieldset元素的标题

    <fieldset>
        <legend>健康信息</legend>
        身高:<input type="text" />
        体重:<input type="text" />
    </fieldset>
    
    

    label

    label元素为input元素定义标注,建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件,选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上

    label元素有两种用法:一种是使用for属性,另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法

    【属性】

    for  规定label绑定到哪个表单元素

    form  规定label字段所属的一个或多个表单

    注意:label标签的for属性要与相关元素的id属性相同

    <h4>使用for方法</h4>
    <label for="male">Male</label>
    <input type="radio" name="sex1" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex1" id="female" />
    <h4>使用嵌套方法</h4>
    <label>Male<input type="radio" name="sex2" /></label>
    <br />
    <label>Female<input type="radio" name="sex2"  /></label>
    
    

    【js属性】

    label控件有三个javascript属性,分别是form、htmlFor和control

    form表示label控件所归属的表单

    htmlFor表示label控件的for属性的字符串值

    control表示label控件所指定的input控件(注意:IE浏览器不支持)

    <form id="myForm">
      <input type="file" id="myFile">
      <label for="myFile" id="myLabel">我是label</label>
    </form>
    <script>
    var myLabel = document.getElementById('myLabel');
    console.log(myLabel.form);//<form id="myForm">
    console.log(myLabel.htmlFor);//'myFile'
    console.log(myLabel.control);//<input type="file" id="myFile">
    </script>
    
    

    新增控件

    datalist  定义输入域的选项列表

    keygen  定义密钥对生成器,用于生成密钥

    output  用于显示计算的结果

    progress  用于显示进度(前进量)

    meter  用于显示度量(剩余量)

    datalist

    datalist元素规定输入域的选项列表,列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域,需要把输入域的list属性引用datalist的id。option元素一定要设置value属性

    注意:IE9-浏览器及safari浏览器不支持

    <form action="#">
        <input list="list" name="input">
        <datalist id="list">
            <option value="1">
            <option value="2">
            <option value="3">
        </datalist>
    </form>
    
    

    keygen

    keygen规定用于表单的密钥生成器字段,当提交表单时,私钥存储在本地,公钥发送到服务器

    注意:safari和IE不支持该属性,chrome部分支持该属性

    【属性】

    autofocus  使用keygen字段在页面加载时获得焦点

    challenge  如果使用,则将keygen的值设置为在提交时询问

    disabled  禁用keygen字段

    form  定义该keygen字段所属的一个或多个表单

    keytype  定义keytype,rsa生成RSA密钥(默认)

    name  定义keygen元素的唯一名称

    //firefox: 1->usr_name=1&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1HUwmm%2B75QTnuDXC%0D%0AnUsL8cD8KkncFnA6TRaJttYss0Oi6dVzOPOtdK0O7wxD4%2BIhjSMZRD%2FddKFciZw0%0D%0AURyAimXxe%2FlDKmR3Nb1SzmqA7RJnns%2FA%2BduiYeeIIiMSL2ydUOvQvVFYMtaDkWra%0D%0AtpQfeWv1Hjz9hb7HlGzOUbtGrAECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAJ0I%0D%0ATWv7CdcNzqkaq5OpN6GHWtrlIpD5UAL%2FOiFDICb%2F8PFgV7FQk0MaGwj5XzQfEu4B%0D%0A6YlAbyz2l91I9%2FJW6Oerru5wL646OpvnTvD2U%2FzByU%2FHWp0BRNeDqntMAsGvzl6D%0D%0AoNsHTwLjDUGYVILge4syfcQVRpFRZiyVRaNlIJT9#
    <form action="#">
        Username: <input type="text" name="usr_name" />
        Encryption: <keygen name="security"  />
        <input type="submit" />
    </form>
    
    

    output

    output元素用于显示计算的结果,这是一个语义化标签,定义不同类型的输出,比如脚本的输出

    注意:IE浏览器不支持该属性

    【属性】

    for  定义输出域相关的一个或多个元素

    form  定义输入字段所属的一个或多个元素

    name  定义对象的唯一名称

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        0<input type="range" id="a" value="50">100
        +<input type="number" id="b" value="50">
        =<output name="x" for="a b"></output>
    </form>
    
    

    progress

    progress元素用来标示任务的进度或进程(常用于表示过程)

    注意:IE9-浏览器及safari浏览器不支持

    【属性】

    max  规定任务一共需要多少工作

    value  规定已经完成多少工作

    如果progress控件什么属性都不设置,则会有进度条左右往返运动的效果

    <progress></progress>
    
    
    <input id="btn" type="button" value="开始下载">
    下载进度:<progress id="test" value="0" max="100"></progress>
    <script>
    var oTimer;
    btn.onclick = function(){
        if(oTimer){
            return;
        }
        oTimer = setInterval(function(){
            test.value++;
            if(test.value >= test.max){
                clearInterval(oTimer);
            }
        },50);     
    }
    </script>
    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    meter

    meter元素用于显示剩余容量或剩余库存(常用于表示状态)

    注意:IE浏览器及safari浏览器不支持

    【属性】

    form  规定meter元素所属的一个或多个表单

    high  规定被视作高的值的范围

    low  规定被视作低的值的范围

    max  规定范围的最大值

    min  规定范围的最小值

    optimum  规定度量的最优值

    value  规定度量的当前值(必需)

    注意:min 小于 low 小于 high 小于 max

    <input id="btn" type="button" value="增加库存">
    库存量:<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>
    <script>
    var oTimer;
    btn.onclick = function(){
        if(oTimer){
            return;
        }
        oTimer = setInterval(function(){
            test.value++;
            if(test.value >= test.max){
                clearInterval(oTimer);
            }
        },50);     
    };
    </script>
    
    

    如果meter标签的value属性,取值为小数,如0.3,且没有max属性值时,则颜色块显示为宽高的30%

    <meter value="0.3"></meter>
    
    
    展开全文
  • form表单常见控件

    千次阅读 2017-03-17 16:23:46
    text   文本框 textarea  文本域 radio  单选框 checkbox  多选框  select  下拉列表 file  文件上传 hidden  隐藏域 submit 提交按钮 reset 重置按钮 button
  • 表单和表单控件以及表单域详解

    千次阅读 2019-03-28 13:06:08
    表单控件里面的信息全部收集提交。 表单控件 input表单控件: 1.是个单标签 </input> 2.input可以通过type(类型)属性来变换形状 单选按钮注意: <body> <p>用户名:<input type="text...
  • Bootstrap4 表单控件

    2020-12-14 04:04:24
    Bootstrap4 表单控件 Bootstrap4 支持以下表单控件: input textarea checkbox radio select Bootstrap Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, ...
  • 涉及的表单控件如下: text number radio select (基本类型) select (对象) multi select cascading select (级联操作) checkbox (boolean) multi checkbox 表单的局部效果 数据接口 export interface ...
  • Bootstrap表单控件的学习使用,供大家参考,具体内容如下 输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的...
  • 主要介绍了使用css美化html表单控件详细示例(表单美化),需要的朋友可以参考下
  • html5表单控件和表单域

    千次阅读 2019-06-03 15:59:53
    表单控件 文章目录、表单控件1.1 认识表单1.2 input控件1.2.1 文本框与密码框1.2.2 单选框和复选框1.2.3 默认选中表单属性1.2.4 input按钮组1.2.5 最对字符数和文本值1.2.6 label标签1.2.7 textarea控件(文本域)...
  • 根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。 2、Checkbox 单个勾选框,逻辑值: 3、多个勾选框,绑定到同一个数组: ...
  • Bootstrap的表单控件

    千次阅读 2016-01-05 09:22:50
    支持的表单控件Bootstrap 支持最常见表单控件,主要是 input、textarea、checkbox、radio 和 select。 输入框(Input)最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap ...
  • 众所周知,常见表单控件类型有text、password、button、submit、checkbox(复选框)、radio(单选框)。经常在做登录界面注册时会有一个跳转页面,当然是按键后有跳转,这里以按键button为例,可以添加点击事件,...
  • html表单的13种表单控件

    千次阅读 2019-09-10 13:56:28
    除了input标签外,html还有八个传统表单控件和五个html5新增的表单控件。 二、传统控件 button 定义按钮 select 定义下拉列表 option 定义下拉列表中的选项 optgroup 定义选项组,用于组合选项 textarea 定义多行...
  • CSS-01 ...表单 表单用于显示、收集信息,并...(2)表单控件 表单就是从浏览器向服务器传输数据的手段 表单元素: 用来声明数据提交的范围,只有在此元素内的数据可以提交给服务器。 定义表单:使用成对的<form>&l
  • Bootstrap 支持最常见表单控件,主要是 input、textarea、checkbox、radio 和 select。 输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有...
  • 根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。 Text <span>Message is: {{ message }} <input type="text" v-...
  • 表单概述 ...表单控件 包含了具体的表单功能项,例如:单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等 提示信息 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。 ...
  • HTML表单及表单控件

    千次阅读 2018-09-21 11:36:12
    method 提交表单时的请求类型 (get或者post类型) get方式的请求 一般默认为它,比较小一般不超过2k。(不在浏览器中不受限制) post方式的请求 设置method=post 请求参数大小一般不受限制 name 表单的唯一名称 ...
  • 一、输入框input  单行输入框,常见的文本输入框,也就是input的type属性值为text。... 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”。 <form role=form> <input type=
  • HTML5 新增表单控件

    2018-05-15 09:27:22
    HTML5 新增表单控件新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索&lt;label&gt;网址:&lt;/label&gt;&lt;input type="url" name="" required&gt;&...
  • 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value...
  • 编辑页面需要做日期控件类型type="datetimerange"的表单校验 2.使用场景 规则管理--》编辑弹窗表单校验 3.问题描述 日期控件类型type="datetimerange"或者 type="daterange" 的表单校验不提示错误信息 4.解决...
  • 其实 django 已经为我们提供了一些可用的表单控件,比如:多选框、单选按钮等,下面就以单选按钮为例: # forms.py from django import forms from .models import MyModel class MyForm(forms.ModelForm): xxx = ...
  • 使用时可以插入两种类型的控件,一种是表单控件(在早期版本中也称为窗体控件,英文Form Controls),另一种是ActiveX控件。表单控件只能在工作表中添加和使用(呵呵,叫表单控件,但却不在表单Form中使用,Form中...
  • vue 表单控件绑定

    千次阅读 2018-07-07 14:40:54
    v-model 指令可以在表单控件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 text &lt;input v-model="message" placeholder="edit me"&gt; &lt;p&...
  • v-model指令:在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE ...
  • HTML5-表单新功能 1.新增控件类型

    千次阅读 2015-11-10 09:53:10
    email输入类型类型要求输入格式正确的Email地址,否则浏览器是不允许提交的,并会有一个错误信息提示,此类型在opea中必须指定name值,否则无效。 URL输入类型 上面代码展示的文本域要求输入...
  • JavaScript表单控件

    千次阅读 2017-04-01 17:12:17
    在 JavaScript 中,form表单对应的是HTMLForm-Element类型,继承了HTMLElement因而与其他HTML元素具有相同的默认属性。form元素独有的属性和方法包括:  acceptCharset--->服务器能够处理的字符集HTML中的accept-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,688
精华内容 27,875
关键字:

常见的表单控件类型