获得和设置表单的值

Massimo_ycw

于 2022-06-15 10:58:07 发布

阅读量362

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Massimo__JAVA/article/details/125292592

版权

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了HTML表单的基本元素，如文本框、下拉框、单选按钮和多选按钮等，并探讨了表单的主要目的——提交信息。通过JavaScript可以方便地获取和设置表单字段的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、表单是什么 form DOM树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

二、表单的目的

提交信息

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>

<!-- 多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>

    <script>
        var input_text = document.getElementById("username");
        //得到输入框的值
         input_text.value;

         //修改输入框的值
        input_text.value = "2334325";

        var boy_radio = document.getElementById("boy");
        var girl_radio = document.getElementById("girl");
        //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值

        //查看返回的结果，是否为true，如果为true，则被选中
        boy_radio.checked;
    </script>

</body>
</html>