精华内容
下载资源
问答
  • HTML表单元素--input输入类型(1)

    千次阅读 2019-04-25 17:29:58
    HTML表单元素 HTML表单用于搜集不同类型的用户输入。 1.< form >...其属性action=“要提交的地址” method=" 提交的方式" 属性值:get 和 post ...form action="" method=...元素:最重要的表单元素很多t...

    HTML表单元素–input输入类型

    HTML表单用于搜集不同类型的用户输入 其中最常用到的就是input元素。

    1.< form >元素:素定义 HTML 表单。其属性有action=“要提交的地址” method=" 提交的方式" 属性值有:get 和 post

    <form action="" method="post"> </form>
    

    2.< input >元素:最重要的表单元素,有很多type属性

    3.文本框:< input type=“text” > 定义用于文本输入的单行输入字段

    
    <form action="" method="post">   <!--action:页面的跳转   method:提交的方式 -->
        <input type="text">  <!--单行文本框-->
        <br>
        <input type="text" value="我是文本框">  <!--文本框内默认的值 占位-->
        <br>
        <input type="text" value="我是文本框" readonly>  <!--只读效果,不能在文本框内输入字符-->
        <br>
        <input type="text" placeholder="我是文本框">  <!--文本框内默认的值 但是不占位-->
        <br>
        <input type="text" placeholder="我是文本框" maxlength="5"> <!-- 文本框内输入的最大长度-->
        <br>
        <input type="text" placeholder="我是文本框" size="20">  <!--拓宽文本框,把文本框写满需要20个字符-->
        <br>
        <input type="password" placeholder="输入密码" >  <!--用于密码的输入,输入的字符用小圆点代替-->
        <br><br>
        <!-- cols:文本框列数; rows:文本框行数 -->
        <textarea name="多行文本框" id="" cols="30" rows="10">我是多行文本框</textarea>
    </form>
    

    在这里插入图片描述

    4.单选按钮输入:< input type=“radio” >单选按钮允许用户在有限数量的选项中选择其中之一

    <form action="" method="post">
    
        <p>你最喜欢的编程语言是?</p>
        <input type="radio" name="a" checked>JAVA  <!--checked:默认选择-->
        <input type="radio" name="a">C++
        <input type="radio" name="a">PHP
    </form>
    

    在这里插入图片描述
    注:每个name值要一致

    5.提交按钮:表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。< input type=“submit” >

    6.重置按钮:用来重置文本框输入的数据 < input type=“rest” >

    <form action="" method="post">
    
        <input type="submit" value="提交">   <!--提交按钮-->
        <input type="reset" value="重置">   <!--重置按钮-->
    
    </form>
    

    在这里插入图片描述

    7.复选框:可以选择多个值 < input type=“checkbox” >

    <form action="" method="post">
    <p>你最喜欢的编程语言是?</p>
    <input type="checkbox" checked>JAVA  <!--checked:默认选择-->
    <input type="checkbox">C++
    <input type="checkbox">PHP
    </form>
    

    在这里插入图片描述
    8.下拉框:< select >

    <form action="" method="post">
    <p>你最喜欢的水果是?</p>
        <select name="" id="">
            <option value="">苹果</option>
            <option value="">香蕉</option>
            <option value="">哈密瓜</option>
        </select>
    </form>
    

    在这里插入图片描述

    9.密码框:用来输入密码

     <input type="password" placeholder="输入密码" >  <!--用于密码的输入,输入的字符用小圆点代替-->
    

    还有很多元素和属性可能没讲解到,关注我会继续跟新。希望对大家有所帮助

    展开全文
  • 常用表单控件是input元素 accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性 autocomplete、autofocus、form、formaction、formenctype...

    form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素

    accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

    autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

    传统属性

    name

    name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据

    注意:只有设置了name属性的表单元素才能在提交表单时传递它们的值

    type

    type属性用来规定input元素的类型

    注意:如果input元素没有设置type属性,或者设置的值在浏览器中不支持,那么输入类型会变成type=“text”

    accept

    accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型,然而它只是建设性的,并很可能被忽略,它接受逗号分隔的MIME类型

    注意:该属性只能与type="file"配合使用

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

    alt

    alt属性为图像输入规定替代文本,功能类似于image元素的alt属性,为用户由于某些原因无法查看图像时提供备选信息

    注意:alt属性只能与type="image"的input元素配合使用

    <input type="image" src="#" alt="测试图片">
    
    

    checked

    checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置

    注意:checked属性只能与type="radio"或type="checkbox"的input元素配合使用

    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    <input type="radio" name="radio" value="1" checked>
    <input type="radio" name="radio" value="2">
    <input type="checkbox" name="checkbox" value="1">
    <input type="checkbox" name="checkbox" value="2">
    <script>
    var oInput = document.getElementsByTagName('input');
    for(var i = 0,len = oInput.length; i < len; i++){
        oInput[i].onmouseover = function(){
            this.checked = 'checked';
        }
    }    
    </script>
    
    

    disabled

    disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本

    [注意1]disabled属性无法与type="hidden"的input元素一起使用

    [注意2]对于IE7-浏览器必须设置为disabled=“disabled”,而不可以直接设置disabled,否则使用javascript控制时将失效

    <button id="btn1">输入域可用</button>
    <button id="btn2">输入域不可用</button>
    <input id="test" disabled value="内容">
    <script>
    btn1.onclick = function(){
        test.removeAttribute('disabled');
    }    
    btn2.onclick = function(){
        test.setAttribute('disabled','disabled');
    }    
    </script>
    
    

    readonly

    readonly属性规定输入字段为只读。只读字段是不能修改的,但用户仍然可以使用tab按键切换到该字段,还可以选中或拷贝其文本

    readonly属性可与type="text"或"password"的input元素配合使用

    注意:IE7-浏览器不支持使用javascript控制readonly属性

    <button id="btn1">输入域只读</button>
    <button id="btn2">输入域可读写</button>
    <input id="test" value="内容" readonly>
    <script>
    btn1.onclick = function(){
        test.setAttribute('readonly','readonly');
    }
    btn2.onclick = function(){
        test.removeAttribute('readonly');
    }    
    </script>
    
    

    maxlength

    maxlength属性规定输入字段的最大长度,以字符个数计

    注意:该属性只能与type="text"或type="password"的input元素配合使用

    <input maxlength="6">
    <input type="password" maxlength="6">
    
    

    size

    size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度

    注意:由于size属性是一个可视化的设计属性,推荐使用CSS来代替它

    <input size="1">
    <input type="password" size="2">
    
    

    src

    src属性作为提交按钮显示的图像的URL

    注意:src属性只能且必须与type="image"的input元素配合使用

    <form action="#">
        <input name="test">
        <input type="image" src="https://demo.xiaohuochai.site/submit.jpg" width="99" height="99" alt="测试图片">
    </form>
    
    

    value

    value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:

    type=“button”、“reset”、"submit"用于定义按钮上的显示的文本

    type=“text”、“password”、"hidden"用于定义输入字段的初始值

    type=“checkbox”、“radio”、"image"用于定义与输入相关联的值

    [注意1]type="checkbox"或"radio"必须设置value属性

    [注意2]value属性无法与type="file"的input元素一起使用

    <button id="btn1">1</button>
    <button id="btn2">2</button>
    <input id="test">
    <script>
    btn1.onclick = btn2.onclick =function(){
        test.value=this.innerHTML;
    }    
    </script>
    
    

    新增属性

    autocomplete

    autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在字段中填写的选项

    autocomplete属性适用form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color

    注意:IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效

    <input name="test1" autocomplete="on">
    <input name="test2" autocomplete="off">    
    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    autofocus

    autofocus属性规定在页面加载时,域自动地获得焦点

    autofous属性适用于button、input、keygen、select和textarea元素

    <input name="test1">
    <input name="test2" autofocus>
    
    

    novalidate

    novalidate属性规定在提交表单时不验证form或input域

    novalidate属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color

    注意:IE9-浏览器不支持

    height

    height属性用于规定image类型的input标签的图像高度

    注意:该属性只适用于image类型的input标签

    width

    width属性用于规定image类型的input标签的图像宽度

    注意:该属性只适用于image类型的input标签

    //http://127.0.0.1/form.html?test=123&x=38&y=57#
    <form action="#">
        <input name="test">
        <input type="image" src="submit.jpg" width="99" height="99">
    </form>
    
    

    list

    大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据

    list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color

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

    min

    min属性规定输入域所允许的最大值

    max

    max属性规定输入域所允许的最小值

    step

    step属性为输入域规定合法的数字间隔

    min、max、step属性适用于以下类型的input元素:date pickers、number、range

    <input type="number" min="0" max="10" step="0.5" value="6" />
    
    
    <input type="range" min="0" max="10" step="0.5" value="6" />
    
    

    multiple

    multiple属性规定按住ctrl按键,输入字段可以选择多个值

    该属性适用于type="email"和"file"的input元素

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

    <button id="btn1">打开文件多选</button>
    <button id="btn2">关闭文件多选</button>
    <br><br>
    <input id="test" type="file" multiple>
    <script>
    btn1.onclick = function(){
        test.setAttribute('multiple','');
    };
    btn2.onclick = function(){
        test.removeAttribute('multiple');
    };
    </script>
    
    

    pattern

    pattern属性规定用于验证input域的模式。模型pattern是正则表达式

    pattern属性适用于以下类型的input元素:text、search、url、tel、email、password

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

    <form action="#">
        <input pattern="\d{3}">    
        <input type="submit">
    </form>
    
    

    placeholder

    placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失

    placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password

    注意:IE9-浏览器不支持

    <form action="#">
        <input type="tel" placeholder="请输入数字" pattern="\d{11}">    
        <input type="submit">
    </form>
    
    

    要修改placeholder的颜色需要使用::placeholder

    ::placeholder{color:green;}
    
    

    required

    required属性规定必须在提交之前填写输入域(不能为空)

    required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

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

    <form action="#">
        <input required>    
        <input type="submit">
    </form>
    
    

    form

    form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id

    form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔

    注意:IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效

    <form id="form" action="#">
        <input type="submit">
    </form>
    <input name="test" form="form">
    
    

    表单重写属性

    表单重写属性允许重写form元素的某些属性设定。其中,formnovalidate适用于button或input元素,而其他属性适用于submit或reset的button或input元素

    formaction

    重写表单的action属性

    <form action="#" >
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" /><br />
    <input type="submit" formaction="#" value="以管理员身份提交" />
    </form>
    
    

    formenctype

    重写表单的enctype属性

    <form action="#" method="post">
      First name: <input type="text" name="fname" /><br />
      <input type="submit" value="提交" />
      <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data编码提交" />
    </form>
    
    

    formmethod

    重写表单的method属性

    <form action="#" method="get">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" />
    <input type="submit" formmethod="post" formaction="#" value="使用POST提交" />
    </form>
    专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    formnovalidate

    重写表单的novalidate属性

    <form action="#" method="get">
    E-mail: <input type="email" name="userid" /><br />
    <input type="submit" value="提交" /><br />
    <input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
    </form>
    
    

    formtarget

    重写表单的target属性

    
    <form action="#">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" />
    <input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
    </form>    
    
    
    展开全文
  • 1、新增input类型 -电子邮件类型 语法: 当输入的邮件地址格式不对时,会弹出提示信息 -搜索类型 语法:&lt;input type="search"&gt; 手机键盘会将确定变换为搜索 -URL类型 语法:&lt;input ...

    1、新增input类型
    -电子邮件类型
    语法:
    当输入的邮件地址格式不对时,会弹出提示信息

    -搜索类型
    语法:<input type="search">
    手机键盘会将确定变换为搜索
    
    -URL类型
    语法:<input type="url">
    当输入的网址格式不正确时,会弹出提示信息
    
    -电话号码类型
    语法:<input type="tel">
    主要针对移动端,针对电话号码的输入,调整手机键盘的类型
    
    -数字类型
    语法:<input type="number">
    只接受数字类型,当文本框中包含非数字时,会弹出错误提示
    属性:
    min:文本框能接受的最小值
    max:文本框能接受的最大值
    step:指点击右侧按钮时递增/递减的幅度,取值为整数,默认是1
    
    -范围类型
    语法:<input type="range">
    会出现一个允许滑动的块
    属性:
    min:起始值
    max:最大值
    value:当前元素的值
    step:递增或递减的长度
    
    -颜色类型
    语法:<input type="color">
    可以通过onchange事件,获取选择的颜色值
    
    -日期类型
    语法:<input type="date">
    -周类型
    语法:<input type="week">
    
    -其他
    type=month
    type=time
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="jquery-3.1.1.js"></script>
    </head>
    <body>
        <form action="">
            <input type="email">
    
            <input type="search" placeholder="搜索">
            <br>
            <br>
            <input type="url">
            <br>
            <input type="tel">
            <br>
            <input type="number" min="3" step="4" max="10">
            <br>
            <input type="range" min="10" max="100" value="20" id="r" step="20">
    
            <br>
            <input type="color" id="c" onchange ="fun()">
    
            <br>
            <input type="date">
            <br>
            <input type="week">
            <br>
            <input type="month">
            <br>
            <input type="time">
            <input type="submit">
    
        </form>
        <script>
            console.log($('#r').val());
    
            function fun() {
                console.log($('#c').val());
            }
    
        </script>
    </body>
    </html>
    
    

    一、新增表单元素
    1、datalist元素
    可以使用该标记创建一组列表项,可以为输入框做提示
    该元素需要与input进行绑定,需要有选项option
    语法:


    2、progress元素
    进度条,消失处理的进度值
    语法:<progress></progress>
    属性:value:当前进度
          max:最大进度值
    
    3、meter
    类似于进度条
    
    4、output元素(选修)
    用于显示表单元素处理的结果值
    

    二、新增表单属性
    1、multiple属性:规定文本框中可以包含多个值(email、file)
    -多个值之间用逗号隔开
    -该属性可以不设置属性值

    2、autofocus
    自动获取焦点,可以不设置属性值
    注意,一个表单中,只会设置一个文本框自动获取焦点
    
    3、form属性
    该属性可以用于将某控件与表单关联起来
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="" oninput="o.value = parseInt(n.value)+parseInt(r.value)" id="f1">
            <input type="email">
            <br>
            <input type="number" step="3">
            <br>
            <!-- datalist的用法 -->
            <input type="text" list="data">
            <datalist id="data">
                <option value="123"></option>
                <option value="111"></option>
                <option value="abc"></option>
            </datalist>
    
            <br>
            <progress value="1" max="100"></progress>
            <br>
            <meter value="4" min="0" max="10">0.25</meter>
            <br>
    
            <!-- <input type="number" id="n" value="4">
            +<input type="range" id="r" value="50">
            =<output name="o" for="n r"></output> -->
    
            <input type="email" multiple="">
            <br>
            <input type="file" multiple="">
            <br>
            <input type="text" autofocus="">
    
            <input type="submit">
    
        </form>
        <input type="email" form="f1">
    </body>
    </html>
    

    表单验证
    1、required
    必填属性,该属性不需要设置属性值

    2、pattern
    实现元素的指定格式的验证,多用于正则表达式指定的规则
    语法格式:<input type="text" pattern="正则表达式">
    手机号验证:^1[34578]\d{9}$
    邮箱验证:^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$
    
    3、min和max
    最大值和最小值,适用于number
    
    4、minlength和maxlength
    最小字符个数或最大字符个数
    当输入字符个数小于minlength时,会弹出提示信息,需要注意的是,设置了maxlength,文本框不允许多输入,也不会有提示
    
    5、validity
    这是表单元素的一个属性,可以用于表单验证,该属性主要利用validityState对象,描述元素的有效状态;validityState对象,代表元素是否通过验证,它提供了一些属性,可以用于描述指定元素的验证状态。
    
    语法:表单元素dom对象.validity.属性
    
    验证状态:
    1)valid
    语法:form表单元素对象.validity.valid;
    valid属性是一个bool值,它表示表单元素是否通过验证,如果通过,则为true,否则为false
    
    2)valueMissing
    当控制处于无效状态时,此时控件不会验证通过,其valueMissing的值为true;注意,此状态用于验证required元素,元素为空时,该属性为true,否则为false
    
    3)typeMismatch
    如果输入的内容不符合指定的格式,该属性为true
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="">
            <input type="text" required="">
            <br>
            <input type="text" id="phone" pattern="^1[34578]\d{9}$">
            <br>
            <input type="text" pattern="^3\d{16}[\dx]$">
            <br>
            <input type="number" min="3" max="6">
            <br>
            <input type="text" minlength="10" maxlength="15">
            <input type="submit">
        </form>
        <form action="">
            <input type="text" id="text" required="">
            <br>
            <input type="email" id="e">
            <br>
            <input type="url" pattern="^3\d{16}[\dx]$" id="p">
            <input type="button" value="注册" onclick="regist()">
        </form>
        <script>
            function regist() {
                var d = document.getElementById('text');
                // if (d.value.length == 0) {
                //     console.log("请填写")
                // }
                console.log(d.validity.valid);
                console.log(d.validity.valueMissing+"--=");
                // if (d.validity.valid) {
                //     console.log("验证通过")
                // }else{
                //     console.log("验证失败");
                // }
    
                var email = document.getElementById('e');
                if (e.validity.typeMismatch) {
                    console.log("邮箱格式不正确")
                }
    
                var p = document.getElementById('p');
                if (p.validity.typeMismatch) {
                    console.log("不匹配正则")
                }
            }
        </script>
    </body>
    </html>
    
    
    展开全文
  • css元素类型哪几

    千次阅读 2019-09-19 19:35:45
    根据css显示分类,XHTML元素被分为三种类型: 块状元素(block element) 说明:没有动过 修饰过 它的宽度就是浏览器的宽度,高度就是子元素的高度 1.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为 ...

    元素的类型

    根据css显示分类,XHTML元素被分为三种类型:

    块状元素(block element)

    说明:没有动过 修饰过 它的宽度就是浏览器的宽度,高度就是子元素的高度

    1.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为
    矩形区域,常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,(h1~h6)
    ,p,form,hr,iframe,colgroup,col,table,tr,td,等;
    2.默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素
    不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列
    3.块状元素都可以定义自己的宽度和高度
    4.块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他
    块状元素。我们可以把这种容器比喻为一个盒子。

    以下这类属于块状元素

    div-最常用的块级元素
    dl- 和dt-dd 搭配使用的块级元素
    form-交互表单
    h1-h6 大标题
    hr-水平分隔线
    ol-排序表单
    p-段落
    ul-非排序列表
    fieldset- 表单字段级
    colgroup-col- 表单列分组元素
    table-tr-td 表格及行-单元格

    内联元素(inline element)(或是行内元素)

    1.常见的内联元素如:a,span,i,em,strong,b等等
    2.内联元素的表现形式是始终以行内逐个进行显示
    3.内联元素没有自己的形状,不能定义它的宽和高,它显示的高度和欢度
    只能根据所包含内容的高度和宽度来确定,它的最小内容单元
    也会呈现矩形形状;
    4.内联元素也会遵循盒模型基本规则,如可以定义
    padding,border,magrin,background等属性,但个别属性不能正确显示;

    以下这类属于内连元素也叫行内元素

    a-锚点
    br-换行
    em-强调
    b-粗体(不推荐)
    i-斜体
    font-字体设定(不推荐)
    img-图片
    input-输入框
    label-表格标签
    span-常用内联容器,定义文本内区块
    strong-粗体强调
    sub- 上标
    sup-下标
    textarea-多行文本输入框
    u-下划线

    可变元素:
    需要根据上下文关系确定该元素是块元素或者内连元素

    applet-java applet
    button-按钮
    del-删除文本
    iframe-inline frame
    ins- 插入的文本
    map-图片区块
    object-object对象
    script-客户端脚本

    最后讲一个属性:display属性
    display属性:用于定义建立布局时元素生成的显示框类型

    display-block
    说明:
    类似在元素后面添加换行符,也就是说其他元素不能再后面
    并列显示

    特征:
    不设置宽度时,宽度撑满一行,独占一行
    支持宽高
    当元素设置了float属性后,就相当于给该元素加了display:block属性

    给行内元素添加display-block属性后 能产生宽度和高度,成块状元素

    display-inline
    说明:
    再元素后面删除换行符,多个元素可以在一行内并列显示

    特征:
    内容撑开宽度
    非独占一行
    不支持宽高
    代码换行被解析成空格

    能使块状元素添加display-inline属性后,变成行内元素

    display-inline-block
    说明:
    元素的内容以块状显示,行内的其他元素显示在同一行

    特征:
    不设置宽度时,内容撑开宽度
    非独占一行
    支持宽高
    代码换行被解析成空格

    图片和表单
    img input 是行内块元素 又能在一行内显示,又能设置宽和高

    none 此元素不会被显示
    特征:隐藏元素并脱离文档流

    list-item 将元素转换成列表。li的默认类型
    特征: 不设置宽度时,宽度撑满一行
    独占一行 支持宽高

    大部分块元素display属性值默认为block,其中列表的默认值
    为list-item。

    大部分内联元素的display属性值默认为inline,其中img.input
    默认为inline-block

    展开全文
  • ``` $("#submit").click(function () { var sumQ = $("#MTform").serializeArray();... //判断input,select,checkbox类型,在这里用哪个语法获取当前是input还是select呢? ; } } }); ```
  • 【常见的表单元素有哪些?各什么属性? 】 大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。 表单元素是允许用户在表单中(比如:文...
  • HTML 表单元素的基本样式

    千次阅读 2018-02-22 17:48:53
    表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text...
  • 之前写一些小项目的时候,在表单这一块因为知道的type属性就text、password、button、submit等一些值...现在,就对form表单常用元素进行整理。 type值 代表的含义 text 文本 password 密码 button ...
  • HTML 表单元素有哪些?

    千次阅读 2017-05-19 13:17:15
    最重要的表单元素是 元素。 元素根据不同的 type 属性,可以变化为多种形态。 注释:下一章讲解所有 HTML 输入类型。 元素(下拉列表)  元素定义下拉列表: 实例 Volvo Saab Fiat Audi ...
  • 类型形式 ``` ``` 求大神解答一下
  • JS遍历判断表单元素值及类型

    千次阅读 2009-02-09 15:43:00
    function checkAllIput(){ //得到表单所有元素 var elements = document.forms[0].elements; for(i = 0;i if(elements[i].value == "" && elements[i].type == "text"){ alert("数据没有填写完整!"); return ...
  • vue动态生成表单元素

    千次阅读 2018-11-15 14:44:57
    根据选择方式展示不同的表单元素 如果从编辑页进入该页面数据的话,进行数据回填 样式同第点相似,这里不再说明 思路: 请输入标题,请选择类型 为父组件;请选择方式 为子组件;根据请选择方式出来的内容...
  • input表单元素required用法

    千次阅读 2019-09-29 11:53:29
    input表单元素required用法 定义和用法 required 属性是一个布尔属性。 required 属性规定必需在提交表单之前填写输入字段。 注意:required 属性适用于下面的 input 类型:text、search、url、tel、email、password...
  • 经常碰到需要控制表单元素输入的类型,然后每次总是百度,然后复制粘贴,特别浪费时间。 这里收集好方便直接使用。提供的方法非常简单使用直接嵌套在标签上使用,无需单独写js方法调用实现, 不能输入特殊字符 &...
  • JSP常用三个指令元素

    千次阅读 2018-06-19 14:39:27
    (一)Page指令 page指令用来设定JSP页面的全局属性,该配置作用于整个JSP页面。... page指令包含13个属性,如下: (1)language 用来指明所使用的脚本语言类型 (2)extends 用来指定该JSP页面生成的Servlet继承于...
  • by zhangxinxu from http://www.zhangxinxu.com ... ...一、良生- input type=file与文件上传 ...本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: 但是,为了习
  • HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 本章全面介绍这些新的输入类型: email url number range Date pickers (date, month, week, time, datetime, datetime-local) search...
  • jquery获取表单类型为radio的元素

    千次阅读 2015-07-21 18:16:58
    HTML代码: Yes No Text:  Javascript代码: alert("form selector 1:"+$('...//标签选择器和表单选择器:获取所有radio类型元素,值为2 alert("form selector and filter2:"+$('#myid input:radio'
  • HTML5新增的表单元素有哪些?

    千次阅读 2019-01-22 11:09:00
    表单控:color , calendar , date , datetime, datetime-local, time, mouth , week, email, url , search,... 新的表单元素: datalist , keygen, output 转载于:https://www.cnblogs.com/tong-yao/p/10302683.h...
  •  表单的作用是从访问您的Web站点的用户那里获取信息,访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。 是客户端与服务器端进行信息交流的途径。 l...
  • H5新增表单元素、控件

    千次阅读 2019-09-24 18:51:43
    表单—新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, ...
  • html5篇——新增表单元素和表单属性

    万次阅读 多人点赞 2016-03-08 12:52:13
    这一篇介绍html5新增的表单元素和表单属性。 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素...
  • 在HTML文档中,表单用于在网页中收集用户输入的数据,负责数据采集功能,表单元素有如下标签。 定义一个表单,用于申明采集数据的区域范围。里面可以嵌套其他表单元素
  • html元素 —— 表单元素及实用属性

    千次阅读 2016-09-09 22:08:28
    一、常用表单元素 :定义供用户输入的表单。 :定义域。即输入区加文字的边框。 :定义域的标题,即边框上的文字。 :定义一个控制的标签。如输入框前的文字,用以关联用户的选择。 :定义输入域,常用。可设置type...
  • jQuery操作Form表单元素

    千次阅读 2015-07-27 09:13:04
    Web开发中经常需要操作表单,form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和radio的读写值操作比较多变,checkbox和radio经常用在一个分组里,实现多选...
  • Vant-UI 表单组件(Field组件):验证表单元素&amp;amp;amp;&amp;amp;amp;表单提交:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 170,292
精华内容 68,116
关键字:

常用的表单元素有三种类型