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="选中的水果有:\n";
            for(var i=0;i<x.length;i++)
            {if(x.options[i].selected)
                txt+=x.options[i].text+"\n";
            }
            
                alert(txt);
            }
            function setmultiple()
            {
                x.multiple=true;
            }
            
            
        </script>
    </body>
</html>

 

posted @ 2020-06-30 19:51  正好00  阅读(343)  评论(0)  编辑  收藏  举报