前端 HTML form表单标签 input标签 type属性 checkbox 多选框
多选框
<!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 多选框的更多相关文章
- 常用6种type的form表单的input标签分析及示例
<input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- php 处理 form 表单提交多个 name 属性值相同的 input 标签
一 问题 在公司的开发过程中,遇到了一个问题:如何处理 form 表单提交了多个 name 属性值相同的 input 标签?源码如下(源码是在 form 表单之中的): <!--{loop $a ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- 前端之form表单与css(1)
目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
- 判断form表单每个input字段是否有内容
//---------------------------------------------------input失去焦点时判断是否有值 btn_click: function () { //inp ...
- 前端通过form表单构造带参数url
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
随机推荐
- titlesplit
/** * Created by lkl on 2017/6/26. *///spark-shell --driver-class-path /home/hadoop/test/mysqljdbc.j ...
- Android TextView文字空格
表示全角空格, <string name="aaa">你好 啊</string> http://stackoverflow.com/questi ...
- [React] 03 - Intro: react.js in twelve demos
Ref: React 入门实例教程 这算什么,react学习例子的十二门徒?哈哈 如何运行别人的react项目? Ref: [React全家桶入门之CODE]项目代码与使用方法 使用git克隆项目到本 ...
- vue封装第三方插件并发布到npm
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...
- 对osg节点添加glsl特效(片断着色器FragmentShader)
读取一个模型到节点node,然后想对node施加一些特效,这时可以只使用片段着色器 其中: gl_Color表示固定管线计算出来的颜色,包含光照效果 gl_TexCoord[]表示纹理坐标 unifo ...
- C# 解决读取dbf文件,提示Microsoft Jet 数据库引擎找不到对象的问题
前言 最新项目需要经常和dbf文件打交道,在实际场景中很多软件需要和一些老的系统进行数据交互,而这些系统都在使用foxpro数据库,读取dbf文件一般都是分为两种情况:第一:安装foxpro的驱动进行 ...
- NHibernate中的API
本篇文章介绍的是NHibernate的各种API及其作用. 下图描述了NHibernate的API在分层架构中的作用,下面将进行详细说明. NHibernate的接口大致分为四类:1. 被应用程序调 ...
- linux命令之间的分号,&&, ||
在用linux命令时候, 我们经常需要同时执行多条命令, 那么命令之间该如何分割呢? 分号: 顺序地独立执行各条命令, 彼此之间不关心是否失败, 所有命令都会执行. && : 顺序执 ...
- 正则表达式中,[\s\S]* 什么意思
https://blog.csdn.net/haoyuedangkong_fei/article/details/53781936 例如:[a-z]表示从a到z之间的任意一个. 不是这样的吗?谁能给我 ...
- meat http-equiv 属性详解
转自 http://kinglyhum.iteye.com/blog/827807 http-equiv 属性提供了 content 属性的信息/值的 HTTP 头. http-equiv 属性可用于 ...