多选框

<!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. AbtestingGateway 分流策略添加

    目录结构分布 我们从GitHub上把它下载后解压出来,有以下5个目录,分别是: admin 管理模块,对策略增删改查等功能 diversion 主模块吧,看源码是匹配redis存储的key doc 文 ...

  2. eclipse安装emmet插件

    http://www.cnblogs.com/matchless/archive/2013/04/10/3011973.html

  3. [Artoolkit] Framework Analysis of nftSimple

    What is nftSimple? Loads NFT dataset names from a configuration file. The example uses the “Pinball. ...

  4. 18职责链模式CoR

    一.什么是职责链模式 Chain of Responsibility(CoR)模式也叫职 责链模式或者职责连锁模式,是行为模式之一, 该模式构造一系列分别担当不同的职责的类的对 象来共同完成一个任务, ...

  5. SQL Server -- 随笔

    -- 判断是否存在 LimeNextMonthBirthday 表 ) PRINT '存在' ELSE PRINT'不存在' -- 如果存在 则删除 没有 则打印 不存在 ) DROP TABLE L ...

  6. 我的Mac Pro coding环境配置

    新装了OS X 10.11.1. 记录一下开发用得到的一些玩意,方便下次再次配置. homebrew国内源:http://mirrors.tuna.tsinghua.edu.cn/help/#home ...

  7. VS2008下安装与配置DirectShow SDK 9.0 及 DirectShow AMCap改装的问题

    一.安装DirectShow. 我装的是DirectShow SDK 9.0b.安装程序名为DXSDK_Jun10.exe. 下载地址:https://pan.baidu.com/s/1kURma3t ...

  8. sscanf的字符串格式化用法

    sscanf()为C语言标准库函数,用于从指定字符串中读入与指定格式相符的数据.函数原型声明在stdio.h头文件中: int sscanf(const char *str, const char * ...

  9. WebKit最新特性srcset简介(转)

    WebKit内核最新新增了对srcset属性的支持(参考:https://www.webkit.org/blog/2910/improved-support-for-high-resolution-d ...

  10. 【BZOJ2671】Calc 数学

    [BZOJ2671]Calc Description 给出N,统计满足下面条件的数对(a,b)的个数: 1.1<=a<b<=N 2.a+b整除a*b Input 一行一个数N Out ...