多选框

<!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. titlesplit

    /** * Created by lkl on 2017/6/26. *///spark-shell --driver-class-path /home/hadoop/test/mysqljdbc.j ...

  2. Android TextView文字空格

     表示全角空格, <string name="aaa">你好      啊</string> http://stackoverflow.com/questi ...

  3. [React] 03 - Intro: react.js in twelve demos

    Ref: React 入门实例教程 这算什么,react学习例子的十二门徒?哈哈 如何运行别人的react项目? Ref: [React全家桶入门之CODE]项目代码与使用方法 使用git克隆项目到本 ...

  4. vue封装第三方插件并发布到npm

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...

  5. 对osg节点添加glsl特效（片断着色器FragmentShader）

    读取一个模型到节点node,然后想对node施加一些特效,这时可以只使用片段着色器 其中: gl_Color表示固定管线计算出来的颜色,包含光照效果 gl_TexCoord[]表示纹理坐标 unifo ...

  6. C# 解决读取dbf文件，提示Microsoft Jet 数据库引擎找不到对象的问题

    前言 最新项目需要经常和dbf文件打交道,在实际场景中很多软件需要和一些老的系统进行数据交互,而这些系统都在使用foxpro数据库,读取dbf文件一般都是分为两种情况:第一:安装foxpro的驱动进行 ...

  7. NHibernate中的API

    本篇文章介绍的是NHibernate的各种API及其作用. 下图描述了NHibernate的API在分层架构中的作用,下面将进行详细说明. NHibernate的接口大致分为四类:1.  被应用程序调 ...

  8. linux命令之间的分号，&&， ||

    在用linux命令时候, 我们经常需要同时执行多条命令, 那么命令之间该如何分割呢? 分号: 顺序地独立执行各条命令, 彼此之间不关心是否失败, 所有命令都会执行. &&  : 顺序执 ...

  9. 正则表达式中,[\s\S]* 什么意思

    https://blog.csdn.net/haoyuedangkong_fei/article/details/53781936 例如:[a-z]表示从a到z之间的任意一个. 不是这样的吗?谁能给我 ...

  10. meat http-equiv 属性详解

    转自 http://kinglyhum.iteye.com/blog/827807 http-equiv 属性提供了 content 属性的信息/值的 HTTP 头. http-equiv 属性可用于 ...