form和button和input

Posted hsl541

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了form和button和input相关的知识，希望对你有一定的参考价值。

form里面不能用button代替<input type="button"/>

button这个按钮直接写在form里面，则看到效果是一瞬间的，是不起作用的，要在form里面添加按钮就采用<input type="button"/>或者把button写在表单外面，则作用是一样的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" >
            <select name="selectt" id="sel">
                <option value="水果1">苹果</option>
                <option value="水果2">香蕉</option>
                <option value="水果3">栗子</option>
            </select>
            
        </form>
        <br /><br /><br /><br /><br />
            <button onclick="setdisable()">按钮1</button><br/>
            <button onclick="setenable()">按钮2</button><br />
            <button onclick="setlength()">按钮3</button><br />
            <button onclick="setsize()">按钮4</button><br />
            <button onclick="setdel()">按钮5</button><br />
            <button onclick="changetext()">按钮6</button><br />
            <button onclick="shuchu()">按钮7</button><br />
            <button  onclick="setmultiple()">按钮8</button>
        <script>
            var x=document.getElementById("sel");
            
            function setdisable()//按钮1
            {
             x.disabled=true;
            }
            
            function setenable()//按钮2
            {
                x.disabled=false;
            }
            function setlength()//按钮3
            {
                alert(x.length);
                
            }
            function setsize()//按钮4
            {
               x.size=3;
            }
            function setdel()//按钮5
            {
                x.remove(x.selectedIndex);
            }
            function changetext()//按钮6
            {
                x.options[x.selectedIndex].text="西瓜";
            }
            function shuchu()//按钮7
            {var txt="选中的水果有:
";
            for(var i=0;i<x.length;i++)
            {if(x.options[i].selected)
                txt+=x.options[i].text+"
";
            }
            
                alert(txt);
            }
            function setmultiple()
            {
                x.multiple=true;
            }
            
            
        </script>
    </body>
</html>

 

以上是关于form和button和input的主要内容，如果未能解决你的问题，请参考以下文章

:input 匹配所有 input, textarea, select 和 button 元素

Jquery获取元素#form1：input和#form1 input 的区别

input type="submit" 和"button"有什么区别？

BUTTON标签和INPUT标签的区别转

input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit

表单提交：button input submit 的区别