多选框

<!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. Failed to read schema document 'http://code.alibabatech.com/schema/dubbo/dubbo.xsd'问题解决方法

    Failed to read schema document 'http://code.alibabatech.com/schema/dubbo/dubbo.xsd'问题解决方法 关于dubbo服务的 ...

  2. Mac获取公网ip

    终端输入 curl http://members.3322.org/dyndns/getip way 2: ➜ ~ wget http://ipecho.net/plain -O - -q ; ech ...

  3. [Python] 00 - Books

    A.I. & Optimization Advanced Machine Learning, Data Mining, and Online Advertising Services Ref: ...

  4. rtmp推送aac没有声音的问题记录

      症状是这样的:用librtmp推流aac后,用vlc能收到推流的声音,但是用flash却播放不了推流的声音.   查了几天,用工具抓取推流的数据,发现rtmp数据包中的头部信息有一个Chunk S ...

  5. Qt编写自定义控件1-汽车仪表盘

    前言 汽车仪表盘几乎是qt写仪表盘控件中最常见的,一般来说先要求美工做好设计图,然后设计效果图给到程序员,由程序员根据效果来实现,主要靠贴图,这种方法有个好处就是做出来的效果比较逼真,和真实效果图基本 ...

  6. 【SpringCloud错误】错误记录

    org.springframework.beans.factory.BeanDefinitionStoreException: Failed to process import candidates ...

  7. linux命令学习（6）：ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  8. mui---获取入口文件对象

    在做APP的时候,发现在Hbuilder里面,如果是已经加载过的页面,可以通过 plus.webview.getWebviewById(id),拿到加载的页面对象,这里的id默认是url,但是入口文件 ...

  9. 10.13 Django随笔

    2018-10-13 14:20:59 越努力,越幸运! 永远不要高估自己! Django的渲染是在render()时候渲染的,然后把字符串传给浏览器 Django请求流程, 跨域 参考链接: htt ...

  10. day_5.12 py 老王开枪demo

    ps:2018-7-24 21:00:04 其实这部分主要是面向对象的复习!而不是面向过程 #!/usr/bin/env/python #-*-coding:utf-8-*- ''' 2018-5-1 ...