前言

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

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

一、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不会传值，只是会在输入栏中显示，传的的值是自己的输入值。

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

java 单选下拉_jQuery对单选框radio,复选框checkbox,下拉列表select的操作
获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本var item = $(" ...
Vue指令 v-for遍历、下拉列表、单选框、复选框
4 .v-for遍历 4.1 遍历数组中的对象格式:v-for="item in list" 里面也可以返回下标格式:v-for="(item.index) in l ...
HTML基本结构标签列表表格表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签 HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链 ...
html:(19):单选框，复选框，下拉列表框
使用单选框.复选框,让用户选择在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户 ...
JS判断HTML中创建的单选框、复选框、下拉列表框是否被选中
目录一.单选框: 二.复选框: 三.下拉列表框: 一.单选框: 有如下单选框:radio <div class="form-text">性别:</div> ...
vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框在传统的HTM ...
单选框与复选框数据回填
单选框与复选框数据回填 ·························································· 开发工具:Visual Studio 2015 关键技术: ...
你知道如何修改单选框、复选框、下拉框的默认样式吗
介绍 HTML 原生的单选框.复选框元素样式在各个浏览器上面由用户代理默认设置样式,如果在页面上应用了其他颜色或主题时,我们通常也相应的更改这些输入框或按钮的颜色或背景,否则会出现颜色与背景或主题不融 ...
form表单注意点合集（文本域、单选框、复选框、下拉框等）
.html <form action="#" target="_blank">账号:<input type="text" ...

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

前言

一、form是什么？

二、html代码如下

总结

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

最新文章

热门文章