多选框

<!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. hosts 不启作用的解决办法

    查各种编码ANSI flushdns无用 停止DNS Client  服务  0.0

  2. 每一个开发人员都应该有一款自己的App

    ［谋哥每天一干货］          这篇文章不是鸡汤,是谋哥自己的感悟了. 谋哥近期每日一干货,坚持每天写,才发现这个事情你要是能坚持一年超级难.365天无论刮风下雨.心情好或不好.生病或生气.每天 ...

  3. Core Animation 动画的使用：关键帧动画、基础动画、动画组

    首先让我们了解下什么是 Core Animation,Core Animation 为核心动画,他为图形渲染和动画提供了基础.使用核心动画,我们只需要设置起点.终点.关键帧等一些参数,剩下的工作核心动 ...

  4. [Bayes] Latent Gaussian Process Models

    比较难理解,通过做题来入门. 目的:简单的了解下相关概念. 基础 热身 目的:找x到y的映射关系. 假设:Q latent functions {fi} fj 作为先验,跟x没什么直接关系,x只是作为 ...

  5. [UI] 01 - CSS

    前言 一.认识 From: http://www.runoob.com/css/css-tutorial.html CSS 指层叠样式表 (Cascading Style Sheets) 解决内容与表 ...

  6. Nginx-设定允许的ip和要拒绝的ip

    作用范围和配置的顺序有关系,先配置的优先级高,会覆盖和后一个配置重合的部分, 可以添加多个allow和多个deny: 1)这个配置127.0.0.1可以通过访问. allow 127.0.0.1; d ...

  7. Doker学习笔记之一：安装

    基于Ubuntu16.04LTS 第一步:通过脚本进行安装 $ curl -sSL https://get.docker.com/ | sh 或者选择国内的DaoCloud安装脚本 $ curl -s ...

  8. DrawerLayout 设置为滑动范围全盘

    public void setDrawerLeftEdgeSize(DrawerLayout drawerLayout, float displayWidthPercentage) { if (dra ...

  9. electron 主进程，和渲染进程的通信

    ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进 ...

  10. easyui Dialog 去边框

    使用Url页面显示 panel-body 的内容, 因页面高度大于iframe高度,右侧则会出现边框, 如果页面显示的内容高度真实大于iframe高度,那出现边框是很正常. 我的问题就是有内部页面 的 ...