HTML中表单form的相关知识

最新推荐文章于 2022-02-25 21:59:54 发布

疏影青棠

最新推荐文章于 2022-02-25 21:59:54 发布

阅读量323

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Semine_1126/article/details/77883796

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML中表单form的相关知识

如果一个表单对象定义如下：

<form name="frm1" method="post" action="login.aspx">

获得该表单对象的方法：

  i>  document.forms["frm1"];   // 根据name属性值 
 ii>  document.forms[0];        // 根据索引号 
iii>  document.frm1;            // 直接根据name值获得对象

自动选中文本框

<script language="javascript"> 
    window.onload = function(){ 
        var txtName = document.getElementsByName("myName")[0]; 
        txtName.onmouseover = function(){ 
           this.focus(); 
        }; 
        txtName.onfocus = function(){ 
           this.select(); 
        }; 
    } 
</script> 
<INPUT TYPE="text" NAME="myName" value="默认值被选中" />

获取选中单选框的值，设置单选框被选中

<script language="javascript"> 
        //获取选中项 
        function getChoice(){ 
            console.log("您选中的是："+$('input:radio:checked').val()); 
        }
        //设置选中项 
        function setChoice(num){ 
            $('input:radio')[num].checked="checked";

        } 

    </script>
</head>

<body>
    <form name="myForm1" method="post" action="">
        <input type="radio" name="sport" value="跑步 "> 跑步 
        <input type="radio" name="sport" value="打球"> 打球 
        <input type="radio" name="sport" value="登山"> 登山 
        <input type="radio" name="sport" value="健美"> 健美<br> 
    </form> 
    <input type="button" value="获取选中项" onclick="getChoice();" />
    <input type="button" value="设置第1项被选中" onclick="setChoice(0);" />
</body>