HTML下拉列表(select)，单选框(radio), 复选框(checkbox)如何向后端传值

冰橙雪梨

已于 2022-04-18 13:32:54 修改

阅读量1.4w

点赞数 9

文章标签： python

于 2022-04-12 13:05:29 首次发布

本文链接：https://blog.csdn.net/hjc000712/article/details/124121206

版权

前言

提示：该文章记录前端往后端传值的一些细节

提示：以下是本篇文章正文内容，下面案例可供参考

一、form是什么？

form是前端往后端传值的一个表单

二、html代码如下

1，下拉列表源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" , method="post">
    {% csrf_token %}
    <select name="name" id="">
        <option value="李白">libai</option>
        <option value="{{ name }}">dufu</option>
    </select>
    <br>
    <input type="text" name="11">
    <input type="submit" value="提交">
    <a href="{% url 'cr' %}">单复选框</a>
</form>
</body>
</html>

由于该代码的后端是采用python的Django, 所以html文件里面包含了一些模板语法，但不影响读者阅读

2.单选框和复选框源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<form action="{% url 'cr' %}" align="center" method="post">
    {% csrf_token %}
    Checkbox:
    <input type="checkbox" value="第一个" name="c1">第一个
    <input type="checkbox" value="第二个" name="c1">第二个
    <input type="checkbox" value="第三个" name="c2">第三个
    <input type="checkbox" value="第四个" name="c3">第四个
    <br>
    Radio:
    <input type="radio" value="第一个" name="r1">第一个
    <input type="radio" value="第二个" name="r1">第二个
    <input type="radio" value="第三22222个" name="r1">第三个
    <input type="text", value="hdjfdjfawfwefd" , name="input">
    <br>
    <input type="submit" , value="提交">
</form>


</body>

</html>

三、后台运行结果如下：

总结

通过测试可以明白，下拉框和单，复选框是通过标签得name, 和value往后端传值，而input标签的value不会传值，只是会在输入栏中显示，传的的值是自己的输入值。

冰橙雪梨

关注

9
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML下拉列表(select)，单选框(radio), 复选框(checkbox)如何向后端传值

前言提示：该文章记录前端往后端传值的一些细节提示：以下是本篇文章正文内容，下面案例可供参考一、form是什么？form是前端往后端传值的一个表单二、html代码如下 1，下拉列表源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><...
复制链接

扫一扫