24、获得和设置表单的值

最新推荐文章于 2022-06-15 10:58:07 发布

工一木子

最新推荐文章于 2022-06-15 10:58:07 发布

阅读量109

点赞数

分类专栏： JavaScript学习文章标签： html javascript html5

本文链接：https://blog.csdn.net/Prince140678/article/details/120379484

版权

JavaScript学习专栏收录该内容

30 篇文章 0 订阅

订阅专栏

9、操作表单（验证）

表单是什么 form DOM树

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

表单的目的：提交信息

获得要提交的信息

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form action="post">
            <p>
                <span>用户名：</span><input type="text" id="username">
            </p>
            <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');
            var boy_radio = document.getElementById('boy');
            var girl_radio = document.getElementById('girl');
            //得到输入框的值
            input_text.value;
            //修改输入框的值
            input_text.value='123';
            //对于单选框，多选框等固定的值，boy_radio.value只能得到当前的值
            boy_radio.value;
            boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
            girl_radio.checked=true;//赋值
        </script>
    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dOCK65fd-1632027396858)(C:\Users\Administrator\Desktop\学习笔记\前端学习\javascript\24、获得和设置表单的值.assets\image-20210919125622553.png)]$

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
24、获得和设置表单的值

9、操作表单（验证）表单是什么 form DOM树文本框 text下拉框单选框 radio多选框 checkbox隐藏域 hidden密码框 password…表单的目的：提交信息获得要提交的信息<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫

专栏目录