多选框

<!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">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com" method="get">

        <div>

            <!-- 复选框 -->

            <p>

                用户爱好:

                羽毛球<input type="checkbox" value="1">

                篮球<input type="checkbox" value="2">

                足球<input type="checkbox" value="3">

                读书<input type="checkbox" value="4">

            </p>

        </div>

        <input type="submit" value="提交">

    </form>

</body>

</html>

name属性设置为一样，这样后台就知道用户选中了几个

<!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">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com" method="get">

        <div>

            <!-- 复选框 -->

            <p>

                用户爱好:

                羽毛球<input type="checkbox" name="favor" value="1">

                篮球<input type="checkbox" name="favor" value="2">

                足球<input type="checkbox" name="favor" value="3">

                读书<input type="checkbox" name="favor" value="4">

            </p>

        </div>

        <input type="submit" value="提交">

    </form>

</body>

</html>

url上传递name属性相同

加上checked 让这个选项默认被选中
<!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">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com" method="get">

        <div>

            <!-- 复选框 -->

            <p>

                用户爱好:

                羽毛球<input type="checkbox" name="favor" value="1" checked>

                篮球<input type="checkbox" name="favor" value="2">

                足球<input type="checkbox" name="favor" value="3">

                读书<input type="checkbox" name="favor" value="4">

            </p>

        </div>

        <input type="submit" value="提交">

    </form>

</body>

</html>

前端 HTML form表单标签 input标签 type属性 checkbox 多选框的更多相关文章

  1. 常用6种type的form表单的input标签分析及示例

    <input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...

  2. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  3. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  4. php 处理 form 表单提交多个 name 属性值相同的 input 标签

    一 问题 在公司的开发过程中,遇到了一个问题:如何处理 form 表单提交了多个 name 属性值相同的 input 标签?源码如下(源码是在 form 表单之中的): <!--{loop $a ...

  5. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  6. 前端之form表单与css（1）

    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...

  7. 判断form表单每个input字段是否有内容

    //---------------------------------------------------input失去焦点时判断是否有值 btn_click: function () { //inp ...

  8. 前端通过form表单构造带参数url

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 前端 HTML form表单标签 select标签 option 下拉框

    <select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...

随机推荐

  1. 面试Spring之bean的生命周期

    找工作的时候有些人会被问道Spring中Bean的生命周期,其实也就是考察一下对Spring是否熟悉,工作中很少用到其中的内容,那我们简单看一下. 在说明前可以思考一下Servlet的生命周期:实例化 ...

  2. SpringBatch的初步了解

    一.SpringBatch是一个批处理的框架,作为一个Spring组件,提供了通过使用Spring的依赖注入来处理批处理的条件. 什么是批处理呢? 在现代企业应用当中,面对复杂的业务以及海量的数据,除 ...

  3. KSQL和Flink SQL的比较

    Confluent公司于2017年11月宣布KSQL进化到1.0版本,标志着KSQL已经可以被正式用于生产环境.自那时起,整个Kafka发展的重心都偏向于KSQL——这一点可以从Confluent官方 ...

  4. [APUE]进程关系(下)

    一.控制终端 对话期和进程组有一些其他特性: 一个对话期可以有一个单独的控制终端.通常是我们在其上登录的终端设备或伪终端设备. 建立与控制终端连接的对话期首进程,被称之为控制进程 一个对话期中的几个进 ...

  5. Error running app: Default Activity Not Found

    最近在调试安装Android Widget程序时,碰到Error running app: Default ActivityNot Found. 因为简单的Widget程序,如果不和应用程序关联,就不 ...

  6. mysql中将查询结果进行拼接处理及concat、group_concat的使用

    说明: 本文中使用的例子均在下面的数据库表tt2下执行: 一.concat()函数1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产 ...

  7. Project Move from Qt 4 to Qt 5 项目工程的迁移

    将Qt4的项目迁到Qt5中并不需要新建一个Qt5的工程,可以直接在原工程文件上修改,这里我们使用的是VS2010和Qt5.4的环境,我们需要做以下修改: 1. 在工程里找到这个文件:工程名.vcxpr ...

  8. Spring mvc 接口枚举类型数据格式化处理

    一.背景简述 首先,我们都知道枚举实例有两个默认属性,name 和 ordinal,可通过 name()和ordinal()方法分别获得.其中 name 为枚举字面量(如 MALE,FEMALE),o ...

  9. textarea 标签 属性

    textarea 标签 resize: vertical; 禁止横向拉伸 x resize: horizontal; 禁止竖向拉伸 y resize: none; 去掉拖动按钮

  10. F#周报2018年第50期

    新闻 Bolero: 用于WebAssembly的F#工具 Ionide-fsharp安装数量超过10万 WPF的Xaml.Behaviors类库开源 Visual Studio 2019预览版 .N ...